simpo-component-library 2.1.699 → 2.1.991

package/fesm2022/simpo-component-library.mjs

@@ -1,5 +1,5 @@
 import * as i4 from '@angular/common';
-import { CommonModule, NgStyle, NgFor, isPlatformBrowser } from '@angular/common';
+import { CommonModule, isPlatformBrowser, NgFor, NgIf } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Component, Input, EventEmitter, Injectable, Directive, Pipe, HostListener, Output, NgModule, ViewChild, Optional, Inject, PLATFORM_ID } from '@angular/core';
 import { MatGridListModule } from '@angular/material/grid-list';
@@ -133,6 +133,7 @@ class EventsService {
         this.environmentType = new EventEmitter();
         this.categoryProductList = new EventEmitter();
         this.collectionsListEvent = new EventEmitter();
+        this.propertyListEvent = new EventEmitter();
         this.categoryListEvent = new EventEmitter();
         this.showLoadingScreen = new EventEmitter();
         this.cashFreeEvent = new EventEmitter();
@@ -1471,7 +1472,6 @@ class DocumentComponent {
         else {
             file.type = 'FILE';
         }
-        console.log(file);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: DocumentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: DocumentComponent, isStandalone: true, selector: "simpo-document", inputs: { documentList: "documentList" }, ngImport: i0, template: "<section class=\"main-section p-2\">\r\n  <div class=\"list_tabs heading d-flex align-items-center\">\r\n    Required Document\r\n  </div>\r\n\r\n  <div class=\"document-section\">\r\n    <div class=\"document\" *ngFor=\"let document of documentList\">\r\n      <div class=\"left-side\">\r\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/183907c1734627971492pdf.png\" alt=\"\">\r\n        <p>{{document.displayText}}</p>\r\n      </div>\r\n      <div class=\"right-side\" (click)=\"fileInput.click()\" *ngIf=\"!(document.file || document.url)\">\r\n        <div>Upload</div>\r\n      </div>\r\n      <div class=\"right-side\" *ngIf=\"document.file || document.url\">\r\n        <mat-icon>delete</mat-icon>\r\n      </div>\r\n\r\n      <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\r\n            accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\r\n            (change)=\"uploadDocument($event, document)\" class=\"pc-btn\"\r\n            id=\"browse_contact_image\" #fileInput />\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [".list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.heading{font-size:18px;font-weight:500}.align-items-center{align-items:center}.p-2{padding:2rem!important}.document-section{padding-right:2rem;margin-top:2rem;padding-left:2rem;display:flex;flex-direction:column;gap:10px}.document{display:flex;justify-content:space-between;background:#eeecec;padding:1.5rem;border-radius:10px}.left-side{display:flex;align-items:center;gap:20px}.left-side p{margin-bottom:0}.right-side{background:#fff;height:35px;padding-left:30px;padding-right:30px;display:flex;align-items:center;border-radius:8px;font-weight:500}@media screen and (max-width: 475px){.p-2{padding:1rem}.document-section{padding-left:0rem;padding-right:0rem}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] }); }
@@ -1550,54 +1550,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 type: Input
             }] } });
 
-class PropertyComponent {
+class PortfolioComponent {
     constructor() {
-        this.obj = {
-            heading: "Anata One",
-            location: {
-                city: "Hyderabad",
-                state: "Telangana"
+        this.property_list = [
+            {
+                name: 'Ananta one',
+                sq_ft: '13 Sqft',
+                price: '12.1 L',
+                color: '#faa548'
             },
-            latitude: "",
-            longitude: "",
-            minInvestment: "5 Lac",
-            features: [
-                {
-                    key: "Annual Returns",
-                    value: "10%"
-                },
-                {
-                    key: "IRR",
-                    value: "18%"
-                },
-                {
-                    key: "Guaranteed capital growth",
-                    value: "5%"
-                }
-            ],
-            backgroundImageUrl: "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/607923c1737627077005image%20%284%29.png"
-        };
+            {
+                name: 'Ananta Hills',
+                sq_ft: '8 Sqft',
+                price: '9.7 L',
+                color: '#6ba9d9'
+            },
+            {
+                name: 'Leo Towers',
+                sq_ft: '10 Sqft',
+                price: '10.1 L',
+                color: '#6bd990'
+            },
+            {
+                name: 'NCD Vivanta',
+                sq_ft: '10 Sqft',
+                price: '20.1 L',
+                color: 'red'
+            },
+            {
+                name: 'MY Home Abooja',
+                sq_ft: '10 Sqft',
+                price: '40.1 L',
+                color: 'yellow'
+            }
+        ];
+        this.dropDownValues = ["All Properties", "Property 1", "Property 2"];
+        this.topCards = [
+            { icon: "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/990718c1739529606489Group%201707483072%20%281%29.png", text: "Properties Owned", count: "2" },
+            { icon: "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/681867c1739529671422Group%201707483072%20%282%29.png", text: "Total Investment Value", count: "5.73 L" },
+            { icon: "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/776806c1739529625699Group%201707483072.png", text: "Total Sq.ft Owned", count: "43" }
+        ];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertyComponent, isStandalone: true, selector: "simpo-property", inputs: { element: "element" }, ngImport: i0, template: "<div class=\"main-container w-100\" [ngStyle]=\"{ 'background-image': 'url(' + obj.backgroundImageUrl + ')' }\">\r\n    <div class=\"data p-3 w-100\">\r\n        <div class=\"top-data d-flex justify-content-between\">\r\n            <div class=\"top-left d-flex g-10\">\r\n                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/697059c1737627380633Rectangle%2034625906.png\"\r\n                    alt=\"logo-text\">\r\n                <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\r\n                    <div class=\"text-heading clr-white\">{{obj.heading}}</div>\r\n                    <div class=\"d-flex sub-text\"><img\r\n                            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{obj.location.city\r\n                        + \", \" + obj.location.state}}</div>\r\n                </div>\r\n            </div>\r\n            <div class=\"top-right text-right\">\r\n                <div class=\"xl-text mb-10\">{{obj.minInvestment}}</div>\r\n                <div class=\"nrml-text\">Min.Investment</div>\r\n            </div>\r\n        </div>\r\n        <div class=\"bottom-data d-flex justify-content-between align-items-center\">\r\n            <div class=\"key-value d-flex flex-column\" *ngFor=\"let ele of obj.features\">\r\n                <div class=\"text-heading clr-grey\">{{ele.value}}</div>\r\n                <div class=\"text-heading clr-grey\">{{ele.key}}</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".main-container{background-repeat:no-repeat;background-size:cover;height:40vh;position:relative}.data{position:absolute;bottom:0}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:17px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PortfolioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PortfolioComponent, isStandalone: true, selector: "simpo-portfolio", ngImport: i0, template: "<section class=\"main-container\">\r\n    <div class=\"head-container\">\r\n        <div class=\"icon-div text-end\"><mat-icon class=\"clr-white\">remove_red_eye</mat-icon></div>\r\n        <div class=\"top-text\">Current Portfolio Value</div>\r\n        <div class=\"main-text\">\u20B96.22 Lac</div>\r\n        <div class=\"bottom-text\">Investment increase by : &nbsp;<span class=\"amnt clr-white\">\r\n                \u20B954,290</span>&nbsp;&nbsp;<span class=\"percent-text\">+2.1%</span></div>\r\n    </div>\r\n    <div class=\"content-area\">\r\n        <div class=\"inside-header\">\r\n            <div class=\"left-section\">Investor Overview</div>\r\n            <div class=\"right-section d-flex\">\r\n                <div class=\"input-box\">\r\n                    <div class=\"filter-container d-flex align-items-center\">\r\n                        <div class=\"filter-item\">\r\n                            <input type=\"date\" class=\"custom-date-picker\" />\r\n                        </div>\r\n                        <div class=\"filter-item\">\r\n                            <select class=\"custom-dropdown\">\r\n                                <option *ngFor=\"let ele of dropDownValues\">{{ele}}</option>\r\n                            </select>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"inside-content\">\r\n            <div class=\"content1 d-flex justify-content-between\">\r\n                <div class=\"d1\" *ngFor=\"let ele of topCards\">\r\n                    <div class=\"d1_name\">{{ele.text}}</div>\r\n                    <div class=\"card1 d-flex align-items-center g-10\">\r\n                        <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n                            <div class=\"d1_img\">\r\n                                <img [src]=\"ele.icon\" alt=\"img1\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"no_of\">{{ele.count}}</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"content2 d-flex align-items-center\">\r\n                <div class=\"d2 d-flex\">\r\n                    <div class=\"left_d2\">\r\n                        <div class=\"d2_value\" *ngFor=\"let value of property_list\">\r\n                            <div class=\"value_left\">\r\n                                <div class=\"value_color\" [ngStyle]=\"{'background-color': value.color}\"></div>\r\n                                <div class=\"property_name\">{{value.name}}</div>\r\n                            </div>\r\n                            <div class=\"value_right\">\r\n                                <div>{{value.sq_ft}}</div>\r\n                                <div class=\"constant_line\">|</div>\r\n                                <div>{{value.price}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"d3\">\r\n                    <div class=\"d3_card1 common-style-1\">\r\n                        <div class=\"d3_card1_name\">Internal Rate of Return</div>\r\n                        <div class=\"value_d3_card1_name\"> 12%</div>\r\n                    </div>\r\n                    <div class=\"d3_card2 common-style-1\">\r\n                        <div class=\"d3_card2_name\">Annual Return</div>\r\n                        <div class=\"value_d3_card1_name\"> 10%</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</section>", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.head-container{background:linear-gradient(180deg,#0d1b2a,#172b40);padding:15px;border-radius:10px}.clr-white{color:#fff!important}.top-text{font-size:14px;font-weight:600;line-height:24px;color:#fff9;margin-bottom:15px}.main-text{font-weight:700;font-size:40px;line-height:24px;color:#fff;margin-bottom:15px}.bottom-text{font-weight:500;font-size:14px;line-height:24px;color:#fff9}.percent-text{color:#36b37e}.content1{gap:2rem;padding:15px 0}.d1_img img{width:40px;height:auto}.no_of{font-size:28px;font-weight:600;line-height:24px;color:#01161e}.top_navigation_section{width:100%;height:6vh;padding:4px 2px}.backToLeads{color:#000!important}.arrowLeft{position:relative;top:2px}.edit-icon,.delete-icon{border:1px solid #F1F1F1;padding:4px 8px;border-radius:8px}.mainSection_es{height:calc(100vh + -0px);z-index:2;position:absolute;top:0;background:#fff;width:100%;overflow-y:hidden}.top_navigation{height:calc(7vh + -0px)}.botton_rendering{height:calc(93vh + -0px)}.leadDetailsSection_es{width:20%;height:100%}.activityAndNotesSection_es{width:90%;padding:5px 23px;height:100%;margin-left:5%}.companyDetailsSection-es{width:15%;padding:10px;height:100%}.content-area{background:#f1f6ff;border-radius:8px;padding:10px 0;height:calc(65vh - 72px);gap:1px}.inside-header{height:7vh;display:flex;flex-direction:row;justify-content:space-between}.left-section{align-content:center;font-weight:600;font-size:16px;padding-left:25px;color:#000}.cal{width:30%}.inside-content{border-radius:8px;height:calc(60vh - 72px);display:flex;flex-direction:column;gap:2px}.d1{background-color:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.03);padding:15px;width:30%}.d1_name{text-align:start;font-size:16px;font-weight:500;line-height:24px;color:#01161e;margin-bottom:15px}.card1{gap:8px}.content2{gap:5%;border-radius:8px;width:100%}.d2{background-color:#fff;border-radius:8px;padding:4px 5px;height:25vh;width:65%;flex-direction:row;gap:2px}.left_d2{width:60%;align-content:center;height:auto;overflow-y:scroll;padding:12px}.d2_img{width:36%;align-content:center;height:20vh}.d3{border-radius:8px;width:30%;display:flex;flex-direction:column;gap:4px}.d3_card1{border-left:8px solid rgb(52,84,177)!important}.d3_card2{border-left:8px solid rgb(39,29,109)!important}.common-style-1{background-color:#fff;border-radius:8px;padding:15px;margin-bottom:15px}.d3_card1_name,.d3_card2_name{text-align:start;font-size:16px;line-height:24px;margin-bottom:10px;font-weight:500;color:#01161e}.value_d3_card1_name{text-align:start;font-size:28px;line-height:24px;font-weight:700;color:#01161e}.d2_value{display:flex;justify-content:space-between;padding:6px 2px}.value_left{display:flex;gap:8px;font-family:sans-serif;font-weight:500}.value_color{width:8px;height:21px;border-radius:3px}.value_right{display:flex;gap:2px;width:44%;justify-content:space-evenly}.filter-container{gap:10px}.filter-item{width:12vw}.custom-date-picker,.custom-dropdown{width:100%;padding:10px!important;border:1px solid rgba(0,0,0,.03);border-radius:8px;background-color:#fff;cursor:pointer;appearance:none;outline:none;font-size:14px;font-weight:500;line-height:24px;color:#000}.custom-dropdown{background-position:right 10px center;background-size:14px;padding-right:30px}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PortfolioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-property', standalone: true, imports: [NgStyle, NgFor, CommonModule], template: "<div class=\"main-container w-100\" [ngStyle]=\"{ 'background-image': 'url(' + obj.backgroundImageUrl + ')' }\">\r\n    <div class=\"data p-3 w-100\">\r\n        <div class=\"top-data d-flex justify-content-between\">\r\n            <div class=\"top-left d-flex g-10\">\r\n                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/697059c1737627380633Rectangle%2034625906.png\"\r\n                    alt=\"logo-text\">\r\n                <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\r\n                    <div class=\"text-heading clr-white\">{{obj.heading}}</div>\r\n                    <div class=\"d-flex sub-text\"><img\r\n                            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{obj.location.city\r\n                        + \", \" + obj.location.state}}</div>\r\n                </div>\r\n            </div>\r\n            <div class=\"top-right text-right\">\r\n                <div class=\"xl-text mb-10\">{{obj.minInvestment}}</div>\r\n                <div class=\"nrml-text\">Min.Investment</div>\r\n            </div>\r\n        </div>\r\n        <div class=\"bottom-data d-flex justify-content-between align-items-center\">\r\n            <div class=\"key-value d-flex flex-column\" *ngFor=\"let ele of obj.features\">\r\n                <div class=\"text-heading clr-grey\">{{ele.value}}</div>\r\n                <div class=\"text-heading clr-grey\">{{ele.key}}</div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", styles: [".main-container{background-repeat:no-repeat;background-size:cover;height:40vh;position:relative}.data{position:absolute;bottom:0}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:17px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}\n"] }]
-        }], propDecorators: { element: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'simpo-portfolio', standalone: true, imports: [MatIcon, CommonModule], template: "<section class=\"main-container\">\r\n    <div class=\"head-container\">\r\n        <div class=\"icon-div text-end\"><mat-icon class=\"clr-white\">remove_red_eye</mat-icon></div>\r\n        <div class=\"top-text\">Current Portfolio Value</div>\r\n        <div class=\"main-text\">\u20B96.22 Lac</div>\r\n        <div class=\"bottom-text\">Investment increase by : &nbsp;<span class=\"amnt clr-white\">\r\n                \u20B954,290</span>&nbsp;&nbsp;<span class=\"percent-text\">+2.1%</span></div>\r\n    </div>\r\n    <div class=\"content-area\">\r\n        <div class=\"inside-header\">\r\n            <div class=\"left-section\">Investor Overview</div>\r\n            <div class=\"right-section d-flex\">\r\n                <div class=\"input-box\">\r\n                    <div class=\"filter-container d-flex align-items-center\">\r\n                        <div class=\"filter-item\">\r\n                            <input type=\"date\" class=\"custom-date-picker\" />\r\n                        </div>\r\n                        <div class=\"filter-item\">\r\n                            <select class=\"custom-dropdown\">\r\n                                <option *ngFor=\"let ele of dropDownValues\">{{ele}}</option>\r\n                            </select>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"inside-content\">\r\n            <div class=\"content1 d-flex justify-content-between\">\r\n                <div class=\"d1\" *ngFor=\"let ele of topCards\">\r\n                    <div class=\"d1_name\">{{ele.text}}</div>\r\n                    <div class=\"card1 d-flex align-items-center g-10\">\r\n                        <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n                            <div class=\"d1_img\">\r\n                                <img [src]=\"ele.icon\" alt=\"img1\">\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"no_of\">{{ele.count}}</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n            <div class=\"content2 d-flex align-items-center\">\r\n                <div class=\"d2 d-flex\">\r\n                    <div class=\"left_d2\">\r\n                        <div class=\"d2_value\" *ngFor=\"let value of property_list\">\r\n                            <div class=\"value_left\">\r\n                                <div class=\"value_color\" [ngStyle]=\"{'background-color': value.color}\"></div>\r\n                                <div class=\"property_name\">{{value.name}}</div>\r\n                            </div>\r\n                            <div class=\"value_right\">\r\n                                <div>{{value.sq_ft}}</div>\r\n                                <div class=\"constant_line\">|</div>\r\n                                <div>{{value.price}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n                <div class=\"d3\">\r\n                    <div class=\"d3_card1 common-style-1\">\r\n                        <div class=\"d3_card1_name\">Internal Rate of Return</div>\r\n                        <div class=\"value_d3_card1_name\"> 12%</div>\r\n                    </div>\r\n                    <div class=\"d3_card2 common-style-1\">\r\n                        <div class=\"d3_card2_name\">Annual Return</div>\r\n                        <div class=\"value_d3_card1_name\"> 10%</div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</section>", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.head-container{background:linear-gradient(180deg,#0d1b2a,#172b40);padding:15px;border-radius:10px}.clr-white{color:#fff!important}.top-text{font-size:14px;font-weight:600;line-height:24px;color:#fff9;margin-bottom:15px}.main-text{font-weight:700;font-size:40px;line-height:24px;color:#fff;margin-bottom:15px}.bottom-text{font-weight:500;font-size:14px;line-height:24px;color:#fff9}.percent-text{color:#36b37e}.content1{gap:2rem;padding:15px 0}.d1_img img{width:40px;height:auto}.no_of{font-size:28px;font-weight:600;line-height:24px;color:#01161e}.top_navigation_section{width:100%;height:6vh;padding:4px 2px}.backToLeads{color:#000!important}.arrowLeft{position:relative;top:2px}.edit-icon,.delete-icon{border:1px solid #F1F1F1;padding:4px 8px;border-radius:8px}.mainSection_es{height:calc(100vh + -0px);z-index:2;position:absolute;top:0;background:#fff;width:100%;overflow-y:hidden}.top_navigation{height:calc(7vh + -0px)}.botton_rendering{height:calc(93vh + -0px)}.leadDetailsSection_es{width:20%;height:100%}.activityAndNotesSection_es{width:90%;padding:5px 23px;height:100%;margin-left:5%}.companyDetailsSection-es{width:15%;padding:10px;height:100%}.content-area{background:#f1f6ff;border-radius:8px;padding:10px 0;height:calc(65vh - 72px);gap:1px}.inside-header{height:7vh;display:flex;flex-direction:row;justify-content:space-between}.left-section{align-content:center;font-weight:600;font-size:16px;padding-left:25px;color:#000}.cal{width:30%}.inside-content{border-radius:8px;height:calc(60vh - 72px);display:flex;flex-direction:column;gap:2px}.d1{background-color:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.03);padding:15px;width:30%}.d1_name{text-align:start;font-size:16px;font-weight:500;line-height:24px;color:#01161e;margin-bottom:15px}.card1{gap:8px}.content2{gap:5%;border-radius:8px;width:100%}.d2{background-color:#fff;border-radius:8px;padding:4px 5px;height:25vh;width:65%;flex-direction:row;gap:2px}.left_d2{width:60%;align-content:center;height:auto;overflow-y:scroll;padding:12px}.d2_img{width:36%;align-content:center;height:20vh}.d3{border-radius:8px;width:30%;display:flex;flex-direction:column;gap:4px}.d3_card1{border-left:8px solid rgb(52,84,177)!important}.d3_card2{border-left:8px solid rgb(39,29,109)!important}.common-style-1{background-color:#fff;border-radius:8px;padding:15px;margin-bottom:15px}.d3_card1_name,.d3_card2_name{text-align:start;font-size:16px;line-height:24px;margin-bottom:10px;font-weight:500;color:#01161e}.value_d3_card1_name{text-align:start;font-size:28px;line-height:24px;font-weight:700;color:#01161e}.d2_value{display:flex;justify-content:space-between;padding:6px 2px}.value_left{display:flex;gap:8px;font-family:sans-serif;font-weight:500}.value_color{width:8px;height:21px;border-radius:3px}.value_right{display:flex;gap:2px;width:44%;justify-content:space-evenly}.filter-container{gap:10px}.filter-item{width:12vw}.custom-date-picker,.custom-dropdown{width:100%;padding:10px!important;border:1px solid rgba(0,0,0,.03);border-radius:8px;background-color:#fff;cursor:pointer;appearance:none;outline:none;font-size:14px;font-weight:500;line-height:24px;color:#000}.custom-dropdown{background-position:right 10px center;background-size:14px;padding-right:30px}\n"] }]
+        }] });
 
 class SimpoElementsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoElementsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.4", ngImport: i0, type: SimpoElementsModule, imports: [ButtonElementComponent, TextElementComponent, BelowImageCardComponent, TopOfImageCardComponent, CoveringImageCardComponent, HeadingElementComponent, SimpoButtonComponent, SociaIconsComponent, CardSkeletonLoaderComponent, SvgDividerComponent, PropertyComponent], exports: [ButtonElementComponent, TextElementComponent, BelowImageCardComponent, TopOfImageCardComponent, CoveringImageCardComponent, HeadingElementComponent, SimpoButtonComponent, SociaIconsComponent, CardSkeletonLoaderComponent, SvgDividerComponent, PropertyComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoElementsModule, imports: [ButtonElementComponent, TextElementComponent, BelowImageCardComponent, TopOfImageCardComponent, CoveringImageCardComponent, SociaIconsComponent, CardSkeletonLoaderComponent, SvgDividerComponent, PropertyComponent] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.4", ngImport: i0, type: SimpoElementsModule, imports: [ButtonElementComponent, TextElementComponent, BelowImageCardComponent, TopOfImageCardComponent, CoveringImageCardComponent, HeadingElementComponent, SimpoButtonComponent, SociaIconsComponent, CardSkeletonLoaderComponent, SvgDividerComponent, PortfolioComponent], exports: [ButtonElementComponent, TextElementComponent, BelowImageCardComponent, TopOfImageCardComponent, CoveringImageCardComponent, HeadingElementComponent, SimpoButtonComponent, SociaIconsComponent, CardSkeletonLoaderComponent, SvgDividerComponent, PortfolioComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoElementsModule, imports: [ButtonElementComponent, TextElementComponent, BelowImageCardComponent, TopOfImageCardComponent, CoveringImageCardComponent, SociaIconsComponent, CardSkeletonLoaderComponent, SvgDividerComponent, PortfolioComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SimpoElementsModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [ButtonElementComponent, TextElementComponent, BelowImageCardComponent, TopOfImageCardComponent, CoveringImageCardComponent, HeadingElementComponent, SimpoButtonComponent, SociaIconsComponent, CardSkeletonLoaderComponent, SvgDividerComponent, PropertyComponent],
-                    exports: [ButtonElementComponent, TextElementComponent, BelowImageCardComponent, TopOfImageCardComponent, CoveringImageCardComponent, HeadingElementComponent, SimpoButtonComponent, SociaIconsComponent, CardSkeletonLoaderComponent, SvgDividerComponent, PropertyComponent],
+                    imports: [ButtonElementComponent, TextElementComponent, BelowImageCardComponent, TopOfImageCardComponent, CoveringImageCardComponent, HeadingElementComponent, SimpoButtonComponent, SociaIconsComponent, CardSkeletonLoaderComponent, SvgDividerComponent, PortfolioComponent],
+                    exports: [ButtonElementComponent, TextElementComponent, BelowImageCardComponent, TopOfImageCardComponent, CoveringImageCardComponent, HeadingElementComponent, SimpoButtonComponent, SociaIconsComponent, CardSkeletonLoaderComponent, SvgDividerComponent, PortfolioComponent],
                 }]
         }] });
 
@@ -2687,8 +2698,6 @@ class BannerSectionComponent extends BaseSection {
         this.screenWidth = "";
     }
     ngOnInit() {
-        console.log(this.data);
-        console.log(this.nextComponentColor);
         this.deleteSelected = this.delete;
         this.content = this.data?.content;
         this.styles = this.data?.styles;
@@ -3656,7 +3665,6 @@ class NavbarButtonElementComponent {
         this.HeaderButtonStyle = HeaderButtonStyle;
     }
     ngOnInit() {
-        // console.log(this.buttonData)
     }
     changePage(pageData) {
         this._eventService.pageRedirectionButton.emit({ data: pageData ? pageData : this.buttonData });
@@ -3782,7 +3790,9 @@ class RestService {
         this.eventService = eventService;
         this.BASE_URL = "https://dev-api.simpo.ai/";
         this.ECOMMERCE_URL = "https://dev-ecommerce.simpo.ai/";
-        this.CMIS_URL = "https://dev-api.simpo.ai/";
+        // private CMIS_URL: string = "https://api-cmis.tejsoft.com/"; //production
+        this.CMIS_URL = "https://dev-api.simpo.ai/"; //dev
+        // private CMIS_URL: string = "https://stageapi-cmis.tejsoft.com/"; //stage
         this.environmentTypeSubscriber = null;
         this.environmentTypeSubscriber = this.eventService.environmentType.subscribe((response) => {
             if (response == "DEV") {
@@ -4022,7 +4032,7 @@ class RestService {
         return this.http.put(this.BASE_URL + `crm/appointment/config/available/timeslots`, data);
     }
     getSelectedListFields(bId, showInErp, formName) {
-        return this.http.get(this.CMIS_URL + `crm/fields?businessId=${bId}&status=true&showInErp=${showInErp}&isPagination=false&fieldCategory=${formName}`);
+        return this.http.get(this.CMIS_URL + `crm/fields?businessId=${bId}&status=true&showInForm=${showInErp}&isPagination=false&fieldCategory=${formName}`);
     }
     createRegistration(payload) {
         return this.http.post(this.CMIS_URL + `crm/registration/?enquiryId=${payload?.enquiryId || ''}`, payload);
@@ -4052,6 +4062,28 @@ class RestService {
     getRegistrationList(payload) {
         return this.http.put(this.CMIS_URL + `crm/registration/getAll`, payload);
     }
+    // Real Estate Related APIs
+    getFeaturedProperty(propertyIds) {
+        return this.http.post(this.BASE_URL + `property/getById`, propertyIds);
+    }
+    getPropertyList() {
+        return this.http.get(this.BASE_URL + `property/getAllProperty?pageNo=0&size=20`);
+    }
+    getPropertyDetails(propertyId) {
+        return this.http.get(this.BASE_URL + `property/${propertyId}`);
+    }
+    signUp(investor) {
+        return this.http.post(this.BASE_URL + `investor/signup`, investor);
+    }
+    sendOtp(email) {
+        return this.http.post(this.BASE_URL + `investor/sendOtp?email=${email}`, '');
+    }
+    login(email, password, logInType = 'PASSWORD') {
+        return this.http.get(this.BASE_URL + `investor/login?loginType=${logInType}&email=${email}&password=${password || ''}`);
+    }
+    verifyOtp(email, otp) {
+        return this.http.get(this.BASE_URL + `investor/verifyOtp?email=${email}&otp=${otp}`);
+    }
     getFieldsToDisplay(fieldsList) {
         let map = {};
         for (let field of fieldsList) {
@@ -4156,7 +4188,6 @@ class StorageServiceService {
                         this.eventService.showLoadingScreen.emit(false);
                     }
                     ;
-                    console.log("Database created");
                 };
                 // UserCart.orderedItems = await response.target.result;
             };
@@ -4173,7 +4204,6 @@ class StorageServiceService {
         const request = await this.getUserCart();
         request.onsuccess = async (response) => {
             // UserCart.orderedItems = await response.target.result;
-            // console.log("Car", UserCart);
             const favRequest = await this.getUserWhishlist();
             favRequest.onsuccess = async (favResponse) => {
                 this.eventService.showLoadingScreen.emit(false);
@@ -4205,7 +4235,6 @@ class StorageServiceService {
                 this.restService.getUserItems(userDetails.userId, "WISHLIST")
             ]);
             request.subscribe((cartResponse) => {
-                console.log("Cart Response : ", cartResponse);
                 const userDetails = this.getUser();
                 const userCart = cartResponse?.[0].data[0] ? cartResponse?.[0].data[0] : new Cart({ 'cartType': cartType.CART, 'userDetails': userDetails, 'platform': 'WEB' });
                 if (userCart?.cartId)
@@ -4261,7 +4290,6 @@ class StorageServiceService {
         const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
         const response = transaction.objectStore(this.cartCollectionName).get(product.varientId);
         response.onsuccess = (cartResponse) => {
-            console.log("Cart Resppnse : ", cartResponse);
             if (cartResponse.target.result) { }
             else {
                 this.totalCartItems += 1;
@@ -4272,7 +4300,6 @@ class StorageServiceService {
     addAllProductToWishlist(products) {
         const transaction = this.database.transaction(this.favouriteCollectionName, "readwrite");
         products.forEach((product) => {
-            console.log(product + "wishlist");
             const response = transaction.objectStore(this.favouriteCollectionName).put(product);
         });
         return transaction;
@@ -4280,7 +4307,6 @@ class StorageServiceService {
     addAllProductsToCart(products) {
         const transaction = this.database.transaction(this.cartCollectionName, "readwrite");
         products.forEach((product) => {
-            console.log(product + "info");
             const response = transaction.objectStore(this.cartCollectionName).put(product);
         });
         return transaction;
@@ -4454,7 +4480,7 @@ class AuthenticationRequiredComponent {
             { type: "atleast one number", active: false },
         ];
         this.signUpEnabled = true;
-        this.loginType = "OTP";
+        this.loginType = "PASSWORD";
     }
     ngOnInit() {
         let enabled = localStorage.getItem('signUpEnabled');
@@ -4648,7 +4674,6 @@ class AuthenticationRequiredComponent {
         this.passwordStrengthCount += (/[a-z]/.test(this.password)) ? 1 : 0;
         this.passwordStrengthCount += (/\d/.test(this.password)) ? 1 : 0;
         this.passwordStrengthCount += (this.password.length > 8 ? 1 : 0);
-        console.log(/^[A-Z]+$/.test(this.password), /^[a-z]+$/.test(this.password), /\d/.test(this.password));
     }
     getStrengthColor(index) {
         switch (this.passwordStrengthCount) {
@@ -4675,7 +4700,7 @@ class AuthenticationRequiredComponent {
         return window.innerWidth <= 475;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticationRequiredComponent, deps: [{ token: RestService }, { token: i2$2.Router }, { token: i5$2.MessageService }, { token: StorageServiceService }, { token: i5.MatDialog }, { token: i5.MatDialogRef, optional: true }, { token: i8$1.MatBottomSheetRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", providers: [MessageService], ngImport: i0, template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<div class=\"close-icon\" (click)=\"close()\">\r\n    <mat-icon>close</mat-icon>\r\n</div>\r\n<section>\r\n    <div class=\"main\">\r\n        <input type=\"checkbox\" id=\"chk\" aria-hidden=\"true\">\r\n\r\n            <div class=\"signup\">\r\n                <form>\r\n                    <label for=\"chk\" aria-hidden=\"true\">Login</label>\r\n                    <div class=\"d-flex justify-content-center\" style=\"gap: 5px;\">\r\n                        <div class=\"login-type\" [ngClass]=\"{'login-type__active': loginType == 'OTP'}\" (click)=\"loginType = 'OTP'\">OTP Login</div>\r\n                        <div class=\"login-type\" [ngClass]=\"{'login-type__active': loginType == 'PASSWORD'}\" (click)=\"loginType = 'PASSWORD'\">Password Login</div>\r\n                    </div>\r\n                    <ng-container *ngIf=\"loginType == 'PASSWORD'\">\r\n                        <input type=\"email\" name=\"email\" class=\"input-text\" placeholder=\"Email\" required=\"\" [(ngModel)]=\"email\">\r\n                        <div class=\"position-relative\">\r\n                            <input [type]=\"passwordHidden ? 'password' : 'text'\" class=\"input-text\" name=\"password\" placeholder=\"Enter Password\" required=\"\" [(ngModel)]=\"password\">\r\n                            <mat-icon class=\"password-visiblity\" (click)=\"passwordHidden = !passwordHidden\">{{passwordHidden ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"loginType == 'OTP'\">\r\n                      <div class=\"otp-input-field\">\r\n                        <input type=\"mobile\" name=\"mobile\" placeholder=\"Mobile\" required=\"\" (keypress)=\"validateNumber($event)\" [(ngModel)]=\"mobile\">\r\n                        <button (click)=\"enterMobile()\" *ngIf=\"!buttonLoading\"><mat-icon>arrow_forward</mat-icon></button>\r\n                        <button *ngIf=\"buttonLoading\"><mat-spinner></mat-spinner>\r\n                        </button>\r\n                      </div>\r\n                      <input type=\"otp\" name=\"otp\" placeholder=\"Enter received otp\" class=\"input-text\" required=\"\" [(ngModel)]=\"otp\">\r\n                    </ng-container>\r\n                    <button class=\"button\" (click)=\"login()\" *ngIf=\"!buttonLoading\" [disabled]=\"(loginType == 'PASSWORD' ? !isEmailValid : false)\">Login</button>\r\n                    <button class=\"button\" *ngIf=\"buttonLoading\">Loading...</button>\r\n                </form>\r\n            </div>\r\n\r\n            <div class=\"login\" *ngIf=\"signUpEnabled\">\r\n                <form>\r\n                    <label for=\"chk\" aria-hidden=\"true\">Sign up</label>\r\n                    <input type=\"email\" name=\"email\" placeholder=\"Email\" class=\"input-text\" required=\"\" [(ngModel)]=\"email\">\r\n                    <div class=\"otp-input-field\">\r\n                      <input type=\"mobile\" name=\"mobile\" placeholder=\"Mobile\" class=\"input-text\" required=\"\" (keypress)=\"validateNumber($event)\" [(ngModel)]=\"mobile\">\r\n                      <button (click)=\"sendSignupOTP()\" *ngIf=\"!buttonLoading\"><mat-icon>arrow_forward</mat-icon></button>\r\n                      <button *ngIf=\"buttonLoading\"><mat-spinner></mat-spinner>\r\n                      </button>\r\n                    </div>\r\n\r\n                    <div class=\"position-relative\">\r\n                        <input type=\"otp\" name=\"otp\" placeholder=\"OTP\" class=\"input-text\" required=\"\" [(ngModel)]=\"otp\" (keypress)=\"validateOTP($event)\">\r\n                        <!-- <mat-icon style=\"color: lightgreen;\" class=\"otp-checked\" title=\"OTP Verified\" *ngIf=\"isOTPVerified\">check_circle</mat-icon>\r\n                        <mat-icon style=\"color: tomato;\" class=\"otp-checked\" title=\"OTP not Verified\" *ngIf=\"!isOTPVerified\">cancel</mat-icon> -->\r\n                    </div>\r\n                    <div class=\"position-relative\">\r\n                        <input [type]=\"passwordHidden ? 'password' : 'text'\" class=\"input-text\" name=\"password\" placeholder=\"Create Password\" required=\"\" [(ngModel)]=\"password\" (ngModelChange)=\"checkStrength()\">\r\n                        <mat-icon class=\"password-visiblity\" (click)=\"passwordHidden = !passwordHidden\">{{passwordHidden ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        <div class=\"strength-bar-container\">\r\n                            <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\" [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <button class=\"button\" (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || (otp.length != 6)\">Sign up</button>\r\n                </form>\r\n\r\n            </div>\r\n    </div>\r\n</section>\r\n", styles: ["section{margin:0;padding:0;display:flex;justify-content:center;align-items:center;height:100%;font-family:Jost,sans-serif;background:linear-gradient(to bottom,#0f0c29,#302b63,#24243e)}.close-icon{position:absolute;top:10px;right:10px;background-color:#fff;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;cursor:pointer}.close-icon .mat-icon{position:absolute;top:5px;right:1px;font-size:20px}.login-type{background-color:#fff;border:#573b8a;color:#573b8a;width:130px!important;font-size:14px!important;padding:5px;border-radius:5px;display:flex;justify-content:center;cursor:pointer}.login-type__active{width:150px!important;font-size:14px!important;font-weight:500!important;padding:5px;border-radius:5px;display:flex;justify-content:center;cursor:pointer;font-weight:800!important;border:1px solid #573b8a}.main{width:350px;height:500px;background:red;overflow:hidden;background:url(https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38) no-repeat center/ cover;border-radius:10px;box-shadow:5px 20px 50px #000}.otp-checked{position:absolute;top:7px;right:43px;font-size:20px;cursor:default!important}.password-visiblity{position:absolute;top:7px;right:43px;font-size:20px}.strength-bar-container{display:flex;justify-content:space-between;width:80%!important;margin:auto;position:relative;top:-10px}.strength-bar{height:8px;width:23.5%;border-radius:6px;background-color:#d3d3d3ba}.mat-icon{cursor:pointer}#chk{display:none}.signup{position:relative;width:100%;height:100%}label{color:#fff;font-size:2.3em;justify-content:center;display:flex;margin:50px 50px 20px;font-weight:700;cursor:pointer;transition:.5s ease-in-out}.input-text{width:80%;height:10px;background:#e0dede;justify-content:center;display:flex;margin:20px auto;padding:18px;border:none;outline:none;border-radius:5px}.button{width:80%;height:40px;margin:10px auto;justify-content:center;display:block;color:#fff;background:#573b8a;font-size:1em;font-weight:700;outline:none;border:none;border-radius:5px;transition:.2s ease-in;cursor:pointer}button:hover{background:#6d44b8}.login{height:460px;background:#eee;border-radius:60%/10%;transform:translateY(-180px);transition:.8s ease-in-out}.login label{color:#573b8a;transform:scale(.6)}#chk:checked~.login{transform:translateY(-500px)}#chk:checked~.login label{transform:scale(1)}#chk:checked~.signup label{transform:scale(.6)}.otp-input-field{justify-content:center;width:80%;align-items:center;height:38px;background:#e0dede;display:flex;margin:20px auto;border:none;outline:none;border-radius:5px}.otp-input-field input{width:80%;background:inherit;height:inherit;border-radius:5px;border:none;padding-left:20px;outline:none}.otp-input-field button{border:none;background:transparent;color:#6d44b8;width:20%!important;display:flex;align-items:center;justify-content:end}.mat-mdc-progress-spinner{height:20px!important}@media screen and (min-width: 401px){.button{width:80%!important}}@media screen and (max-width: 400px){.otp-input-field{width:90%}.input-text,button{width:90%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i17.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", providers: [MessageService], ngImport: i0, template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<div class=\"close-icon\" (click)=\"close()\">\r\n    <mat-icon>close</mat-icon>\r\n</div>\r\n<section>\r\n    <div class=\"main\">\r\n        <input type=\"checkbox\" id=\"chk\" aria-hidden=\"true\">\r\n\r\n            <div class=\"signup\">\r\n                <form>\r\n                    <label for=\"chk\" aria-hidden=\"true\">Login</label>\r\n                    <!-- <div class=\"d-flex justify-content-center\" style=\"gap: 5px;\">\r\n                        <div class=\"login-type\" [ngClass]=\"{'login-type__active': loginType == 'OTP'}\" (click)=\"loginType = 'OTP'\">OTP Login</div>\r\n                        <div class=\"login-type\" [ngClass]=\"{'login-type__active': loginType == 'PASSWORD'}\" (click)=\"loginType = 'PASSWORD'\">Password Login</div>\r\n                    </div> -->\r\n                    <ng-container *ngIf=\"loginType == 'PASSWORD'\">\r\n                        <input type=\"email\" name=\"email\" class=\"input-text\" placeholder=\"Email\" required=\"\" [(ngModel)]=\"email\">\r\n                        <div class=\"position-relative\">\r\n                            <input [type]=\"passwordHidden ? 'password' : 'text'\" class=\"input-text\" name=\"password\" placeholder=\"Enter Password\" required=\"\" [(ngModel)]=\"password\">\r\n                            <mat-icon class=\"password-visiblity\" (click)=\"passwordHidden = !passwordHidden\">{{passwordHidden ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"loginType == 'OTP'\">\r\n                      <div class=\"otp-input-field\">\r\n                        <input type=\"mobile\" name=\"mobile\" placeholder=\"Mobile\" required=\"\" (keypress)=\"validateNumber($event)\" [(ngModel)]=\"mobile\">\r\n                        <button (click)=\"enterMobile()\" *ngIf=\"!buttonLoading\"><mat-icon>arrow_forward</mat-icon></button>\r\n                        <button *ngIf=\"buttonLoading\"><mat-spinner></mat-spinner>\r\n                        </button>\r\n                      </div>\r\n                      <input type=\"otp\" name=\"otp\" placeholder=\"Enter received otp\" class=\"input-text\" required=\"\" [(ngModel)]=\"otp\">\r\n                    </ng-container>\r\n                    <button class=\"button\" (click)=\"login()\" *ngIf=\"!buttonLoading\" [disabled]=\"(loginType == 'PASSWORD' ? !isEmailValid : false)\">Login</button>\r\n                    <button class=\"button\" *ngIf=\"buttonLoading\">Loading...</button>\r\n                </form>\r\n            </div>\r\n\r\n            <div class=\"login\" *ngIf=\"signUpEnabled\">\r\n                <form>\r\n                    <label for=\"chk\" aria-hidden=\"true\">Sign up</label>\r\n                    <input type=\"email\" name=\"email\" placeholder=\"Email\" class=\"input-text\" required=\"\" [(ngModel)]=\"email\">\r\n                    <div class=\"otp-input-field\">\r\n                      <input type=\"mobile\" name=\"mobile\" placeholder=\"Mobile\" class=\"input-text\" required=\"\" (keypress)=\"validateNumber($event)\" [(ngModel)]=\"mobile\">\r\n                      <!-- <button (click)=\"sendSignupOTP()\" *ngIf=\"!buttonLoading\"><mat-icon>arrow_forward</mat-icon></button> -->\r\n                      <button *ngIf=\"buttonLoading\"><mat-spinner></mat-spinner>\r\n                      </button>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"position-relative\">\r\n                        <input type=\"otp\" name=\"otp\" placeholder=\"OTP\" class=\"input-text\" required=\"\" [(ngModel)]=\"otp\" (keypress)=\"validateOTP($event)\">\r\n                        <mat-icon style=\"color: lightgreen;\" class=\"otp-checked\" title=\"OTP Verified\" *ngIf=\"isOTPVerified\">check_circle</mat-icon>\r\n                        <mat-icon style=\"color: tomato;\" class=\"otp-checked\" title=\"OTP not Verified\" *ngIf=\"!isOTPVerified\">cancel</mat-icon>\r\n                    </div> -->\r\n                    <div class=\"position-relative\">\r\n                        <input [type]=\"passwordHidden ? 'password' : 'text'\" class=\"input-text\" name=\"password\" placeholder=\"Create Password\" required=\"\" [(ngModel)]=\"password\" (ngModelChange)=\"checkStrength()\">\r\n                        <mat-icon class=\"password-visiblity\" (click)=\"passwordHidden = !passwordHidden\">{{passwordHidden ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        <div class=\"strength-bar-container\">\r\n                            <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\" [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <button class=\"button\" (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid\">Sign up</button>\r\n                </form>\r\n\r\n            </div>\r\n    </div>\r\n</section>\r\n", styles: ["section{margin:0;padding:0;display:flex;justify-content:center;align-items:center;height:100%;font-family:Jost,sans-serif;background:linear-gradient(to bottom,#0f0c29,#302b63,#24243e)}.close-icon{position:absolute;top:10px;right:10px;background-color:#fff;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;cursor:pointer}.close-icon .mat-icon{position:absolute;top:5px;right:1px;font-size:20px}.login-type{background-color:#fff;border:#573b8a;color:#573b8a;width:130px!important;font-size:14px!important;padding:5px;border-radius:5px;display:flex;justify-content:center;cursor:pointer}.login-type__active{width:150px!important;font-size:14px!important;font-weight:500!important;padding:5px;border-radius:5px;display:flex;justify-content:center;cursor:pointer;font-weight:800!important;border:1px solid #573b8a}.main{width:350px;height:500px;background:red;overflow:hidden;background:url(https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38) no-repeat center/ cover;border-radius:10px;box-shadow:5px 20px 50px #000}.otp-checked{position:absolute;top:7px;right:43px;font-size:20px;cursor:default!important}.password-visiblity{position:absolute;top:7px;right:43px;font-size:20px}.strength-bar-container{display:flex;justify-content:space-between;width:80%!important;margin:auto;position:relative;top:-10px}.strength-bar{height:8px;width:23.5%;border-radius:6px;background-color:#d3d3d3ba}.mat-icon{cursor:pointer}#chk{display:none}.signup{position:relative;width:100%;height:100%}label{color:#fff;font-size:2.3em;justify-content:center;display:flex;margin:50px 50px 20px;font-weight:700;cursor:pointer;transition:.5s ease-in-out}.input-text{width:80%;height:10px;background:#e0dede;justify-content:center;display:flex;margin:20px auto;padding:18px;border:none;outline:none;border-radius:5px}.button{width:80%;height:40px;margin:10px auto;justify-content:center;display:block;color:#fff;background:#573b8a;font-size:1em;font-weight:700;outline:none;border:none;border-radius:5px;transition:.2s ease-in;cursor:pointer}button:hover{background:#6d44b8}.login{height:460px;background:#eee;border-radius:60%/10%;transform:translateY(-180px);transition:.8s ease-in-out}.login label{color:#573b8a;transform:scale(.6)}#chk:checked~.login{transform:translateY(-500px)}#chk:checked~.login label{transform:scale(1)}#chk:checked~.signup label{transform:scale(.6)}.otp-input-field{justify-content:center;width:80%;align-items:center;height:38px;background:#e0dede;display:flex;margin:20px auto;border:none;outline:none;border-radius:5px}.otp-input-field input{width:80%;background:inherit;height:inherit;border-radius:5px;border:none;padding-left:20px;outline:none}.otp-input-field button{border:none;background:transparent;color:#6d44b8;width:20%!important;display:flex;align-items:center;justify-content:end}.mat-mdc-progress-spinner{height:20px!important}@media screen and (min-width: 401px){.button{width:80%!important}}@media screen and (max-width: 400px){.otp-input-field{width:90%}.input-text,button{width:90%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i17.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticationRequiredComponent, decorators: [{
             type: Component,
@@ -4685,7 +4710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         ToastModule,
                         MatIconModule,
                         MatProgressSpinnerModule
-                    ], providers: [MessageService], template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<div class=\"close-icon\" (click)=\"close()\">\r\n    <mat-icon>close</mat-icon>\r\n</div>\r\n<section>\r\n    <div class=\"main\">\r\n        <input type=\"checkbox\" id=\"chk\" aria-hidden=\"true\">\r\n\r\n            <div class=\"signup\">\r\n                <form>\r\n                    <label for=\"chk\" aria-hidden=\"true\">Login</label>\r\n                    <div class=\"d-flex justify-content-center\" style=\"gap: 5px;\">\r\n                        <div class=\"login-type\" [ngClass]=\"{'login-type__active': loginType == 'OTP'}\" (click)=\"loginType = 'OTP'\">OTP Login</div>\r\n                        <div class=\"login-type\" [ngClass]=\"{'login-type__active': loginType == 'PASSWORD'}\" (click)=\"loginType = 'PASSWORD'\">Password Login</div>\r\n                    </div>\r\n                    <ng-container *ngIf=\"loginType == 'PASSWORD'\">\r\n                        <input type=\"email\" name=\"email\" class=\"input-text\" placeholder=\"Email\" required=\"\" [(ngModel)]=\"email\">\r\n                        <div class=\"position-relative\">\r\n                            <input [type]=\"passwordHidden ? 'password' : 'text'\" class=\"input-text\" name=\"password\" placeholder=\"Enter Password\" required=\"\" [(ngModel)]=\"password\">\r\n                            <mat-icon class=\"password-visiblity\" (click)=\"passwordHidden = !passwordHidden\">{{passwordHidden ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"loginType == 'OTP'\">\r\n                      <div class=\"otp-input-field\">\r\n                        <input type=\"mobile\" name=\"mobile\" placeholder=\"Mobile\" required=\"\" (keypress)=\"validateNumber($event)\" [(ngModel)]=\"mobile\">\r\n                        <button (click)=\"enterMobile()\" *ngIf=\"!buttonLoading\"><mat-icon>arrow_forward</mat-icon></button>\r\n                        <button *ngIf=\"buttonLoading\"><mat-spinner></mat-spinner>\r\n                        </button>\r\n                      </div>\r\n                      <input type=\"otp\" name=\"otp\" placeholder=\"Enter received otp\" class=\"input-text\" required=\"\" [(ngModel)]=\"otp\">\r\n                    </ng-container>\r\n                    <button class=\"button\" (click)=\"login()\" *ngIf=\"!buttonLoading\" [disabled]=\"(loginType == 'PASSWORD' ? !isEmailValid : false)\">Login</button>\r\n                    <button class=\"button\" *ngIf=\"buttonLoading\">Loading...</button>\r\n                </form>\r\n            </div>\r\n\r\n            <div class=\"login\" *ngIf=\"signUpEnabled\">\r\n                <form>\r\n                    <label for=\"chk\" aria-hidden=\"true\">Sign up</label>\r\n                    <input type=\"email\" name=\"email\" placeholder=\"Email\" class=\"input-text\" required=\"\" [(ngModel)]=\"email\">\r\n                    <div class=\"otp-input-field\">\r\n                      <input type=\"mobile\" name=\"mobile\" placeholder=\"Mobile\" class=\"input-text\" required=\"\" (keypress)=\"validateNumber($event)\" [(ngModel)]=\"mobile\">\r\n                      <button (click)=\"sendSignupOTP()\" *ngIf=\"!buttonLoading\"><mat-icon>arrow_forward</mat-icon></button>\r\n                      <button *ngIf=\"buttonLoading\"><mat-spinner></mat-spinner>\r\n                      </button>\r\n                    </div>\r\n\r\n                    <div class=\"position-relative\">\r\n                        <input type=\"otp\" name=\"otp\" placeholder=\"OTP\" class=\"input-text\" required=\"\" [(ngModel)]=\"otp\" (keypress)=\"validateOTP($event)\">\r\n                        <!-- <mat-icon style=\"color: lightgreen;\" class=\"otp-checked\" title=\"OTP Verified\" *ngIf=\"isOTPVerified\">check_circle</mat-icon>\r\n                        <mat-icon style=\"color: tomato;\" class=\"otp-checked\" title=\"OTP not Verified\" *ngIf=\"!isOTPVerified\">cancel</mat-icon> -->\r\n                    </div>\r\n                    <div class=\"position-relative\">\r\n                        <input [type]=\"passwordHidden ? 'password' : 'text'\" class=\"input-text\" name=\"password\" placeholder=\"Create Password\" required=\"\" [(ngModel)]=\"password\" (ngModelChange)=\"checkStrength()\">\r\n                        <mat-icon class=\"password-visiblity\" (click)=\"passwordHidden = !passwordHidden\">{{passwordHidden ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        <div class=\"strength-bar-container\">\r\n                            <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\" [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <button class=\"button\" (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid || (otp.length != 6)\">Sign up</button>\r\n                </form>\r\n\r\n            </div>\r\n    </div>\r\n</section>\r\n", styles: ["section{margin:0;padding:0;display:flex;justify-content:center;align-items:center;height:100%;font-family:Jost,sans-serif;background:linear-gradient(to bottom,#0f0c29,#302b63,#24243e)}.close-icon{position:absolute;top:10px;right:10px;background-color:#fff;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;cursor:pointer}.close-icon .mat-icon{position:absolute;top:5px;right:1px;font-size:20px}.login-type{background-color:#fff;border:#573b8a;color:#573b8a;width:130px!important;font-size:14px!important;padding:5px;border-radius:5px;display:flex;justify-content:center;cursor:pointer}.login-type__active{width:150px!important;font-size:14px!important;font-weight:500!important;padding:5px;border-radius:5px;display:flex;justify-content:center;cursor:pointer;font-weight:800!important;border:1px solid #573b8a}.main{width:350px;height:500px;background:red;overflow:hidden;background:url(https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38) no-repeat center/ cover;border-radius:10px;box-shadow:5px 20px 50px #000}.otp-checked{position:absolute;top:7px;right:43px;font-size:20px;cursor:default!important}.password-visiblity{position:absolute;top:7px;right:43px;font-size:20px}.strength-bar-container{display:flex;justify-content:space-between;width:80%!important;margin:auto;position:relative;top:-10px}.strength-bar{height:8px;width:23.5%;border-radius:6px;background-color:#d3d3d3ba}.mat-icon{cursor:pointer}#chk{display:none}.signup{position:relative;width:100%;height:100%}label{color:#fff;font-size:2.3em;justify-content:center;display:flex;margin:50px 50px 20px;font-weight:700;cursor:pointer;transition:.5s ease-in-out}.input-text{width:80%;height:10px;background:#e0dede;justify-content:center;display:flex;margin:20px auto;padding:18px;border:none;outline:none;border-radius:5px}.button{width:80%;height:40px;margin:10px auto;justify-content:center;display:block;color:#fff;background:#573b8a;font-size:1em;font-weight:700;outline:none;border:none;border-radius:5px;transition:.2s ease-in;cursor:pointer}button:hover{background:#6d44b8}.login{height:460px;background:#eee;border-radius:60%/10%;transform:translateY(-180px);transition:.8s ease-in-out}.login label{color:#573b8a;transform:scale(.6)}#chk:checked~.login{transform:translateY(-500px)}#chk:checked~.login label{transform:scale(1)}#chk:checked~.signup label{transform:scale(.6)}.otp-input-field{justify-content:center;width:80%;align-items:center;height:38px;background:#e0dede;display:flex;margin:20px auto;border:none;outline:none;border-radius:5px}.otp-input-field input{width:80%;background:inherit;height:inherit;border-radius:5px;border:none;padding-left:20px;outline:none}.otp-input-field button{border:none;background:transparent;color:#6d44b8;width:20%!important;display:flex;align-items:center;justify-content:end}.mat-mdc-progress-spinner{height:20px!important}@media screen and (min-width: 401px){.button{width:80%!important}}@media screen and (max-width: 400px){.otp-input-field{width:90%}.input-text,button{width:90%!important}}\n"] }]
+                    ], providers: [MessageService], template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<div class=\"close-icon\" (click)=\"close()\">\r\n    <mat-icon>close</mat-icon>\r\n</div>\r\n<section>\r\n    <div class=\"main\">\r\n        <input type=\"checkbox\" id=\"chk\" aria-hidden=\"true\">\r\n\r\n            <div class=\"signup\">\r\n                <form>\r\n                    <label for=\"chk\" aria-hidden=\"true\">Login</label>\r\n                    <!-- <div class=\"d-flex justify-content-center\" style=\"gap: 5px;\">\r\n                        <div class=\"login-type\" [ngClass]=\"{'login-type__active': loginType == 'OTP'}\" (click)=\"loginType = 'OTP'\">OTP Login</div>\r\n                        <div class=\"login-type\" [ngClass]=\"{'login-type__active': loginType == 'PASSWORD'}\" (click)=\"loginType = 'PASSWORD'\">Password Login</div>\r\n                    </div> -->\r\n                    <ng-container *ngIf=\"loginType == 'PASSWORD'\">\r\n                        <input type=\"email\" name=\"email\" class=\"input-text\" placeholder=\"Email\" required=\"\" [(ngModel)]=\"email\">\r\n                        <div class=\"position-relative\">\r\n                            <input [type]=\"passwordHidden ? 'password' : 'text'\" class=\"input-text\" name=\"password\" placeholder=\"Enter Password\" required=\"\" [(ngModel)]=\"password\">\r\n                            <mat-icon class=\"password-visiblity\" (click)=\"passwordHidden = !passwordHidden\">{{passwordHidden ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        </div>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"loginType == 'OTP'\">\r\n                      <div class=\"otp-input-field\">\r\n                        <input type=\"mobile\" name=\"mobile\" placeholder=\"Mobile\" required=\"\" (keypress)=\"validateNumber($event)\" [(ngModel)]=\"mobile\">\r\n                        <button (click)=\"enterMobile()\" *ngIf=\"!buttonLoading\"><mat-icon>arrow_forward</mat-icon></button>\r\n                        <button *ngIf=\"buttonLoading\"><mat-spinner></mat-spinner>\r\n                        </button>\r\n                      </div>\r\n                      <input type=\"otp\" name=\"otp\" placeholder=\"Enter received otp\" class=\"input-text\" required=\"\" [(ngModel)]=\"otp\">\r\n                    </ng-container>\r\n                    <button class=\"button\" (click)=\"login()\" *ngIf=\"!buttonLoading\" [disabled]=\"(loginType == 'PASSWORD' ? !isEmailValid : false)\">Login</button>\r\n                    <button class=\"button\" *ngIf=\"buttonLoading\">Loading...</button>\r\n                </form>\r\n            </div>\r\n\r\n            <div class=\"login\" *ngIf=\"signUpEnabled\">\r\n                <form>\r\n                    <label for=\"chk\" aria-hidden=\"true\">Sign up</label>\r\n                    <input type=\"email\" name=\"email\" placeholder=\"Email\" class=\"input-text\" required=\"\" [(ngModel)]=\"email\">\r\n                    <div class=\"otp-input-field\">\r\n                      <input type=\"mobile\" name=\"mobile\" placeholder=\"Mobile\" class=\"input-text\" required=\"\" (keypress)=\"validateNumber($event)\" [(ngModel)]=\"mobile\">\r\n                      <!-- <button (click)=\"sendSignupOTP()\" *ngIf=\"!buttonLoading\"><mat-icon>arrow_forward</mat-icon></button> -->\r\n                      <button *ngIf=\"buttonLoading\"><mat-spinner></mat-spinner>\r\n                      </button>\r\n                    </div>\r\n\r\n                    <!-- <div class=\"position-relative\">\r\n                        <input type=\"otp\" name=\"otp\" placeholder=\"OTP\" class=\"input-text\" required=\"\" [(ngModel)]=\"otp\" (keypress)=\"validateOTP($event)\">\r\n                        <mat-icon style=\"color: lightgreen;\" class=\"otp-checked\" title=\"OTP Verified\" *ngIf=\"isOTPVerified\">check_circle</mat-icon>\r\n                        <mat-icon style=\"color: tomato;\" class=\"otp-checked\" title=\"OTP not Verified\" *ngIf=\"!isOTPVerified\">cancel</mat-icon>\r\n                    </div> -->\r\n                    <div class=\"position-relative\">\r\n                        <input [type]=\"passwordHidden ? 'password' : 'text'\" class=\"input-text\" name=\"password\" placeholder=\"Create Password\" required=\"\" [(ngModel)]=\"password\" (ngModelChange)=\"checkStrength()\">\r\n                        <mat-icon class=\"password-visiblity\" (click)=\"passwordHidden = !passwordHidden\">{{passwordHidden ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n                        <div class=\"strength-bar-container\">\r\n                            <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\" [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n                        </div>\r\n                    </div>\r\n                    <button class=\"button\" (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid\">Sign up</button>\r\n                </form>\r\n\r\n            </div>\r\n    </div>\r\n</section>\r\n", styles: ["section{margin:0;padding:0;display:flex;justify-content:center;align-items:center;height:100%;font-family:Jost,sans-serif;background:linear-gradient(to bottom,#0f0c29,#302b63,#24243e)}.close-icon{position:absolute;top:10px;right:10px;background-color:#fff;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;cursor:pointer}.close-icon .mat-icon{position:absolute;top:5px;right:1px;font-size:20px}.login-type{background-color:#fff;border:#573b8a;color:#573b8a;width:130px!important;font-size:14px!important;padding:5px;border-radius:5px;display:flex;justify-content:center;cursor:pointer}.login-type__active{width:150px!important;font-size:14px!important;font-weight:500!important;padding:5px;border-radius:5px;display:flex;justify-content:center;cursor:pointer;font-weight:800!important;border:1px solid #573b8a}.main{width:350px;height:500px;background:red;overflow:hidden;background:url(https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38) no-repeat center/ cover;border-radius:10px;box-shadow:5px 20px 50px #000}.otp-checked{position:absolute;top:7px;right:43px;font-size:20px;cursor:default!important}.password-visiblity{position:absolute;top:7px;right:43px;font-size:20px}.strength-bar-container{display:flex;justify-content:space-between;width:80%!important;margin:auto;position:relative;top:-10px}.strength-bar{height:8px;width:23.5%;border-radius:6px;background-color:#d3d3d3ba}.mat-icon{cursor:pointer}#chk{display:none}.signup{position:relative;width:100%;height:100%}label{color:#fff;font-size:2.3em;justify-content:center;display:flex;margin:50px 50px 20px;font-weight:700;cursor:pointer;transition:.5s ease-in-out}.input-text{width:80%;height:10px;background:#e0dede;justify-content:center;display:flex;margin:20px auto;padding:18px;border:none;outline:none;border-radius:5px}.button{width:80%;height:40px;margin:10px auto;justify-content:center;display:block;color:#fff;background:#573b8a;font-size:1em;font-weight:700;outline:none;border:none;border-radius:5px;transition:.2s ease-in;cursor:pointer}button:hover{background:#6d44b8}.login{height:460px;background:#eee;border-radius:60%/10%;transform:translateY(-180px);transition:.8s ease-in-out}.login label{color:#573b8a;transform:scale(.6)}#chk:checked~.login{transform:translateY(-500px)}#chk:checked~.login label{transform:scale(1)}#chk:checked~.signup label{transform:scale(.6)}.otp-input-field{justify-content:center;width:80%;align-items:center;height:38px;background:#e0dede;display:flex;margin:20px auto;border:none;outline:none;border-radius:5px}.otp-input-field input{width:80%;background:inherit;height:inherit;border-radius:5px;border:none;padding-left:20px;outline:none}.otp-input-field button{border:none;background:transparent;color:#6d44b8;width:20%!important;display:flex;align-items:center;justify-content:end}.mat-mdc-progress-spinner{height:20px!important}@media screen and (min-width: 401px){.button{width:80%!important}}@media screen and (max-width: 400px){.otp-input-field{width:90%}.input-text,button{width:90%!important}}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: i5$2.MessageService }, { type: StorageServiceService }, { type: i5.MatDialog }, { type: i5.MatDialogRef, decorators: [{
                     type: Optional
                 }] }, { type: i8$1.MatBottomSheetRef, decorators: [{
@@ -4822,7 +4847,6 @@ class AddressComponent extends BaseSection {
         // this.updateAddressFields();
     }
     onAutocompleteSelected(result) {
-        console.log(result);
         // this.selectedCountry = null;
         // this.zip = "";
         // this.state = "";
@@ -5204,13 +5228,6 @@ class CartComponent extends BaseSection {
             }
         });
         this.getIndexDBData();
-        // if (this.storageService.getUser()) {
-        //   this.updateUserCart();
-        // } else {
-        //   this.getIndexDBData();
-        //   console.log(this.responseData);
-        // }
-        console.log(this.responseData);
         this.styles = this.data?.styles;
     }
     ngOnDestroy() {
@@ -5259,7 +5276,6 @@ class CartComponent extends BaseSection {
                                 this.cartInfo.totalAmount = this.cartInfo.billdetails.totalNetValue + this.getTaxAmount() + this.cartInfo.billdetails.deliveryCharges;
                                 // this.storageService.addAllProductsToCart(this.cartInfo.orderedItems)
                                 this.responseData = this.cartInfo;
-                                console.log(this.responseData);
                             });
                         };
                         cartResponse.onerror = (cartData) => {
@@ -5284,7 +5300,6 @@ class CartComponent extends BaseSection {
                         });
                         this.cartInfo.billdetails.deliveryCharges = (deliveryOption?.minOrderAmount > this.cartInfo.billdetails.totalGrossValue) ? 0 : (deliveryOption?.deliveryCharges ?? 0);
                         this.cartInfo.billdetails.totalNetValue = this.cartInfo.billdetails.totalGrossValue - this.cartInfo.billdetails.deliveryCharges;
-                        console.log(this.cartInfo.billdetails.totalNetValue, this.cartInfo.billdetails.totalTax, this.cartInfo.billdetails.deliveryCharges);
                         this.cartInfo.totalAmount = this.cartInfo.billdetails.totalNetValue + this.getTaxAmount();
                         +this.cartInfo.billdetails.deliveryCharges;
                         this.cartInfo.orderedItems = this.USER_CART_ITEMS;
@@ -5362,7 +5377,6 @@ class CartComponent extends BaseSection {
     }
     getIndexDBData() {
         this.storageService.getUserCart().then((cartResponse) => {
-            console.log(cartResponse);
             const deliveryOption = JSON.parse(localStorage.getItem("deliveryOptions") ?? "{}");
             this.cartInfo.billdetails.totalGrossValue = 0;
             this.cartInfo.billdetails.totalTax = 0;
@@ -5378,7 +5392,6 @@ class CartComponent extends BaseSection {
                 this.cartInfo.billdetails.totalTaxAfterDiscount = cartData.billdetails?.totalTaxAfterDiscount ?? 0;
                 this.cartInfo.billdetails.deliveryCharges = (deliveryOption?.minOrderAmount > this.cartInfo.billdetails.totalGrossValue) ? 0 : (deliveryOption?.deliveryCharges ?? 0);
                 this.cartInfo.billdetails.totalNetValue = this.cartInfo.billdetails.totalGrossValue;
-                console.log(this.cartInfo.billdetails.totalNetValue, this.cartInfo.billdetails.totalTax, this.cartInfo.billdetails.deliveryCharges);
                 this.cartInfo.totalAmount = this.cartInfo.billdetails.totalNetValue + this.getTaxAmount() + this.cartInfo.billdetails.deliveryCharges;
                 this.cartInfo.orderedItems = this.USER_CART_ITEMS;
                 if (this.storageService.getUser())
@@ -5407,7 +5420,6 @@ class CartComponent extends BaseSection {
                 };
                 if (!(localStorage.getItem("cartId") == "undefined" || localStorage.getItem("cartId") == "null"))
                     this.cartInfo["cartId"] = localStorage.getItem("cartId");
-                console.log("Response : ", response);
                 if (response && response === 'success') {
                     this.getIndexDBData();
                     // this.proceedToCheckout();
@@ -5424,7 +5436,6 @@ class CartComponent extends BaseSection {
             //         }
             //         if (!(localStorage.getItem("cartId") == "undefined" || localStorage.getItem("cartId") == "null"))
             //           this.cartInfo["cartId"] = localStorage.getItem("cartId");
-            //         console.log("Response : ", response);
             //         if (response)
             //           this.proceedToCheckout();
             //       }
@@ -5445,7 +5456,6 @@ class CartComponent extends BaseSection {
             //       }
             //       if (!(localStorage.getItem("cartId") == "undefined" || localStorage.getItem("cartId") == "null"))
             //         this.cartInfo["cartId"] = localStorage.getItem("cartId");
-            //       console.log("Response : ", response);
             //       if (response)
             //         this.proceedToCheckout();
             //     })
@@ -5502,7 +5512,6 @@ class CartComponent extends BaseSection {
             });
             this.cartInfo.billdetails.deliveryCharges = (deliveryOption?.minOrderAmount > this.cartInfo.billdetails.totalGrossValue) ? 0 : (deliveryOption?.deliveryCharges ?? 0);
             this.cartInfo.billdetails.totalNetValue = this.cartInfo.billdetails.totalGrossValue;
-            console.log(this.cartInfo.billdetails.totalNetValue, this.cartInfo.billdetails.totalTax, this.cartInfo.billdetails.deliveryCharges);
             this.cartInfo.totalAmount = this.cartInfo.billdetails.totalNetValue + this.getTaxAmount() + this.cartInfo.billdetails.deliveryCharges;
             this.cartInfo.orderedItems = this.USER_CART_ITEMS;
         });
@@ -5530,7 +5539,6 @@ class CartComponent extends BaseSection {
                 });
                 this.cartInfo.billdetails.deliveryCharges = (deliveryOption?.minOrderAmount > this.cartInfo.billdetails.totalGrossValue) ? 0 : (deliveryOption?.deliveryCharges ?? 0);
                 this.cartInfo.billdetails.totalNetValue = this.cartInfo.billdetails.totalGrossValue;
-                console.log(this.cartInfo.billdetails.totalNetValue, this.cartInfo.billdetails.totalTax, this.cartInfo.billdetails.deliveryCharges);
                 this.cartInfo.totalAmount = this.cartInfo.billdetails.totalNetValue + this.getTaxAmount() + this.cartInfo.billdetails.deliveryCharges;
                 this.cartInfo.orderedItems = this.USER_CART_ITEMS;
             });
@@ -5698,12 +5706,10 @@ class CartComponent extends BaseSection {
             return;
         this.cartInfo.billdetails.couponCode = coupon.couponCode;
         this.cartInfo.billdetails.couponId = coupon.couponId;
-        console.log(this.cartInfo);
         const restResponse = this.restService.addItemToDB(this.cartInfo).toPromise();
         restResponse.then((response) => {
             localStorage.setItem("couponId", coupon.couponId);
             localStorage.setItem("couponCode", coupon.couponCode);
-            console.log("Response: ", response);
             this.calculateCart(response);
             this.messageService.add({ severity: 'success', summary: 'Coupon', detail: 'Coupon Applied' });
             this.cartInfo.billdetails.discountAmount = response?.data?.billdetails?.discountAmount ?? 0;
@@ -5875,6 +5881,9 @@ class NavbarSectionComponent {
     get isEcommerceWebsite() {
         return this.data?.type == "E_COMMERCE";
     }
+    get isRealEstateWebsite() {
+        return this.data?.type == "REAL_ESTATE";
+    }
     close() {
         // let a = document.getElementById("navbarNavAltMarkup");
         // if(!a) return;
@@ -5945,6 +5954,9 @@ class NavbarSectionComponent {
     getKeys(object) {
         return Object.keys(object);
     }
+    get isLoggedIn() {
+        return localStorage.getItem('investorId') ? true : false;
+    }
     getValues(object) {
         const keys = [];
         object.forEach((key) => keys.push(Object.values(key)));
@@ -5968,7 +5980,7 @@ class NavbarSectionComponent {
         return page;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i5.MatDialog }, { token: i8$1.MatBottomSheet }, { token: i2$1.CookieService }, { token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\"  [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n     <ng-container  *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n           <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n        <div class=\"d-flex align-items-center gap-15\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <div class=\"d-flex flex-column align-item-center\">\r\n            <div class=\"d-flex justify-content-center\">\r\n              <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n        </div>\r\n      </ng-container>\r\n     </ng-container>\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <div class=\"d-flex\">\r\n            <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"canShowMobileFooter\">\r\n          <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n\r\n    </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\" left-logo-text d-flex\">\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element\r\n          [buttonData]=\"item\"\r\n          [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\"\r\n          [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n            id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n              <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\r\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n       [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n        <div style=\"position: relative; margin-right: 10px;\">\r\n          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav align-items-center\">\r\n    <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n      <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"\r\n            [bgColor]=\"simpoColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element\r\n          [buttonContent]=\"button.content\"\r\n          [buttonStyle]=\"button.styles\"\r\n          [sectionId]=\"data?.id\"\r\n          [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n    <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n    </div>\r\n    <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\r\n      <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n  <div class=\"inner-height \">\r\n    <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n      <div class=\"title-row\">\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n      </div>\r\n\r\n\r\n      <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n        <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n    </button>\r\n\r\n\r\n      <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n      <div class=\"d-flex flex-column gap-2\">\r\n\r\n        <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n          <ng-container *ngIf=\"item.showHeader\">\r\n            <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n        <div class=\"d-flex\" *ngIf=\"content?.socialLinks?.display\">\r\n          <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n            <div style=\"position: relative; margin-right: 10px;\">\r\n              <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n        <div *ngIf=\"action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of action?.buttons\">\r\n            <app-button-element\r\n              [buttonContent]=\"button.content\"\r\n              [buttonStyle]=\"button.styles\"\r\n              [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\"  [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n     <ng-container  *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite && !isRealEstateWebsite\">\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n           <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n        <div class=\"d-flex align-items-center gap-15\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <div class=\"d-flex flex-column align-item-center\">\r\n            <div class=\"d-flex justify-content-center\">\r\n              <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n        </div>\r\n      </ng-container>\r\n     </ng-container>\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <div class=\"d-flex\">\r\n            <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"canShowMobileFooter\">\r\n          <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"isRealEstateWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngIf=\"!isLoggedIn\">\r\n              <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"realEstateButtontemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container *ngIf=\"!isEcommerceWebsite && !isRealEstateWebsite\">\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n\r\n    </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\" left-logo-text d-flex\">\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element\r\n          [buttonData]=\"item\"\r\n          [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\"\r\n          [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n            id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n              <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\r\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n       [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n        <div style=\"position: relative; margin-right: 10px;\">\r\n          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav align-items-center\">\r\n    <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n      <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"\r\n            [bgColor]=\"simpoColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element\r\n          [buttonContent]=\"button.content\"\r\n          [buttonStyle]=\"button.styles\"\r\n          [sectionId]=\"data?.id\"\r\n          [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n    <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n    </div>\r\n    <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\r\n      <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #realEstateButtontemplate>\r\n  <div class=\"investorProfile\">\r\n    <p class=\"investorName\">Hv</p>\r\n    <mat-icon>keyboard_arrow_down</mat-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n  <div class=\"inner-height \">\r\n    <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n      <div class=\"title-row\">\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n      </div>\r\n\r\n\r\n      <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n        <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n    </button>\r\n\r\n\r\n      <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n      <div class=\"d-flex flex-column gap-2\">\r\n\r\n        <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n          <ng-container *ngIf=\"item.showHeader\">\r\n            <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n        <div class=\"d-flex\" *ngIf=\"content?.socialLinks?.display\">\r\n          <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n            <div style=\"position: relative; margin-right: 10px;\">\r\n              <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n        <div *ngIf=\"action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of action?.buttons\">\r\n            <app-button-element\r\n              [buttonContent]=\"button.content\"\r\n              [buttonStyle]=\"button.styles\"\r\n              [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.investorProfile{display:flex;align-items:center;margin-left:15px}.investorProfile p{color:#000;height:32px;background:#e6f0ff;width:32px;display:flex;align-items:center;justify-content:center;border-radius:100%;margin-bottom:0;font-weight:600}.investorProfile mat-icon{color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, decorators: [{
             type: Component,
@@ -6004,7 +6016,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatButtonModule,
                         MatMenuModule,
                         SpacingHorizontalDirective
-                    ], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\"  [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n     <ng-container  *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n           <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n        <div class=\"d-flex align-items-center gap-15\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <div class=\"d-flex flex-column align-item-center\">\r\n            <div class=\"d-flex justify-content-center\">\r\n              <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n        </div>\r\n      </ng-container>\r\n     </ng-container>\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <div class=\"d-flex\">\r\n            <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"canShowMobileFooter\">\r\n          <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n\r\n    </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\" left-logo-text d-flex\">\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element\r\n          [buttonData]=\"item\"\r\n          [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\"\r\n          [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n            id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n              <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\r\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n       [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n        <div style=\"position: relative; margin-right: 10px;\">\r\n          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav align-items-center\">\r\n    <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n      <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"\r\n            [bgColor]=\"simpoColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element\r\n          [buttonContent]=\"button.content\"\r\n          [buttonStyle]=\"button.styles\"\r\n          [sectionId]=\"data?.id\"\r\n          [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n    <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n    </div>\r\n    <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\r\n      <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n  <div class=\"inner-height \">\r\n    <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n      <div class=\"title-row\">\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n      </div>\r\n\r\n\r\n      <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n        <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n    </button>\r\n\r\n\r\n      <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n      <div class=\"d-flex flex-column gap-2\">\r\n\r\n        <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n          <ng-container *ngIf=\"item.showHeader\">\r\n            <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n        <div class=\"d-flex\" *ngIf=\"content?.socialLinks?.display\">\r\n          <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n            <div style=\"position: relative; margin-right: 10px;\">\r\n              <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n        <div *ngIf=\"action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of action?.buttons\">\r\n            <app-button-element\r\n              [buttonContent]=\"button.content\"\r\n              [buttonStyle]=\"button.styles\"\r\n              [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}\n"] }]
+                    ], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\"  [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n     <ng-container  *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite && !isRealEstateWebsite\">\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n           <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n        <div class=\"d-flex align-items-center gap-15\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n        </div>\r\n\r\n        <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <div class=\"d-flex flex-column align-item-center\">\r\n            <div class=\"d-flex justify-content-center\">\r\n              <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n        </div>\r\n      </ng-container>\r\n     </ng-container>\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <div class=\"d-flex\">\r\n            <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"canShowMobileFooter\">\r\n          <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"isRealEstateWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngIf=\"!isLoggedIn\">\r\n              <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n            </ng-container>\r\n            <ng-container *ngTemplateOutlet=\"realEstateButtontemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n\r\n      <ng-container *ngIf=\"!isEcommerceWebsite && !isRealEstateWebsite\">\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n\r\n    </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\" left-logo-text d-flex\">\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let item of getNavbarButton\">\r\n      <ng-container *ngIf=\"item.showHeader\">\r\n        <simpo-navbar-button-element\r\n          [buttonData]=\"item\"\r\n          [selectedStyle]=\"style?.navigationStyle\"\r\n          [buttonStyle]=\"style?.navbarButtonStyle\"\r\n          [bgColor]=\"simpoColor\"\r\n          [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n      <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n        <div class=\"position-relative\">\r\n          <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n            id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n            {{link | uppercase}}\r\n          </button>\r\n          <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n              <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\r\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n       [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n        <div style=\"position: relative; margin-right: 10px;\">\r\n          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav align-items-center\">\r\n    <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n      <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"\r\n            [bgColor]=\"simpoColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element\r\n          [buttonContent]=\"button.content\"\r\n          [buttonStyle]=\"button.styles\"\r\n          [sectionId]=\"data?.id\"\r\n          [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n    <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n    </div>\r\n    <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\r\n      <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #realEstateButtontemplate>\r\n  <div class=\"investorProfile\">\r\n    <p class=\"investorName\">Hv</p>\r\n    <mat-icon>keyboard_arrow_down</mat-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n  <div class=\"inner-height \">\r\n    <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n      <div class=\"title-row\">\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n      </div>\r\n\r\n\r\n      <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n        <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n    </button>\r\n\r\n\r\n      <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n      <div class=\"d-flex flex-column gap-2\">\r\n\r\n        <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n          <ng-container *ngIf=\"item.showHeader\">\r\n            <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n        <div class=\"d-flex\" *ngIf=\"content?.socialLinks?.display\">\r\n          <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n            <div style=\"position: relative; margin-right: 10px;\">\r\n              <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n        <div *ngIf=\"action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of action?.buttons\">\r\n            <app-button-element\r\n              [buttonContent]=\"button.content\"\r\n              [buttonStyle]=\"button.styles\"\r\n              [sectionId]=\"data?.id\"\r\n              [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.investorProfile{display:flex;align-items:center;margin-left:15px}.investorProfile p{color:#000;height:32px;background:#e6f0ff;width:32px;display:flex;align-items:center;justify-content:center;border-radius:100%;margin-bottom:0;font-weight:600}.investorProfile mat-icon{color:#000}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i5.MatDialog }, { type: i8$1.MatBottomSheet }, { type: i2$1.CookieService }, { type: StorageServiceService }, { type: RestService }], propDecorators: { data: [{
                 type: Input
             }], nextComponent: [{
@@ -6324,7 +6336,6 @@ class PricingSectionComponent extends BaseSection {
         }, 100);
     }
     redirectTo() {
-        console.log('function called');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PricingSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PricingSectionComponent, isStandalone: true, selector: "simpo-pricing-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n  <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n    <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n      <div class=\"row\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\">\r\n          <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div>\r\n        </div>\r\n\r\n        <div class=\"pricing-options d-flex\">\r\n          <div class=\"individual-options\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n            [ngClass]=\"{'highlighted-option': options.highlight.highlighted === true,\r\n              'individual-options-3': content?.listItem?.data?.length === 3,\r\n              'individual-options-2': content?.listItem?.data?.length === 2,\r\n              'individual-options-1': content?.listItem?.data?.length === 1\r\n            }\">\r\n            <img loading=\"lazy\"  class=\"image\" *ngIf=\"content?.display?.showImage === true\"\r\n            [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n            [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" width=\"92%\" loading=\"lazy\">\r\n            <div class=\"highlight-label\" *ngIf=\"options.highlight.highlighted === true\" [ngStyle]=\"{'background-color': getTextColor()}\" [simpoColor]=\"getTextColor()\">\r\n              {{options.highlight.label}}\r\n            </div>\r\n            <div class=\"heading-small content-side\" [innerHTML]=\"options.inputText[0].value | sanitizeHtml \"></div>\r\n            <div class=\"heading-large price content-side\" [innerHTML]=\"options.inputText[2].value | sanitizeHtml \"></div>\r\n            <div class=\"body-desc content-side\" [innerHTML]=\"options.inputText[3].value | sanitizeHtml \"></div>\r\n\r\n            <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n              <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"redirectTo()\">{{options?.button?.label}}</button>\r\n            </div>\r\n            <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\" [innerHtml] = \"options.inputText[1].value\"></div>\r\n            <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n              <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n                <mat-icon>check</mat-icon> {{content.content}}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  \r\n  <ng-container *ngIf=\"style?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;height:auto;justify-content:center;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;border-radius:25px;margin-top:20px;margin-right:auto;margin-left:17px;font-size:15px}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
@@ -8211,7 +8222,6 @@ class RemoveCarouselDirective {
     }
     ngOnChanges() {
         if (this.carouselRemove) {
-            console.log(this.carouselRemove);
         }
         // if (changes['carouselRemove']) {
         // this.eventServiceSubscription = this.eventService.stopCarouselEvent.subscribe((res: any) => {
@@ -8263,7 +8273,6 @@ class CarouselBannerComponent extends BaseSection {
         this.currentIndex = 1;
     }
     ngOnInit() {
-        console.log(this.content, this.data);
         this.deleteSelected = this.delete;
         // this.content = this.data?.content;
         // this.styles = this.data?.styles;
@@ -8273,13 +8282,11 @@ class CarouselBannerComponent extends BaseSection {
         //   return;
         // }
         // this._eventService.stopCarouselEvent.subscribe((res:any)=>{
-        //   console.log(res)
         // })
         // let a = document.querySelector('data-ride');
     }
     // ngAfterViewInit(){
     //   this._eventService.stopCarouselEvent.subscribe((res:any)=>{
-    //     console.log(res)
     //     this.selectSlide(res.activeItem)
     //     this.currentIndex = res.activeItem;
     //     this.carouselElement1.nativeElement.setAttribute('data-interval','false')
@@ -8445,7 +8452,6 @@ class AppointmentFormComponent extends BaseSection {
         this.screenWidth = window.innerWidth;
     }
     ngOnInit() {
-        console.log(this.data);
         this.deleteSelected = this.delete;
         this.content = this.data?.content;
         this.styles = this.data?.styles;
@@ -8524,7 +8530,6 @@ class AppointmentFormComponent extends BaseSection {
         this.getAllServices();
         this.getAllStaff();
         this.updateLocationTiming();
-        // console.log(this.locationTiming)
     }
     updateLocationTiming() {
         this.locationTiming = [];
@@ -8551,7 +8556,6 @@ class AppointmentFormComponent extends BaseSection {
                 // Filter services to only include those with status 'ACTIVE'
                 this.serviceData = res.data.data.filter((service) => service.status === 'ACTIVE');
                 if (this.serviceData.length > 0) {
-                    console.log(this.serviceData);
                 }
                 else {
                     this.snackbar.open(`No active services available for this business.`, 'Close', {
@@ -8565,7 +8569,6 @@ class AppointmentFormComponent extends BaseSection {
                 });
             }
         }, (error) => {
-            console.error("Error fetching services:", error); // Handle errors gracefully
         });
     }
     getAllStaff() {
@@ -8577,7 +8580,6 @@ class AppointmentFormComponent extends BaseSection {
                 // Filter services to only include those with status 'ACTIVE'
                 this.staffData = res.data.data.filter((staff) => staff.status === 'ACTIVE');
                 if (this.staffData.length > 0) {
-                    console.log(this.staffData);
                 }
                 else {
                     this.snackbar.open(`No active staff available for this business.`, 'Close', {
@@ -8591,7 +8593,6 @@ class AppointmentFormComponent extends BaseSection {
                 });
             }
         }, (error) => {
-            console.error("Error fetching staff:", error); // Handle errors gracefully
         });
     }
     changeDate() {
@@ -8623,7 +8624,6 @@ class AppointmentFormComponent extends BaseSection {
             //     }
             //   }
             // }
-            // console.log(this.bookedSlots)
             // this.getBookedSlots(res);
             this.getBookedSlots(res);
         });
@@ -8643,7 +8643,6 @@ class AppointmentFormComponent extends BaseSection {
             const dateB = new Date(b.appointmentStartTime).getTime();
             return dateA - dateB; // Ascending order
         });
-        console.log(slots);
         let startTime = new Date(slots[0].appointmentStartTime);
         let endTime = new Date(slots[0].appointmentEndTime);
         for (let apppointment of slots) {
@@ -8664,7 +8663,6 @@ class AppointmentFormComponent extends BaseSection {
         const timeSlots = this.getTime(startTime.toString(), endTime.toString(), 15);
         timeSlots.splice(timeSlots.length - 1, 1);
         timeSlots?.forEach(slot => this.bookedSlots.add(slot));
-        console.log(this.bookedSlots);
     }
     getTime(start, end, intervalMinutes) {
         const startDate = new Date(start);
@@ -8686,10 +8684,8 @@ class AppointmentFormComponent extends BaseSection {
         return slots;
     }
     generateTimeSlots(startTime, endTime) {
-        console.log(startTime, endTime);
         this.availableTimes = []; // Clear previous times
         if (!startTime || !endTime) {
-            console.error("StartTime or EndTime is undefined:", startTime, endTime);
             return;
         }
         const [startHour, startMinute, startPeriod] = this.parseTime(startTime);
@@ -8722,7 +8718,6 @@ class AppointmentFormComponent extends BaseSection {
     }
     parseTime(time) {
         if (!time) {
-            console.error("Time is undefined or null:", time);
             return [0, 0, 'AM']; // Default or fallback values
         }
         const [timeString, period] = time.split(" ");
@@ -8740,7 +8735,6 @@ class AppointmentFormComponent extends BaseSection {
                 });
             }
         }, (error) => {
-            console.error("Error fetching services:", error); // Handle errors gracefully
         });
     }
     formatDate(date) {
@@ -8764,7 +8758,6 @@ class AppointmentFormComponent extends BaseSection {
                 this.snackbar.open(`Location is not created yet with this business`, 'Close', { duration: 1500 });
             }
         }, (error) => {
-            console.error("Error fetching services:", error);
         });
     }
     // Function to filter time slots
@@ -8841,7 +8834,6 @@ class AppointmentFormComponent extends BaseSection {
             this.snackbar.open(`Internal Server Error`, 'Close', {
                 duration: 1500
             });
-            console.error("Error fetching Creation:", error); // Handle errors gracefully
         });
     }
     reFilterData() {
@@ -9044,7 +9036,6 @@ class LogoGalleryComponent extends BaseSection {
         this.screenWidth = window.innerWidth;
     }
     ngOnInit() {
-        console.log(this.data);
         this.content = this.data?.content;
         this.style = this.data?.styles;
         this.getScreenSize();
@@ -9319,7 +9310,9 @@ class RegistrationFormComponent extends BaseSection {
         this.data?.sectionType === 'registrationForm' ? this.createRegistration() : this.createAdmission();
     }
     createRegistration() {
-        this.payload['returnUrl'] = `https://dev.cmis.tejsoft.com/verify-payment/?url=true&type=REGISTRATION&bId=${this.businessId}`;
+        // this.payload['returnUrl'] = `https://cmis.tejsoft.com/verify-payment/?url=true&type=REGISTRATION&bId=${this.businessId}` //production
+        this.payload['returnUrl'] = `https://dev.cmis.tejsoft.com/verify-payment/?url=true&type=REGISTRATION&bId=${this.businessId}`; //dev
+        // this.payload['returnUrl'] = `https://stage.cmis.tejsoft.com/verify-payment/?url=true&type=REGISTRATION&bId=${this.businessId}` //stage
         this.registrationSubscription = this.restService.createRegistrationForPayment(this.payload).subscribe((res) => {
             // this.snackBar.open('Registration created successfully', 'close', {duration: 2000});
             this._eventService.cashFreeEvent.emit({ response: res, paymentType: 'REGISTRATION' });
@@ -9331,7 +9324,9 @@ class RegistrationFormComponent extends BaseSection {
             return;
         }
         this.payload.studentFeeStructure['paymentPlanType'] = this.payload.paymentPlanType;
-        this.payload['returnUrl'] = `https://dev.cmis.tejsoft.com/verify-payment/?url=true&type=ADMISSION&bId=${this.businessId}`;
+        // this.payload['returnUrl'] = `https://cmis.tejsoft.com/verify-payment/?url=true&type=ADMISSION&bId=${this.businessId}`; //production
+        this.payload['returnUrl'] = `https://dev.cmis.tejsoft.com/verify-payment/?url=true&type=ADMISSION&bId=${this.businessId}`; //dev
+        // this.payload['returnUrl'] = `https://stage.cmis.tejsoft.com/verify-payment/?url=true&type=ADMISSION&bId=${this.businessId}`; //stage
         if (this.backupDocFile) {
             let imageData = await this.imageUploadService.uploadFileInAzure(this.backupDocFile);
             this.payload.backupDoc = imageData.url;
@@ -9494,7 +9489,7 @@ class RegistrationFormComponent extends BaseSection {
         return response;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RegistrationFormComponent, deps: [{ token: RestService }, { token: i2$3.MatSnackBar }, { token: EventsService }, { token: i2$2.ActivatedRoute }, { token: i1.DomSanitizer }, { token: ImageUplaodService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: RegistrationFormComponent, isStandalone: true, selector: "simpo-registration-form", inputs: { data: "data", index: "index", edit: "edit", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n    <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n      [simpoBorder]=\"styles?.border\">\r\n      <div class=\"main-section\"\r\n        [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n        [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n        <div class=\"body-section\">\r\n          <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div>\r\n              <simpo-text-element [textData]=\"content?.inputText?.[0]?.value\" [textLabel]=\"content?.inputText?.[0]?.label\"></simpo-text-element>\r\n            </div>\r\n            <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n              styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n              styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n              styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n            ]\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <section class=\"main-section\">\r\n    <div *ngIf=\"formStatus != 'REGISTERED' && formStatus != 'ADMITTED'\">\r\n      <div class=\"subTabs_section\">\r\n        <div class=\"list_tabs d-flex align-items-center\">\r\n          <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\r\n            <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\r\n              [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\r\n              {{key | titlecase}}\r\n            </div>\r\n          </ng-container>\r\n          <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = 'Document'\" *ngIf=\"data?.sectionType === 'admissionForm'\"\r\n            [ngClass]=\"selectedKey === 'Document' ? 'single_tab_active' : 'single_tab'\">\r\n            Document\r\n          </div>\r\n          <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\r\n            *ngIf=\"data?.sectionType === 'admissionForm'\"\r\n            [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\r\n            Payment\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"main-content\">\r\n        <ng-container *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : [];let groupIndex = index\">\r\n        <div class=\"body\" *ngIf=\"group !== 'Backup Contact'\">\r\n          <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n            {{group}}\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\r\n            <div class=\"image-box\" *ngIf=\"!payload.imgUrl\">\r\n              <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n                (click)=\"fileInput.click()\" alt=\"\">\r\n              <div class=\"image_box\">\r\n                <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n                  upload</span>\r\n              </div>\r\n            </div>\r\n            <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\r\n              accept=\"image/x-png,image/jpeg,image/jpg\" (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\"\r\n              id=\"browse_contact_image\" #fileInput />\r\n\r\n            <div *ngIf=\"payload.imgUrl\" class=\"addedImg\">\r\n              <div class=\"uploadedImg\">\r\n                <img  alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(payload.imgUrl)\">\r\n              </div>\r\n              <div class=\"image-buttons\">\r\n                <div class=\"button\" (click)=\"fileInput.click()\">\r\n                  <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\r\n                  Change Image\r\n                </div>\r\n                <div class=\"button delete-change\" (click)=\"deleteImg()\">\r\n\r\n                  <div class=\"delete\">\r\n                    <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\r\n                    <div>Delete</div>\r\n                  </div>\r\n\r\n                </div>\r\n              </div>\r\n\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"row mt-1\">\r\n            <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey][group]\">\r\n              <label for=\"\" class=\"label-text\">{{info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\r\n              <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"body\" *ngIf=\"fieldData[selectedKey].hasOwnProperty('Backup Contact') && studentLiveWith === 'single parent' && groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\r\n          <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n            Backup Contact (Optional)\r\n          </div>\r\n\r\n          <div class=\"row mt-1\">\r\n            <div class=\"col-md-12\">\r\n              <label class=\"mtb-15 checkbox-label\">\r\n                <input type=\"checkbox\" name=\"\" id=\"\" [(ngModel)]=\"payload.parentAuthorization\">\r\n                  I authorize the school to release the child only to the parent listed above\r\n              </label>\r\n            </div>\r\n            <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey]['Backup Contact']\">\r\n              <label for=\"\" class=\"label-text\">{{info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\"\r\n                *ngIf=\"info.required\">*</span> <br>\r\n              <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n            </div>\r\n            <div class=\"col-md-4 col-12 mt-1\">\r\n              <label for=\"\" class=\"label-text\">Upload Supporting Document (Optional)</label>\r\n              <div class=\"input-text upload-file\" (click)=\"backUpDocInput.click()\">\r\n                <p>{{backupDocFile ? 'File Uploaded' : 'Upload File'}}</p>\r\n                <mat-icon>cloud_upload</mat-icon>\r\n              </div>\r\n              <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\r\n                accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\r\n                (change)=\"uploadBackUpDocument($event)\" class=\"pc-btn\"\r\n                id=\"browse_contact_image\" #backUpDocInput />\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        </ng-container>\r\n        <div class=\"payment-details\" *ngIf=\"selectedKey === 'Document' && data?.sectionType === 'admissionForm'\">\r\n          <simpo-document [documentList]=\"documentList\"></simpo-document>\r\n        </div>\r\n        <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\r\n          <simpo-payment-details [admissionData]=\"payload\"\r\n            [subscriptionsData]=\"subscriptionsData\" [termPaymentList]=\"termPaymentList\"></simpo-payment-details>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"button-parent\">\r\n        <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n          <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\r\n            (data?.sectionType === 'registrationForm' &&\r\n              (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\r\n            [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n\r\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\r\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n\r\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\"\r\n            *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\r\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"emptyText\" *ngIf=\"formStatus == 'REGISTERED' || formStatus == 'ADMITTED'\">\r\n      <img [src]=\"content?.image?.url\" alt=\"\" *ngIf=\"content?.image?.showImage\">\r\n      <div class=\"heading-large\" [innerHtml]=\"content?.inputText?.[1]?.value\"></div>\r\n    </div>\r\n  </section>\r\n\r\n  <ng-template #inputData let-field=\"data\">\r\n    <div *ngIf=\"field.dataType == 'IMAGE'\">\r\n      <div class=\"image-box\">\r\n        <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n          (click)=\"fileInput.click()\" alt=\"\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n            upload</span>\r\n        </div>\r\n      </div>\r\n      <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\r\n        (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput />\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'TEXT'\">\r\n      <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'NUMBER'\">\r\n      <input type=\"number\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'MONEY'\">\r\n      <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DATE'\">\r\n      <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DROPDOWN'\" class=\"admission\">\r\n      <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n        <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\" [multiple]=\"field.multipleSelection\">\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n            <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\" (click)=\"masterDropdownValueChange(item, field)\">{{item.label}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n            <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\r\n              (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'CHECKBOX'\">\r\n      <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n        <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\r\n          <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n            {{data.label}}\r\n          </label>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n        <div class=\"form-check mb-5\" *ngFor=\"let data of field.sourceData[field.dataSourceType]\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\r\n          <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n            {{data.name}}\r\n          </label>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>\r\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem;margin-top:3rem;cursor:pointer}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.image_box{display:flex;align-items:center}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.payment-details{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;border-radius:10px}.mb-5{margin-bottom:5px!important}.addedImg{display:flex;gap:5%;width:95%;margin-top:2rem}.addedImg .uploadedImg img{height:65px;width:65px;border-radius:50%}.addedImg .image-buttons{display:flex;gap:3%;padding-top:20px}.addedImg .image-buttons .button{display:flex;gap:8px;width:142px;height:40px;padding:12px 8px;font-family:lexandMedium;color:#3f3b3b;font-style:normal;font-weight:500;font-size:12px!important;border:1px dashed #E4E7EC;border-radius:12px;cursor:pointer}.addedImg .image-buttons .button img{width:20px}.addedImg .image-buttons .button .delete{display:flex;gap:15%;width:60%;margin:auto}.addedImg .image-buttons .button .delete img{width:12px}.emptyText{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px}.emptyText img{height:200px}@media screen and (max-width: 475px){.body{margin:0rem}.emptyText{padding:1rem}.emptyText img{width:100%}.subTabs_section{padding:1rem .5rem}.list_tabs{white-space:nowrap;overflow:scroll;justify-content:flex-start}.payment-details{margin:0rem}}.mtb-15{margin-top:15px;margin-bottom:15px}.checkbox-label{display:flex;align-items:center;gap:15px}.checkbox-label input{height:16px;width:16px}.upload-file{display:flex;align-items:center;justify-content:space-between;padding-right:10px}.upload-file mat-icon{color:#4caf50}.upload-file p{margin-bottom:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: TextElementComponent, selector: "simpo-text-element", inputs: ["textData", "textLabel"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: PaymentDetailsComponent, selector: "simpo-payment-details", inputs: ["admissionData", "subscriptionsData", "termPaymentList"] }, { kind: "component", type: DocumentComponent, selector: "simpo-document", inputs: ["documentList"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: RegistrationFormComponent, isStandalone: true, selector: "simpo-registration-form", inputs: { data: "data", index: "index", edit: "edit", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n    <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n      [simpoBorder]=\"styles?.border\">\r\n      <div class=\"main-section\"\r\n        [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n        [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n        <div class=\"body-section\">\r\n          <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div>\r\n              <simpo-text-element [textData]=\"content?.inputText?.[0]?.value\" [textLabel]=\"content?.inputText?.[0]?.label\"></simpo-text-element>\r\n            </div>\r\n            <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n              styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n              styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n              styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n            ]\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <section class=\"main-section\">\r\n    <div *ngIf=\"formStatus != 'REGISTERED' && formStatus != 'ADMITTED'\">\r\n      <div class=\"subTabs_section\">\r\n        <div class=\"list_tabs d-flex align-items-center\">\r\n          <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\r\n            <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\r\n              [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\r\n              {{key | titlecase}}\r\n            </div>\r\n          </ng-container>\r\n          <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = 'Document'\" *ngIf=\"data?.sectionType === 'admissionForm'\"\r\n            [ngClass]=\"selectedKey === 'Document' ? 'single_tab_active' : 'single_tab'\">\r\n            Document\r\n          </div>\r\n          <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\r\n            *ngIf=\"data?.sectionType === 'admissionForm'\"\r\n            [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\r\n            Payment\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"main-content\">\r\n        <ng-container *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : [];let groupIndex = index\">\r\n        <div class=\"body\" *ngIf=\"group !== 'Backup Contact'\">\r\n          <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n            {{group}}\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\r\n            <div class=\"image-box\" *ngIf=\"!payload.imgUrl\">\r\n              <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n                (click)=\"fileInput.click()\" alt=\"\">\r\n              <div class=\"image_box\">\r\n                <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n                  upload</span>\r\n              </div>\r\n            </div>\r\n            <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\r\n              accept=\"image/x-png,image/jpeg,image/jpg\" (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\"\r\n              id=\"browse_contact_image\" #fileInput />\r\n\r\n            <div *ngIf=\"payload.imgUrl\" class=\"addedImg\">\r\n              <div class=\"uploadedImg\">\r\n                <img  alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(payload.imgUrl)\">\r\n              </div>\r\n              <div class=\"image-buttons\">\r\n                <div class=\"button\" (click)=\"fileInput.click()\">\r\n                  <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\r\n                  Change Image\r\n                </div>\r\n                <div class=\"button delete-change\" (click)=\"deleteImg()\">\r\n\r\n                  <div class=\"delete\">\r\n                    <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\r\n                    <div>Delete</div>\r\n                  </div>\r\n\r\n                </div>\r\n              </div>\r\n\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"row mt-1\">\r\n            <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey][group]\">\r\n              <label for=\"\" class=\"label-text\">{{info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\r\n              <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"body\" *ngIf=\"fieldData[selectedKey].hasOwnProperty('Backup Contact') && studentLiveWith === 'single parent' && groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\r\n          <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n            Backup Contact (Optional)\r\n          </div>\r\n\r\n          <div class=\"row mt-1\">\r\n            <div class=\"col-md-12\">\r\n              <label class=\"mtb-15 checkbox-label\">\r\n                <input type=\"checkbox\" name=\"\" id=\"\" [(ngModel)]=\"payload.parentAuthorization\">\r\n                  I authorize the school to release the child only to the parent listed above\r\n              </label>\r\n            </div>\r\n            <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey]['Backup Contact']\">\r\n              <label for=\"\" class=\"label-text\">{{info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\"\r\n                *ngIf=\"info.required\">*</span> <br>\r\n              <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n            </div>\r\n            <div class=\"col-md-4 col-12 mt-1\">\r\n              <label for=\"\" class=\"label-text\">Upload Supporting Document (Optional)</label>\r\n              <div class=\"input-text upload-file\" (click)=\"backUpDocInput.click()\">\r\n                <p>{{backupDocFile ? 'File Uploaded' : 'Upload File'}}</p>\r\n                <mat-icon>cloud_upload</mat-icon>\r\n              </div>\r\n              <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\r\n                accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\r\n                (change)=\"uploadBackUpDocument($event)\" class=\"pc-btn\"\r\n                id=\"browse_contact_image\" #backUpDocInput />\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        </ng-container>\r\n        <div class=\"payment-details\" *ngIf=\"selectedKey === 'Document' && data?.sectionType === 'admissionForm'\">\r\n          <simpo-document [documentList]=\"documentList\"></simpo-document>\r\n        </div>\r\n        <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\r\n          <simpo-payment-details [admissionData]=\"payload\"\r\n            [subscriptionsData]=\"subscriptionsData\" [termPaymentList]=\"termPaymentList\"></simpo-payment-details>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"button-parent\">\r\n        <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n          <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\r\n            (data?.sectionType === 'registrationForm' &&\r\n              (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\r\n            [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n\r\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\r\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n\r\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\"\r\n            *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\r\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"emptyText\" *ngIf=\"formStatus == 'REGISTERED' || formStatus == 'ADMITTED'\">\r\n      <img [src]=\"content?.image?.url\" alt=\"\" *ngIf=\"content?.image?.showImage\">\r\n      <div class=\"heading-large\" [innerHtml]=\"content?.inputText?.[1]?.value\"></div>\r\n    </div>\r\n  </section>\r\n\r\n  <ng-template #inputData let-field=\"data\">\r\n    <div *ngIf=\"field.dataType == 'IMAGE'\">\r\n      <div class=\"image-box\">\r\n        <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n          (click)=\"fileInput.click()\" alt=\"\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n            upload</span>\r\n        </div>\r\n      </div>\r\n      <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\r\n        (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput />\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'TEXT'\">\r\n      <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'NUMBER'\">\r\n      <input type=\"number\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'MONEY'\">\r\n      <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DATE'\">\r\n      <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\" [placeholder]=\"'Select '+field.fieldLabel\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DROPDOWN'\" class=\"admission\">\r\n      <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n        <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\" [multiple]=\"field.multipleSelection\">\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n            <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\" (click)=\"masterDropdownValueChange(item, field)\">{{item.label}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n            <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\r\n              (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'CHECKBOX'\">\r\n      <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n        <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\r\n          <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n            {{data.label}}\r\n          </label>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n        <div class=\"form-check mb-5\" *ngFor=\"let data of field.sourceData[field.dataSourceType]\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\r\n          <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n            {{data.name}}\r\n          </label>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>\r\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem;margin-top:3rem;cursor:pointer}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.image_box{display:flex;align-items:center}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.payment-details{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;border-radius:10px}.mb-5{margin-bottom:5px!important}.addedImg{display:flex;gap:5%;width:95%;margin-top:2rem}.addedImg .uploadedImg img{height:65px;width:65px;border-radius:50%}.addedImg .image-buttons{display:flex;gap:3%;padding-top:20px}.addedImg .image-buttons .button{display:flex;gap:8px;width:142px;height:40px;padding:12px 8px;font-family:lexandMedium;color:#3f3b3b;font-style:normal;font-weight:500;font-size:12px!important;border:1px dashed #E4E7EC;border-radius:12px;cursor:pointer}.addedImg .image-buttons .button img{width:20px}.addedImg .image-buttons .button .delete{display:flex;gap:15%;width:60%;margin:auto}.addedImg .image-buttons .button .delete img{width:12px}.emptyText{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px}.emptyText img{height:200px}@media screen and (max-width: 475px){.body{margin:0rem}.emptyText{padding:1rem}.emptyText img{width:100%}.subTabs_section{padding:1rem .5rem}.list_tabs{white-space:nowrap;overflow:scroll;justify-content:flex-start}.payment-details{margin:0rem}}.mtb-15{margin-top:15px;margin-bottom:15px}.checkbox-label{display:flex;align-items:center;gap:15px}.checkbox-label input{height:16px;width:16px}.upload-file{display:flex;align-items:center;justify-content:space-between;padding-right:10px}.upload-file mat-icon{color:#4caf50}.upload-file p{margin-bottom:0}@media only screen and (min-width: 320px) and (max-width : 500px){.image-box span{padding:11px 4rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: TextElementComponent, selector: "simpo-text-element", inputs: ["textData", "textLabel"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: PaymentDetailsComponent, selector: "simpo-payment-details", inputs: ["admissionData", "subscriptionsData", "termPaymentList"] }, { kind: "component", type: DocumentComponent, selector: "simpo-document", inputs: ["documentList"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
@@ -9528,7 +9523,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatSelectModule,
                         FormsModule,
                         MatIconModule
-                    ], template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n    <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n      [simpoBorder]=\"styles?.border\">\r\n      <div class=\"main-section\"\r\n        [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n        [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n        <div class=\"body-section\">\r\n          <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div>\r\n              <simpo-text-element [textData]=\"content?.inputText?.[0]?.value\" [textLabel]=\"content?.inputText?.[0]?.label\"></simpo-text-element>\r\n            </div>\r\n            <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n              styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n              styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n              styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n            ]\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <section class=\"main-section\">\r\n    <div *ngIf=\"formStatus != 'REGISTERED' && formStatus != 'ADMITTED'\">\r\n      <div class=\"subTabs_section\">\r\n        <div class=\"list_tabs d-flex align-items-center\">\r\n          <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\r\n            <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\r\n              [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\r\n              {{key | titlecase}}\r\n            </div>\r\n          </ng-container>\r\n          <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = 'Document'\" *ngIf=\"data?.sectionType === 'admissionForm'\"\r\n            [ngClass]=\"selectedKey === 'Document' ? 'single_tab_active' : 'single_tab'\">\r\n            Document\r\n          </div>\r\n          <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\r\n            *ngIf=\"data?.sectionType === 'admissionForm'\"\r\n            [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\r\n            Payment\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"main-content\">\r\n        <ng-container *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : [];let groupIndex = index\">\r\n        <div class=\"body\" *ngIf=\"group !== 'Backup Contact'\">\r\n          <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n            {{group}}\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\r\n            <div class=\"image-box\" *ngIf=\"!payload.imgUrl\">\r\n              <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n                (click)=\"fileInput.click()\" alt=\"\">\r\n              <div class=\"image_box\">\r\n                <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n                  upload</span>\r\n              </div>\r\n            </div>\r\n            <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\r\n              accept=\"image/x-png,image/jpeg,image/jpg\" (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\"\r\n              id=\"browse_contact_image\" #fileInput />\r\n\r\n            <div *ngIf=\"payload.imgUrl\" class=\"addedImg\">\r\n              <div class=\"uploadedImg\">\r\n                <img  alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(payload.imgUrl)\">\r\n              </div>\r\n              <div class=\"image-buttons\">\r\n                <div class=\"button\" (click)=\"fileInput.click()\">\r\n                  <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\r\n                  Change Image\r\n                </div>\r\n                <div class=\"button delete-change\" (click)=\"deleteImg()\">\r\n\r\n                  <div class=\"delete\">\r\n                    <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\r\n                    <div>Delete</div>\r\n                  </div>\r\n\r\n                </div>\r\n              </div>\r\n\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"row mt-1\">\r\n            <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey][group]\">\r\n              <label for=\"\" class=\"label-text\">{{info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\r\n              <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"body\" *ngIf=\"fieldData[selectedKey].hasOwnProperty('Backup Contact') && studentLiveWith === 'single parent' && groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\r\n          <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n            Backup Contact (Optional)\r\n          </div>\r\n\r\n          <div class=\"row mt-1\">\r\n            <div class=\"col-md-12\">\r\n              <label class=\"mtb-15 checkbox-label\">\r\n                <input type=\"checkbox\" name=\"\" id=\"\" [(ngModel)]=\"payload.parentAuthorization\">\r\n                  I authorize the school to release the child only to the parent listed above\r\n              </label>\r\n            </div>\r\n            <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey]['Backup Contact']\">\r\n              <label for=\"\" class=\"label-text\">{{info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\"\r\n                *ngIf=\"info.required\">*</span> <br>\r\n              <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n            </div>\r\n            <div class=\"col-md-4 col-12 mt-1\">\r\n              <label for=\"\" class=\"label-text\">Upload Supporting Document (Optional)</label>\r\n              <div class=\"input-text upload-file\" (click)=\"backUpDocInput.click()\">\r\n                <p>{{backupDocFile ? 'File Uploaded' : 'Upload File'}}</p>\r\n                <mat-icon>cloud_upload</mat-icon>\r\n              </div>\r\n              <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\r\n                accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\r\n                (change)=\"uploadBackUpDocument($event)\" class=\"pc-btn\"\r\n                id=\"browse_contact_image\" #backUpDocInput />\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        </ng-container>\r\n        <div class=\"payment-details\" *ngIf=\"selectedKey === 'Document' && data?.sectionType === 'admissionForm'\">\r\n          <simpo-document [documentList]=\"documentList\"></simpo-document>\r\n        </div>\r\n        <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\r\n          <simpo-payment-details [admissionData]=\"payload\"\r\n            [subscriptionsData]=\"subscriptionsData\" [termPaymentList]=\"termPaymentList\"></simpo-payment-details>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"button-parent\">\r\n        <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n          <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\r\n            (data?.sectionType === 'registrationForm' &&\r\n              (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\r\n            [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n\r\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\r\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n\r\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\"\r\n            *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\r\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"emptyText\" *ngIf=\"formStatus == 'REGISTERED' || formStatus == 'ADMITTED'\">\r\n      <img [src]=\"content?.image?.url\" alt=\"\" *ngIf=\"content?.image?.showImage\">\r\n      <div class=\"heading-large\" [innerHtml]=\"content?.inputText?.[1]?.value\"></div>\r\n    </div>\r\n  </section>\r\n\r\n  <ng-template #inputData let-field=\"data\">\r\n    <div *ngIf=\"field.dataType == 'IMAGE'\">\r\n      <div class=\"image-box\">\r\n        <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n          (click)=\"fileInput.click()\" alt=\"\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n            upload</span>\r\n        </div>\r\n      </div>\r\n      <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\r\n        (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput />\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'TEXT'\">\r\n      <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'NUMBER'\">\r\n      <input type=\"number\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'MONEY'\">\r\n      <input type=\"text\" class=\"input-text\" placeholder=\"enter value\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DATE'\">\r\n      <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DROPDOWN'\" class=\"admission\">\r\n      <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n        <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\" [multiple]=\"field.multipleSelection\">\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n            <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\" (click)=\"masterDropdownValueChange(item, field)\">{{item.label}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n            <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\r\n              (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'CHECKBOX'\">\r\n      <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n        <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\r\n          <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n            {{data.label}}\r\n          </label>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n        <div class=\"form-check mb-5\" *ngFor=\"let data of field.sourceData[field.dataSourceType]\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\r\n          <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n            {{data.name}}\r\n          </label>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>\r\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem;margin-top:3rem;cursor:pointer}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.image_box{display:flex;align-items:center}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.payment-details{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;border-radius:10px}.mb-5{margin-bottom:5px!important}.addedImg{display:flex;gap:5%;width:95%;margin-top:2rem}.addedImg .uploadedImg img{height:65px;width:65px;border-radius:50%}.addedImg .image-buttons{display:flex;gap:3%;padding-top:20px}.addedImg .image-buttons .button{display:flex;gap:8px;width:142px;height:40px;padding:12px 8px;font-family:lexandMedium;color:#3f3b3b;font-style:normal;font-weight:500;font-size:12px!important;border:1px dashed #E4E7EC;border-radius:12px;cursor:pointer}.addedImg .image-buttons .button img{width:20px}.addedImg .image-buttons .button .delete{display:flex;gap:15%;width:60%;margin:auto}.addedImg .image-buttons .button .delete img{width:12px}.emptyText{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px}.emptyText img{height:200px}@media screen and (max-width: 475px){.body{margin:0rem}.emptyText{padding:1rem}.emptyText img{width:100%}.subTabs_section{padding:1rem .5rem}.list_tabs{white-space:nowrap;overflow:scroll;justify-content:flex-start}.payment-details{margin:0rem}}.mtb-15{margin-top:15px;margin-bottom:15px}.checkbox-label{display:flex;align-items:center;gap:15px}.checkbox-label input{height:16px;width:16px}.upload-file{display:flex;align-items:center;justify-content:space-between;padding-right:10px}.upload-file mat-icon{color:#4caf50}.upload-file p{margin-bottom:0}\n"] }]
+                    ], template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n  <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n    <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n      [simpoBorder]=\"styles?.border\">\r\n      <div class=\"main-section\"\r\n        [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n        [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n        <div class=\"body-section\">\r\n          <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n            <div>\r\n              <simpo-text-element [textData]=\"content?.inputText?.[0]?.value\" [textLabel]=\"content?.inputText?.[0]?.label\"></simpo-text-element>\r\n            </div>\r\n            <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n              styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n              styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n              styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n            ]\">\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <section class=\"main-section\">\r\n    <div *ngIf=\"formStatus != 'REGISTERED' && formStatus != 'ADMITTED'\">\r\n      <div class=\"subTabs_section\">\r\n        <div class=\"list_tabs d-flex align-items-center\">\r\n          <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\r\n            <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\r\n              [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\r\n              {{key | titlecase}}\r\n            </div>\r\n          </ng-container>\r\n          <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = 'Document'\" *ngIf=\"data?.sectionType === 'admissionForm'\"\r\n            [ngClass]=\"selectedKey === 'Document' ? 'single_tab_active' : 'single_tab'\">\r\n            Document\r\n          </div>\r\n          <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\r\n            *ngIf=\"data?.sectionType === 'admissionForm'\"\r\n            [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\r\n            Payment\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"main-content\">\r\n        <ng-container *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : [];let groupIndex = index\">\r\n        <div class=\"body\" *ngIf=\"group !== 'Backup Contact'\">\r\n          <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n            {{group}}\r\n          </div>\r\n\r\n          <ng-container *ngIf=\"groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\r\n            <div class=\"image-box\" *ngIf=\"!payload.imgUrl\">\r\n              <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n                (click)=\"fileInput.click()\" alt=\"\">\r\n              <div class=\"image_box\">\r\n                <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n                  upload</span>\r\n              </div>\r\n            </div>\r\n            <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\r\n              accept=\"image/x-png,image/jpeg,image/jpg\" (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\"\r\n              id=\"browse_contact_image\" #fileInput />\r\n\r\n            <div *ngIf=\"payload.imgUrl\" class=\"addedImg\">\r\n              <div class=\"uploadedImg\">\r\n                <img  alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(payload.imgUrl)\">\r\n              </div>\r\n              <div class=\"image-buttons\">\r\n                <div class=\"button\" (click)=\"fileInput.click()\">\r\n                  <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\r\n                  Change Image\r\n                </div>\r\n                <div class=\"button delete-change\" (click)=\"deleteImg()\">\r\n\r\n                  <div class=\"delete\">\r\n                    <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\r\n                    <div>Delete</div>\r\n                  </div>\r\n\r\n                </div>\r\n              </div>\r\n\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"row mt-1\">\r\n            <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey][group]\">\r\n              <label for=\"\" class=\"label-text\">{{info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\r\n              <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"body\" *ngIf=\"fieldData[selectedKey].hasOwnProperty('Backup Contact') && studentLiveWith === 'single parent' && groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\r\n          <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n            Backup Contact (Optional)\r\n          </div>\r\n\r\n          <div class=\"row mt-1\">\r\n            <div class=\"col-md-12\">\r\n              <label class=\"mtb-15 checkbox-label\">\r\n                <input type=\"checkbox\" name=\"\" id=\"\" [(ngModel)]=\"payload.parentAuthorization\">\r\n                  I authorize the school to release the child only to the parent listed above\r\n              </label>\r\n            </div>\r\n            <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey]['Backup Contact']\">\r\n              <label for=\"\" class=\"label-text\">{{info.fieldLabel}}</label>&nbsp; <span style=\"color: red;\"\r\n                *ngIf=\"info.required\">*</span> <br>\r\n              <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n            </div>\r\n            <div class=\"col-md-4 col-12 mt-1\">\r\n              <label for=\"\" class=\"label-text\">Upload Supporting Document (Optional)</label>\r\n              <div class=\"input-text upload-file\" (click)=\"backUpDocInput.click()\">\r\n                <p>{{backupDocFile ? 'File Uploaded' : 'Upload File'}}</p>\r\n                <mat-icon>cloud_upload</mat-icon>\r\n              </div>\r\n              <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\r\n                accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\r\n                (change)=\"uploadBackUpDocument($event)\" class=\"pc-btn\"\r\n                id=\"browse_contact_image\" #backUpDocInput />\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        </ng-container>\r\n        <div class=\"payment-details\" *ngIf=\"selectedKey === 'Document' && data?.sectionType === 'admissionForm'\">\r\n          <simpo-document [documentList]=\"documentList\"></simpo-document>\r\n        </div>\r\n        <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\r\n          <simpo-payment-details [admissionData]=\"payload\"\r\n            [subscriptionsData]=\"subscriptionsData\" [termPaymentList]=\"termPaymentList\"></simpo-payment-details>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"button-parent\">\r\n        <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n          <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\r\n            (data?.sectionType === 'registrationForm' &&\r\n              (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\r\n            [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n\r\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\r\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n\r\n          <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n            [buttonStyle]=\"button.styles\"\r\n            *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\r\n            [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"emptyText\" *ngIf=\"formStatus == 'REGISTERED' || formStatus == 'ADMITTED'\">\r\n      <img [src]=\"content?.image?.url\" alt=\"\" *ngIf=\"content?.image?.showImage\">\r\n      <div class=\"heading-large\" [innerHtml]=\"content?.inputText?.[1]?.value\"></div>\r\n    </div>\r\n  </section>\r\n\r\n  <ng-template #inputData let-field=\"data\">\r\n    <div *ngIf=\"field.dataType == 'IMAGE'\">\r\n      <div class=\"image-box\">\r\n        <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n          (click)=\"fileInput.click()\" alt=\"\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n            upload</span>\r\n        </div>\r\n      </div>\r\n      <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\r\n        (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput />\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'TEXT'\">\r\n      <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'NUMBER'\">\r\n      <input type=\"number\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'MONEY'\">\r\n      <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DATE'\">\r\n      <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\" [placeholder]=\"'Select '+field.fieldLabel\">\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'DROPDOWN'\" class=\"admission\">\r\n      <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n        <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\" [multiple]=\"field.multipleSelection\">\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n            <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\" (click)=\"masterDropdownValueChange(item, field)\">{{item.label}}</mat-option>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n            <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\r\n              (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <div *ngIf=\"field.dataType === 'CHECKBOX'\">\r\n      <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n        <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\r\n          <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n            {{data.label}}\r\n          </label>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n        <div class=\"form-check mb-5\" *ngFor=\"let data of field.sourceData[field.dataSourceType]\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\r\n          <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n            {{data.name}}\r\n          </label>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </ng-template>\r\n\r\n\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</section>\r\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem;margin-top:3rem;cursor:pointer}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.image_box{display:flex;align-items:center}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.payment-details{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;border-radius:10px}.mb-5{margin-bottom:5px!important}.addedImg{display:flex;gap:5%;width:95%;margin-top:2rem}.addedImg .uploadedImg img{height:65px;width:65px;border-radius:50%}.addedImg .image-buttons{display:flex;gap:3%;padding-top:20px}.addedImg .image-buttons .button{display:flex;gap:8px;width:142px;height:40px;padding:12px 8px;font-family:lexandMedium;color:#3f3b3b;font-style:normal;font-weight:500;font-size:12px!important;border:1px dashed #E4E7EC;border-radius:12px;cursor:pointer}.addedImg .image-buttons .button img{width:20px}.addedImg .image-buttons .button .delete{display:flex;gap:15%;width:60%;margin:auto}.addedImg .image-buttons .button .delete img{width:12px}.emptyText{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px}.emptyText img{height:200px}@media screen and (max-width: 475px){.body{margin:0rem}.emptyText{padding:1rem}.emptyText img{width:100%}.subTabs_section{padding:1rem .5rem}.list_tabs{white-space:nowrap;overflow:scroll;justify-content:flex-start}.payment-details{margin:0rem}}.mtb-15{margin-top:15px;margin-bottom:15px}.checkbox-label{display:flex;align-items:center;gap:15px}.checkbox-label input{height:16px;width:16px}.upload-file{display:flex;align-items:center;justify-content:space-between;padding-right:10px}.upload-file mat-icon{color:#4caf50}.upload-file p{margin-bottom:0}@media only screen and (min-width: 320px) and (max-width : 500px){.image-box span{padding:11px 4rem}}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: i2$3.MatSnackBar }, { type: EventsService }, { type: i2$2.ActivatedRoute }, { type: i1.DomSanitizer }, { type: ImageUplaodService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -9539,23 +9534,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 type: Input
             }] } });
 
-class PropertyComponentComponent {
+class PropertyComponentComponent extends BaseSection {
+    constructor(restService, router, eventsService) {
+        super();
+        this.restService = restService;
+        this.router = router;
+        this.eventsService = eventsService;
+        this.propertyList = [];
+    }
     ngOnInit() {
-        console.log(this.data, "this property data");
         this.content = this.data?.content;
+        this.styles = this.data?.styles;
+        this.getPropertyList();
+        this.propertyListEventSubscription = this.eventsService.propertyListEvent.subscribe((res) => {
+            this.getPropertyList();
+        });
+    }
+    ngOnDestroy() {
+        this.propertyListEventSubscription?.unsubscribe();
+    }
+    getPropertyList() {
+        this.restService.getFeaturedProperty(this.content?.propertyIds || []).subscribe((res) => {
+            this.propertyList = res;
+        });
+    }
+    get stylesLayout() {
+        return { ...this.styles?.layout };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyComponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertyComponentComponent, isStandalone: true, selector: "simpo-property-component", inputs: { data: "data", index: "index" }, ngImport: i0, template: "<div class=\"main-container content-side\">\r\n    <div class=\"header-section text-center mb-3\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\" [ngClass]=\"{'head-text':text.label == 'Heading' , 'sub-text-1':text.label == 'Subtext'}\">{{text.value}}</div>\r\n    </div>\r\n    <div class=\"cards-section d-flex justify-content-center align-items-center g-3\">\r\n        <ng-container *ngFor=\"let ele of data?.content?.listItem?.data\">\r\n            <div class=\"card\">\r\n                <div class=\"w-100 card-container\"\r\n                    [ngStyle]=\"{ 'background-image': 'url(' + ele.backgroundImageUrl + ')' }\">\r\n                    <div class=\"data p-3 w-100\">\r\n                        <div class=\"top-data d-flex justify-content-between align-items-center\">\r\n                            <div class=\"top-left d-flex g-10\">\r\n                                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/155859c1737715323470Logo.png\"\r\n                                    alt=\"logo-text\" class=\"\">\r\n                                <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\r\n                                    <div class=\"text-heading clr-white\">{{ele.heading}}</div>\r\n                                    <div class=\"d-flex sub-text\"><img\r\n                                            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{ele.location.city\r\n                                        + \", \" + ele.location.state}}</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"top-right text-right\">\r\n                                <div class=\"xl-text mb-10\">{{ele.minInvestment}}</div>\r\n                                <div class=\"nrml-text\">Min.Investment</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"bottom-data d-flex justify-content-around align-items-center\">\r\n                            <div class=\"key-value d-flex flex-column\" *ngFor=\"let item of ele.features\">\r\n                                <div class=\"text-heading clr-grey text-center\">{{item.value}}</div>\r\n                                <div class=\"text-heading clr-grey text-center\">{{item.key}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>", styles: [".main-container{padding:4rem}.head-text{font-family:Open Sans;font-size:32px;font-weight:600;line-height:44px;color:#000}.sub-text-1{font-family:Open Sans;font-size:18px;font-weight:400;line-height:44px;color:#000000b3}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px;margin-bottom:5px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:16px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}.card{width:45%;border-radius:10px}.card-container{height:60vh;background-repeat:no-repeat;background-size:cover;position:relative;border-radius:10px}.data{position:absolute;bottom:0}.g-3{gap:3rem}.logo-img{width:60px;height:60px}@media only screen and (max-width: 475px){.main-container{padding:1rem}.cards-section{flex-direction:column;gap:1rem!important}.card{width:100%!important}.head-text{font-size:25px;line-height:38px;text-align:start!important;margin-bottom:10px}.sub-text-1{font-size:16px;line-height:20px;text-align:start!important}.xl-text{font-size:22px}.nrml-text{font-size:12px}.text-heading{font-size:13px}.sub-text{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+    redirectToPropertyDetails(propertyId) {
+        this.router.navigate([`details`], { queryParams: { id: propertyId } });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyComponentComponent, deps: [{ token: RestService }, { token: i2$2.Router }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertyComponentComponent, isStandalone: true, selector: "simpo-property-component", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"  [id]=\"data?.id\">\r\n  <div class=\"content-side\" [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"header-section mb-3\">\r\n          <div *ngFor=\"let text of data?.content?.inputText\" [ngClass]=\"{'head-text':text.label == 'Heading' , 'sub-text-1':text.label == 'Subtext'}\">{{text.value}}</div>\r\n      </div>\r\n      <div class=\"row\">\r\n          <ng-container *ngFor=\"let property of propertyList\">\r\n              <div class=\"col-md-6 col-12\" (click)=\"redirectToPropertyDetails(property.propertyId)\">\r\n                  <div class=\"w-100 card-container\"\r\n                      [ngStyle]=\"{ 'background-image': 'url(' + property.imgUrl[0] + ')' }\">\r\n                      <div class=\"data p-3 w-100\">\r\n                          <div class=\"top-data d-flex justify-content-between align-items-center\">\r\n                              <div class=\"top-left d-flex g-10\">\r\n                                  <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/155859c1737715323470Logo.png\"\r\n                                      alt=\"logo-text\" class=\"\">\r\n                                  <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\r\n                                      <div class=\"text-heading clr-white\">{{property.name}}</div>\r\n                                      <div class=\"d-flex sub-text\"><img\r\n                                              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{property.location}}\r\n                                      </div>\r\n                                  </div>\r\n                              </div>\r\n                              <div class=\"top-right text-right\">\r\n                                  <div class=\"xl-text mb-10\">{{property.minimumInvestment}}</div>\r\n                                  <div class=\"nrml-text\">Min.Investment (Sq.ft)</div>\r\n                              </div>\r\n                          </div>\r\n                          <div class=\"bottom-data d-flex justify-content-around align-items-center\">\r\n                              <div class=\"key-value d-flex flex-column\" *ngFor=\"let item of [1,2,3]\">\r\n                                  <div class=\"text-heading clr-grey text-center\">10%</div>\r\n                                  <div class=\"text-heading clr-grey text-center\">Annual Returns</div>\r\n                              </div>\r\n                          </div>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n          </ng-container>\r\n      </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.head-text{font-family:Open Sans;font-size:32px;font-weight:600;line-height:44px;color:#000}.sub-text-1{font-family:Open Sans;font-size:18px;font-weight:400;line-height:44px;color:#000000b3}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px;margin-bottom:5px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:16px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}.card-container{height:60vh;background-repeat:no-repeat;background-size:cover;position:relative;border-radius:10px}.top-left-text{text-align:left!important}.text-right{text-align:left}.data{position:absolute;bottom:0}.g-3{gap:3rem}.logo-img{width:60px;height:60px}.row{row-gap:2rem}.content-side{display:block!important}@media only screen and (max-width: 475px){.cards-section{flex-direction:column;gap:1rem!important}.card{width:100%!important}.head-text{font-size:25px;line-height:38px;text-align:start!important;margin-bottom:10px}.sub-text-1{font-size:16px;line-height:20px;text-align:start!important}.xl-text{font-size:22px}.nrml-text{font-size:12px}.text-heading{font-size:13px}.sub-text{font-size:12px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
+                //directive
+                AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyComponentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'simpo-property-component', standalone: true, imports: [
                         CommonModule,
-                    ], template: "<div class=\"main-container content-side\">\r\n    <div class=\"header-section text-center mb-3\">\r\n        <div *ngFor=\"let text of data?.content?.inputText\" [ngClass]=\"{'head-text':text.label == 'Heading' , 'sub-text-1':text.label == 'Subtext'}\">{{text.value}}</div>\r\n    </div>\r\n    <div class=\"cards-section d-flex justify-content-center align-items-center g-3\">\r\n        <ng-container *ngFor=\"let ele of data?.content?.listItem?.data\">\r\n            <div class=\"card\">\r\n                <div class=\"w-100 card-container\"\r\n                    [ngStyle]=\"{ 'background-image': 'url(' + ele.backgroundImageUrl + ')' }\">\r\n                    <div class=\"data p-3 w-100\">\r\n                        <div class=\"top-data d-flex justify-content-between align-items-center\">\r\n                            <div class=\"top-left d-flex g-10\">\r\n                                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/155859c1737715323470Logo.png\"\r\n                                    alt=\"logo-text\" class=\"\">\r\n                                <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\r\n                                    <div class=\"text-heading clr-white\">{{ele.heading}}</div>\r\n                                    <div class=\"d-flex sub-text\"><img\r\n                                            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{ele.location.city\r\n                                        + \", \" + ele.location.state}}</div>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"top-right text-right\">\r\n                                <div class=\"xl-text mb-10\">{{ele.minInvestment}}</div>\r\n                                <div class=\"nrml-text\">Min.Investment</div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"bottom-data d-flex justify-content-around align-items-center\">\r\n                            <div class=\"key-value d-flex flex-column\" *ngFor=\"let item of ele.features\">\r\n                                <div class=\"text-heading clr-grey text-center\">{{item.value}}</div>\r\n                                <div class=\"text-heading clr-grey text-center\">{{item.key}}</div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n</div>", styles: [".main-container{padding:4rem}.head-text{font-family:Open Sans;font-size:32px;font-weight:600;line-height:44px;color:#000}.sub-text-1{font-family:Open Sans;font-size:18px;font-weight:400;line-height:44px;color:#000000b3}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px;margin-bottom:5px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:16px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}.card{width:45%;border-radius:10px}.card-container{height:60vh;background-repeat:no-repeat;background-size:cover;position:relative;border-radius:10px}.data{position:absolute;bottom:0}.g-3{gap:3rem}.logo-img{width:60px;height:60px}@media only screen and (max-width: 475px){.main-container{padding:1rem}.cards-section{flex-direction:column;gap:1rem!important}.card{width:100%!important}.head-text{font-size:25px;line-height:38px;text-align:start!important;margin-bottom:10px}.sub-text-1{font-size:16px;line-height:20px;text-align:start!important}.xl-text{font-size:22px}.nrml-text{font-size:12px}.text-heading{font-size:13px}.sub-text{font-size:12px}}\n"] }]
-        }], propDecorators: { data: [{
+                        SimpoElementsModule,
+                        CommonModule,
+                        SimpoComponentModule,
+                        SimpoHoverBorderDirective,
+                        //directive
+                        AnimationDirective,
+                        BackgroundDirective,
+                        ContentFitDirective,
+                        BorderDirective,
+                        CornerDirective,
+                        HoverDirective,
+                        OverlayDirective,
+                        TextBackgroundDirectiveDirective,
+                        ColorDirective,
+                        SanitizeHtmlPipe,
+                        SpacingHorizontalDirective,
+                    ], template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"  [id]=\"data?.id\">\r\n  <div class=\"content-side\" [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\"\r\n    [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n      <div class=\"header-section mb-3\">\r\n          <div *ngFor=\"let text of data?.content?.inputText\" [ngClass]=\"{'head-text':text.label == 'Heading' , 'sub-text-1':text.label == 'Subtext'}\">{{text.value}}</div>\r\n      </div>\r\n      <div class=\"row\">\r\n          <ng-container *ngFor=\"let property of propertyList\">\r\n              <div class=\"col-md-6 col-12\" (click)=\"redirectToPropertyDetails(property.propertyId)\">\r\n                  <div class=\"w-100 card-container\"\r\n                      [ngStyle]=\"{ 'background-image': 'url(' + property.imgUrl[0] + ')' }\">\r\n                      <div class=\"data p-3 w-100\">\r\n                          <div class=\"top-data d-flex justify-content-between align-items-center\">\r\n                              <div class=\"top-left d-flex g-10\">\r\n                                  <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/155859c1737715323470Logo.png\"\r\n                                      alt=\"logo-text\" class=\"\">\r\n                                  <div class=\"top-left-text text-left d-flex flex-column justify-content-center\">\r\n                                      <div class=\"text-heading clr-white\">{{property.name}}</div>\r\n                                      <div class=\"d-flex sub-text\"><img\r\n                                              src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\">{{property.location}}\r\n                                      </div>\r\n                                  </div>\r\n                              </div>\r\n                              <div class=\"top-right text-right\">\r\n                                  <div class=\"xl-text mb-10\">{{property.minimumInvestment}}</div>\r\n                                  <div class=\"nrml-text\">Min.Investment (Sq.ft)</div>\r\n                              </div>\r\n                          </div>\r\n                          <div class=\"bottom-data d-flex justify-content-around align-items-center\">\r\n                              <div class=\"key-value d-flex flex-column\" *ngFor=\"let item of [1,2,3]\">\r\n                                  <div class=\"text-heading clr-grey text-center\">10%</div>\r\n                                  <div class=\"text-heading clr-grey text-center\">Annual Returns</div>\r\n                              </div>\r\n                          </div>\r\n                      </div>\r\n                  </div>\r\n              </div>\r\n          </ng-container>\r\n      </div>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"styles?.devider?.display\">\r\n    <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n      [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n  </ng-container>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</div>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.head-text{font-family:Open Sans;font-size:32px;font-weight:600;line-height:44px;color:#000}.sub-text-1{font-family:Open Sans;font-size:18px;font-weight:400;line-height:44px;color:#000000b3}.g-10{gap:10px}.mb-10{margin-bottom:10px}.text-heading{font-weight:700;font-size:18px;margin-bottom:5px}.clr-white{color:#fff}.clr-grey{color:#000000b3}.sub-text{font-weight:600;font-size:16px;color:#ffffffb3}.xl-text{font-size:28px;line-height:17px;font-weight:700;color:#f09819}.nrml-text{font-size:16px;font-weight:500;color:#fff6}.bottom-data{background:#fff;padding:10px;border-radius:8px;margin-top:10px}.card-container{height:60vh;background-repeat:no-repeat;background-size:cover;position:relative;border-radius:10px}.top-left-text{text-align:left!important}.text-right{text-align:left}.data{position:absolute;bottom:0}.g-3{gap:3rem}.logo-img{width:60px;height:60px}.row{row-gap:2rem}.content-side{display:block!important}@media only screen and (max-width: 475px){.cards-section{flex-direction:column;gap:1rem!important}.card{width:100%!important}.head-text{font-size:25px;line-height:38px;text-align:start!important;margin-bottom:10px}.sub-text-1{font-size:16px;line-height:20px;text-align:start!important}.xl-text{font-size:22px}.nrml-text{font-size:12px}.text-heading{font-size:13px}.sub-text{font-size:12px}}\n"] }]
+        }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }, { type: EventsService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
+            }], edit: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }], nextComponentColor: [{
+                type: Input
             }] } });
 
 class UspVideoSectionComponent extends BaseSection {
@@ -9564,7 +9608,6 @@ class UspVideoSectionComponent extends BaseSection {
         this._eventService = _eventService;
     }
     ngOnInit() {
-        console.log(this.data);
         this.style = this.data?.styles;
     }
     get stylesLayout() {
@@ -9612,58 +9655,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
             }] } });
 
 class PropertyListComponent extends BaseSection {
-    constructor() {
+    constructor(restService, router) {
         super();
+        this.restService = restService;
+        this.router = router;
         this.propertyList = [
             {
-                imgUrl: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/607923c1737627077005image%20%284%29.png',
-                name: 'Ananta One',
-                icon: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/950344c1738051599772icon2.png',
-                location: 'RRR Hyderabad, Telanghana',
-                underConstruction: true,
-                return: 10,
-                IRR: 18,
-                growth: 5,
-                minInvestment: 5
-            },
-            {
-                imgUrl: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/978309c1738051330108property2.png',
-                name: 'Ananta Hills - 50 Acre Property',
-                icon: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/950344c1738051599772icon2.png',
-                location: 'Chikkamguru, Karnataka',
-                underConstruction: false,
-                return: 10,
-                IRR: 18,
-                growth: 5,
-                minInvestment: 2.5
+                propertyId: 1,
+                name: 'ananta one',
+                minimumInvestment: 5000,
+                propertyType: 'Rental',
+                location: 'Hyderabad, Telangana',
+                imgUrl: ['https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/607923c1737627077005image%20%284%29.png'],
+                description: "Ananta one Apartments is a premium residential development located in the bustling heart of hyderabad. It offers modern amenities and a luxurious lifestyle designed to meet the needs of urban families and professionals.",
+                year: 2023,
+                totalAreaSqFeet: 1200,
+                benefits: [
+                    {
+                        title: 'Reduce Risk',
+                        description: ' Zero Risk with High Returns',
+                        img: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/181840c1739438986146surface1.png'
+                    },
+                    {
+                        title: 'Guaranteed growth',
+                        description: ' Zero Risk with High Returns',
+                        img: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/181840c1739438986146surface1.png'
+                    },
+                    {
+                        title: 'Free holiday stay',
+                        description: ' Zero Risk with High Returns',
+                        img: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/181840c1739438986146surface1.png'
+                    }
+                ]
             },
             {
-                imgUrl: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/978309c1738051330108property2.png',
-                name: 'Ananta Hills - 50 Acre Property',
-                icon: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/950344c1738051599772icon2.png',
-                location: 'Chikkamguru, Karnataka',
-                underConstruction: false,
-                return: 10,
-                IRR: 18,
-                growth: 5,
-                minInvestment: 2.5
+                propertyId: 2,
+                name: 'ananta hills',
+                minimumInvestment: 5000,
+                propertyType: 'Rental',
+                location: 'Hyderabad, Telangana',
+                imgUrl: ['https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/607923c1737627077005image%20%284%29.png'],
+                description: "Ananta one Apartments is a premium residential development located in the bustling heart of hyderabad. It offers modern amenities and a luxurious lifestyle designed to meet the needs of urban families and professionals.",
+                year: 2023,
+                totalAreaSqFeet: 1200,
+                benefits: [
+                    {
+                        title: 'Reduce Risk',
+                        description: ' Zero Risk with High Returns',
+                        img: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/181840c1739438986146surface1.png'
+                    },
+                    {
+                        title: 'Guaranteed growth',
+                        description: ' Zero Risk with High Returns',
+                        img: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/181840c1739438986146surface1.png'
+                    },
+                    {
+                        title: 'Free holiday stay',
+                        description: ' Zero Risk with High Returns',
+                        img: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/181840c1739438986146surface1.png'
+                    }
+                ]
             },
             {
-                imgUrl: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/607923c1737627077005image%20%284%29.png',
-                name: 'Ananta One',
-                icon: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/950344c1738051599772icon2.png',
-                location: 'RRR Hyderabad, Telanghana',
-                underConstruction: true,
-                return: 10,
-                IRR: 18,
-                growth: 5,
-                minInvestment: 5
+                propertyId: 2,
+                name: 'ananta hills',
+                minimumInvestment: 5000,
+                propertyType: 'Rental',
+                location: 'Hyderabad, Telangana',
+                imgUrl: ['https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/607923c1737627077005image%20%284%29.png'],
+                description: "Ananta one Apartments is a premium residential development located in the bustling heart of hyderabad. It offers modern amenities and a luxurious lifestyle designed to meet the needs of urban families and professionals.",
+                year: 2023,
+                totalAreaSqFeet: 1200,
+                benefits: [
+                    {
+                        title: 'Reduce Risk',
+                        description: ' Zero Risk with High Returns',
+                        img: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/181840c1739438986146surface1.png'
+                    },
+                    {
+                        title: 'Guaranteed growth',
+                        description: ' Zero Risk with High Returns',
+                        img: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/181840c1739438986146surface1.png'
+                    },
+                    {
+                        title: 'Free holiday stay',
+                        description: ' Zero Risk with High Returns',
+                        img: 'https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/181840c1739438986146surface1.png'
+                    }
+                ]
             }
         ];
     }
     ngOnInit() {
         this.styles = this.data?.styles;
         this.content = this.data?.content;
+        debugger;
+        this.getPropertyList();
+    }
+    getPropertyList() {
+        this.restService.getPropertyList().subscribe((res) => {
+            this.propertyList = res.content;
+            console.log(res);
+        });
     }
     get stylesLayout() {
         return { ...this.styles?.layout };
@@ -9671,8 +9764,11 @@ class PropertyListComponent extends BaseSection {
     get headingSpace() {
         return this.styles?.layout.headingSpacing;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertyListComponent, isStandalone: true, selector: "simpo-property-list", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n  <div [id]=\"data?.id\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n      <div [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\"\r\n        [simpoLayout]=\"styles?.layout\">\r\n        <div [simpoContentTitleSpace]=\"headingSpace\" [id]=\"data?.id\" class=\"content-side\">\r\n          <div *ngFor=\"let input of content?.inputText\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\"\r\n              [innerHTML]=\"input.value | sanitizeHtml\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"row\">\r\n          <div class=\"col-12 col-md-6\" *ngFor=\"let property of propertyList\">\r\n            <ng-container *ngTemplateOutlet=\"propertyCards; context: {data: property}\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n\r\n\r\n<ng-template #propertyCards let-property=\"data\">\r\n  <div class=\"card\">\r\n    <img [src]=\"property.imgUrl\" alt=\"\">\r\n    <div class=\"p-15\">\r\n      <div class=\"property-name\">\r\n        <div class=\"left-side\">\r\n          <img [src]=\"property.icon\" alt=\"\">\r\n          <div class=\"text-left\">\r\n            <div class=\"property-name-text\">{{property.name}}</div>\r\n            <div class=\"location\">{{property.location}}</div>\r\n          </div>\r\n        </div>\r\n        <div class=\"right-side\" *ngIf=\"property.underConstruction\">\r\n          <mat-icon>build</mat-icon>\r\n          <div>Under Construction</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"stats-area\">\r\n        <div class=\"single-stat\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\r\n          <div class=\"stat-number\">{{property.return}}% <span>Annual Returns</span></div>\r\n        </div>\r\n        <div class=\"single-stat justify-center\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\r\n          <div class=\"stat-number\">{{property.IRR}}% <span>IRR</span></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"single-stat mt-15 w-100\">\r\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\r\n        <div class=\"stat-number\">{{property.growth}}% <span>Guaranteed annual growth</span></div>\r\n      </div>\r\n      <hr>\r\n      <div class=\"bottom-area\">\r\n        <div class=\"min-investment\">\r\n          <p>{{property.minInvestment}} Lac</p>\r\n          <div>Min.Investment</div>\r\n        </div>\r\n        <button class=\"button\" simpoButtonDirective [id]=\"(data?.id || '')+(data?.action?.buttons?.[0]?.id || '')\"\r\n          [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"styles?.background?.accentColor\">Know\r\n          More</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.card{padding:5px;border:2px solid rgba(0,0,0,.1)}.card img{height:37vh}.property-name{display:flex;align-items:center;justify-content:space-between}.p-15{padding:15px}.left-side{align-items:center;display:flex;gap:15px}.left-side img{height:65px;width:60px}.right-side{display:flex;gap:5px;color:#19a6c6;align-items:center}.stats-area{display:flex;margin-top:30px;justify-content:space-between}.single-stat{width:50%;display:flex;align-items:center;gap:20px}.single-stat img{height:20px;width:16px}.mt-15{margin-top:15px}hr{border-top:1px solid rgba(0,0,0,.7)}.stat-number{font-size:25px;color:#000000b3;font-weight:900;display:flex;align-items:center;gap:13px}.stat-number span{color:#000000b3;font-size:12px}.bottom-area{display:flex;justify-content:space-between;align-items:center}.min-investment{background:#f8a9381a;text-align:center;padding:.5rem 2rem;border-radius:5px}.min-investment p{margin-bottom:0;font-size:22px;font-weight:900}.min-investment div{color:#0006;font-size:14px;font-weight:600}.button{font-size:14px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:600}.property-name-text{font-size:22px;font-weight:700}.location{font-size:11px;color:gray}.justify-center{justify-content:center}.row{row-gap:20px}.text-left{text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
+    redirectToPropertyDetails(propertyId) {
+        this.router.navigate([`details`], { queryParams: { id: propertyId } });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyListComponent, deps: [{ token: RestService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertyListComponent, isStandalone: true, selector: "simpo-property-list", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n  <div [id]=\"data?.id\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n      <div [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\"\r\n        [simpoLayout]=\"styles?.layout\">\r\n        <div [simpoContentTitleSpace]=\"headingSpace\" [id]=\"data?.id\" class=\"content-side\">\r\n          <div *ngFor=\"let input of content?.inputText\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\"\r\n              [innerHTML]=\"input.value | sanitizeHtml\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"row\">\r\n          <div class=\"col-12 col-md-6\" *ngFor=\"let property of propertyList\">\r\n            <ng-container *ngTemplateOutlet=\"propertyCards; context: {data: property}\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n\r\n\r\n<ng-template #propertyCards let-property=\"data\">\r\n  <div class=\"card\" (click)=\"redirectToPropertyDetails(property.propertyId)\">\r\n    <img [src]=\"property.imgUrl[0]\" alt=\"\">\r\n    <div class=\"p-15\">\r\n      <div class=\"property-name\">\r\n        <div class=\"left-side\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/950344c1738051599772icon2.png\" alt=\"\">\r\n          <div class=\"text-left\">\r\n            <div class=\"property-name-text\">{{property.name}}</div>\r\n            <div class=\"location\">{{property.location}}</div>\r\n          </div>\r\n        </div>\r\n        <!-- <div class=\"right-side\" *ngIf=\"property.underConstruction\">\r\n          <mat-icon>build</mat-icon>\r\n          <div>Under Construction</div>\r\n        </div> -->\r\n      </div>\r\n      <div class=\"stats-area\">\r\n        <div class=\"single-stat\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\r\n          <div class=\"stat-number\">10% <span>Annual Returns</span></div>\r\n        </div>\r\n        <div class=\"single-stat justify-center\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\r\n          <div class=\"stat-number\">18% <span>IRR</span></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"single-stat mt-15 w-100\">\r\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\r\n        <div class=\"stat-number\">5% <span>Guaranteed annual growth</span></div>\r\n      </div>\r\n      <hr>\r\n      <div class=\"bottom-area\">\r\n        <div class=\"min-investment\">\r\n          <p>{{property.minimumInvestment}}</p>\r\n          <div>Min.Investment (Sq.ft)</div>\r\n        </div>\r\n        <button class=\"button\" simpoButtonDirective [id]=\"(data?.id || '')+(data?.action?.buttons?.[0]?.id || '')\"\r\n          [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"styles?.background?.accentColor\">Know\r\n          More</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.card{padding:5px;border:2px solid rgba(0,0,0,.1)}.card img{height:37vh}.property-name{display:flex;align-items:center;justify-content:space-between}.p-15{padding:15px}.left-side{align-items:center;display:flex;gap:15px}.left-side img{height:65px;width:60px}.right-side{display:flex;gap:5px;color:#19a6c6;align-items:center}.stats-area{display:flex;margin-top:30px;justify-content:space-between}.single-stat{width:50%;display:flex;align-items:center;gap:20px}.single-stat img{height:20px;width:16px}.mt-15{margin-top:15px}hr{border-top:1px solid rgba(0,0,0,.7)}.stat-number{font-size:25px;color:#000000b3;font-weight:900;display:flex;align-items:center;gap:13px}.stat-number span{color:#000000b3;font-size:12px}.bottom-area{display:flex;justify-content:space-between;align-items:center}.min-investment{background:#f8a9381a;text-align:center;padding:.5rem 2rem;border-radius:5px}.min-investment p{margin-bottom:0;font-size:22px;font-weight:900;text-align:left}.min-investment div{color:#0006;font-size:14px;font-weight:600}.button{font-size:14px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:600}.property-name-text{font-size:22px;font-weight:700}.location{font-size:11px;color:gray}.justify-center{justify-content:center}.row{row-gap:20px}.text-left{text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyListComponent, decorators: [{
             type: Component,
@@ -9692,8 +9788,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatIconModule,
                         ContentTitleDirective,
                         SpacingHorizontalDirective
-                    ], template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n  <div [id]=\"data?.id\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n      <div [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\"\r\n        [simpoLayout]=\"styles?.layout\">\r\n        <div [simpoContentTitleSpace]=\"headingSpace\" [id]=\"data?.id\" class=\"content-side\">\r\n          <div *ngFor=\"let input of content?.inputText\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\"\r\n              [innerHTML]=\"input.value | sanitizeHtml\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"row\">\r\n          <div class=\"col-12 col-md-6\" *ngFor=\"let property of propertyList\">\r\n            <ng-container *ngTemplateOutlet=\"propertyCards; context: {data: property}\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n\r\n\r\n<ng-template #propertyCards let-property=\"data\">\r\n  <div class=\"card\">\r\n    <img [src]=\"property.imgUrl\" alt=\"\">\r\n    <div class=\"p-15\">\r\n      <div class=\"property-name\">\r\n        <div class=\"left-side\">\r\n          <img [src]=\"property.icon\" alt=\"\">\r\n          <div class=\"text-left\">\r\n            <div class=\"property-name-text\">{{property.name}}</div>\r\n            <div class=\"location\">{{property.location}}</div>\r\n          </div>\r\n        </div>\r\n        <div class=\"right-side\" *ngIf=\"property.underConstruction\">\r\n          <mat-icon>build</mat-icon>\r\n          <div>Under Construction</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"stats-area\">\r\n        <div class=\"single-stat\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\r\n          <div class=\"stat-number\">{{property.return}}% <span>Annual Returns</span></div>\r\n        </div>\r\n        <div class=\"single-stat justify-center\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\r\n          <div class=\"stat-number\">{{property.IRR}}% <span>IRR</span></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"single-stat mt-15 w-100\">\r\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\r\n        <div class=\"stat-number\">{{property.growth}}% <span>Guaranteed annual growth</span></div>\r\n      </div>\r\n      <hr>\r\n      <div class=\"bottom-area\">\r\n        <div class=\"min-investment\">\r\n          <p>{{property.minInvestment}} Lac</p>\r\n          <div>Min.Investment</div>\r\n        </div>\r\n        <button class=\"button\" simpoButtonDirective [id]=\"(data?.id || '')+(data?.action?.buttons?.[0]?.id || '')\"\r\n          [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"styles?.background?.accentColor\">Know\r\n          More</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.card{padding:5px;border:2px solid rgba(0,0,0,.1)}.card img{height:37vh}.property-name{display:flex;align-items:center;justify-content:space-between}.p-15{padding:15px}.left-side{align-items:center;display:flex;gap:15px}.left-side img{height:65px;width:60px}.right-side{display:flex;gap:5px;color:#19a6c6;align-items:center}.stats-area{display:flex;margin-top:30px;justify-content:space-between}.single-stat{width:50%;display:flex;align-items:center;gap:20px}.single-stat img{height:20px;width:16px}.mt-15{margin-top:15px}hr{border-top:1px solid rgba(0,0,0,.7)}.stat-number{font-size:25px;color:#000000b3;font-weight:900;display:flex;align-items:center;gap:13px}.stat-number span{color:#000000b3;font-size:12px}.bottom-area{display:flex;justify-content:space-between;align-items:center}.min-investment{background:#f8a9381a;text-align:center;padding:.5rem 2rem;border-radius:5px}.min-investment p{margin-bottom:0;font-size:22px;font-weight:900}.min-investment div{color:#0006;font-size:14px;font-weight:600}.button{font-size:14px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:600}.property-name-text{font-size:22px;font-weight:700}.location{font-size:11px;color:gray}.justify-center{justify-content:center}.row{row-gap:20px}.text-left{text-align:left}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { data: [{
+                    ], template: "<section class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n  <div [id]=\"data?.id\">\r\n    <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\">\r\n      <div [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\" [simpoAnimation]=\"styles?.animation\"\r\n        [simpoLayout]=\"styles?.layout\">\r\n        <div [simpoContentTitleSpace]=\"headingSpace\" [id]=\"data?.id\" class=\"content-side\">\r\n          <div *ngFor=\"let input of content?.inputText\">\r\n            <div *ngFor=\"let text of data?.content?.inputText\" class=\"heading-large\"\r\n              [innerHTML]=\"input.value | sanitizeHtml\"></div>\r\n          </div>\r\n        </div>\r\n        <div class=\"row\">\r\n          <div class=\"col-12 col-md-6\" *ngFor=\"let property of propertyList\">\r\n            <ng-container *ngTemplateOutlet=\"propertyCards; context: {data: property}\"></ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n\r\n\r\n<ng-template #propertyCards let-property=\"data\">\r\n  <div class=\"card\" (click)=\"redirectToPropertyDetails(property.propertyId)\">\r\n    <img [src]=\"property.imgUrl[0]\" alt=\"\">\r\n    <div class=\"p-15\">\r\n      <div class=\"property-name\">\r\n        <div class=\"left-side\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/950344c1738051599772icon2.png\" alt=\"\">\r\n          <div class=\"text-left\">\r\n            <div class=\"property-name-text\">{{property.name}}</div>\r\n            <div class=\"location\">{{property.location}}</div>\r\n          </div>\r\n        </div>\r\n        <!-- <div class=\"right-side\" *ngIf=\"property.underConstruction\">\r\n          <mat-icon>build</mat-icon>\r\n          <div>Under Construction</div>\r\n        </div> -->\r\n      </div>\r\n      <div class=\"stats-area\">\r\n        <div class=\"single-stat\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\r\n          <div class=\"stat-number\">10% <span>Annual Returns</span></div>\r\n        </div>\r\n        <div class=\"single-stat justify-center\">\r\n          <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\r\n          <div class=\"stat-number\">18% <span>IRR</span></div>\r\n        </div>\r\n      </div>\r\n      <div class=\"single-stat mt-15 w-100\">\r\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/600863c1738056517087return.png\" alt=\"\">\r\n        <div class=\"stat-number\">5% <span>Guaranteed annual growth</span></div>\r\n      </div>\r\n      <hr>\r\n      <div class=\"bottom-area\">\r\n        <div class=\"min-investment\">\r\n          <p>{{property.minimumInvestment}}</p>\r\n          <div>Min.Investment (Sq.ft)</div>\r\n        </div>\r\n        <button class=\"button\" simpoButtonDirective [id]=\"(data?.id || '')+(data?.action?.buttons?.[0]?.id || '')\"\r\n          [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"styles?.background?.accentColor\">Know\r\n          More</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.card{padding:5px;border:2px solid rgba(0,0,0,.1)}.card img{height:37vh}.property-name{display:flex;align-items:center;justify-content:space-between}.p-15{padding:15px}.left-side{align-items:center;display:flex;gap:15px}.left-side img{height:65px;width:60px}.right-side{display:flex;gap:5px;color:#19a6c6;align-items:center}.stats-area{display:flex;margin-top:30px;justify-content:space-between}.single-stat{width:50%;display:flex;align-items:center;gap:20px}.single-stat img{height:20px;width:16px}.mt-15{margin-top:15px}hr{border-top:1px solid rgba(0,0,0,.7)}.stat-number{font-size:25px;color:#000000b3;font-weight:900;display:flex;align-items:center;gap:13px}.stat-number span{color:#000000b3;font-size:12px}.bottom-area{display:flex;justify-content:space-between;align-items:center}.min-investment{background:#f8a9381a;text-align:center;padding:.5rem 2rem;border-radius:5px}.min-investment p{margin-bottom:0;font-size:22px;font-weight:900;text-align:left}.min-investment div{color:#0006;font-size:14px;font-weight:600}.button{font-size:14px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:600}.property-name-text{font-size:22px;font-weight:700}.location{font-size:11px;color:gray}.justify-center{justify-content:center}.row{row-gap:20px}.text-left{text-align:left}\n"] }]
+        }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }], propDecorators: { data: [{
                 type: Input
             }], index: [{
                 type: Input
@@ -9705,6 +9801,233 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 type: Input
             }] } });
 
+class PropertyDetailComponent {
+    constructor(restService, activatedRoute) {
+        this.restService = restService;
+        this.activatedRoute = activatedRoute;
+        this.propertyId = '';
+        this.propertyDetails = {
+            "propertyId": 10,
+            "name": "Ananta One",
+            "minimumInvestment": 100,
+            "propertyType": "Coliving",
+            "description": null,
+            "location": "samta colony Chhattisgarh",
+            "documents": [],
+            "financeDetails": {
+                "id": 11,
+                "propertyId": 10,
+                "guaranteedROI": 10,
+                "pricePerSqFeet": 10,
+                "indicativeMarketValue": 10,
+                "annualReturn": 10,
+                "guaranteedAnnualCapitalGrowth": 10,
+                "createdTimeStamp": "2025-02-15T05:30:00",
+                "irr": 10
+            },
+            "year": 2020,
+            "totalAreaSqFeet": 10,
+            "soldOutArea": 0,
+            "blockingPrice": 0,
+            "blockingDuration": 0,
+            "benefits": [],
+            "imgUrl": [
+                "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png",
+                "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png"
+            ],
+            "createdTimeStamp": "2025-02-15T05:30:00",
+            "createdById": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
+            "createdByName": "string",
+            "active": true,
+            "updatedTimeStamp": "2025-02-15T05:30:00",
+            "deleted": false
+        };
+        this.index = 0;
+        this.propertyNumbers = [
+            { icon: "", number: "₹3230", text: "Price/Sq.ft" },
+            { icon: "", number: "₹4830", text: "Indicative Market Value" },
+            { icon: "", number: "18%", text: "Internal Returns Rate" },
+            { icon: "", number: "12%", text: "Annual Returns" },
+            { icon: "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/273918c1739173355725checked%201.png", number: "5%", text: "Guaranteed annual capital growth" },
+        ];
+        this.aboutText = "Ananta one Apartments is a premium residential development located in the bustling heart of hyderabad. It offers modern amenities and a luxurious lifestyle designed to meet the needs of urban families and professionals.";
+        this.keyValue = [
+            { key: "Property Type:", value: "Rental" },
+            { key: "Property Size:", value: "12 Acre" },
+            { key: "Year:", value: "2023" }
+        ];
+        this.investmentCards = [
+            { img: "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/697943c1739176853348fi_12875395.png", head: "Reduce risk", text: " Zero Risk with High Returns" },
+            { img: "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/718819c1739177134935shield%201.png", head: "Gurantee Growth", text: "Guaranteed Annual Capital Appreciation" },
+            { img: "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/421883c1739177144880fi_12875395%20%281%29.png", head: "Free Holiday stay", text: "Get 3 days 2 nights free holiday stay" }
+        ];
+        this.pdfCards = ["Title deed", "Property Registration Certificate"];
+        this.sqft = 3230;
+        this.noOfSqft = 1;
+    }
+    ngOnInit() {
+        this.activatedRoute.queryParams.subscribe((param) => {
+            this.propertyId = param['id'];
+            if (this.propertyId)
+                this.getPropertyDetails();
+        });
+    }
+    getPropertyDetails() {
+        this.restService.getPropertyDetails(this.propertyId).subscribe((res) => {
+            this.propertyDetails = res;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyDetailComponent, deps: [{ token: RestService }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertyDetailComponent, isStandalone: true, selector: "simpo-property-detail", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"main-container\">\r\n  <div id=\"carouselExampleInterval\" class=\"carousel slide p-relative\" data-bs-ride=\"carousel\">\r\n    <div class=\"carousel-inner\">\r\n      <div class=\"carousel-item active\" data-bs-interval=\"2000\" *ngFor=\"let img of propertyDetails.imgUrl\">\r\n        <img [src]=\"img\" class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n      </div>\r\n      <!-- <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n                    class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n            </div>\r\n            <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n                    class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n            </div> -->\r\n    </div>\r\n    <div class=\"propertyName d-flex justify-content-between\">\r\n      <div class=\"property-details\">\r\n        <p class=\"pname\">{{propertyDetails.name}}</p>\r\n        <span class=\"plocation d-flex align-items-center gap-5\"><img\r\n            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\"\r\n            alt=\"location image\"> {{propertyDetails.location}}</span>\r\n      </div>\r\n      <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n        <!-- d-flex justify-content-end align-items-end -->\r\n        <div class=\"carousel-indicators additional-properties-1\">\r\n          <!-- additional-properties-1 -->\r\n          <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" [attr.data-bs-slide-to]=\"i\"\r\n            class=\"active additional-properties\" aria-current=\"true\" aria-label=\"Slide 1\"\r\n            *ngFor=\"let slide of propertyDetails.imgUrl;let i = index\"></button>\r\n          <!-- class=\"additional-properties\" -->\r\n          <!-- <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\" class=\"additional-properties\"></button>\r\n                    <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\" class=\"additional-properties\"></button> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"property-numbers d-flex justify-content-between\">\r\n    <ng-container>\r\n      <div class=\"icon-text w-18\">\r\n        <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n          <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n                        <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n                    </ng-container> -->\r\n          <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.pricePerSqFeet }}</p>\r\n        </div>\r\n        <div class=\"text-1 text-center\">\r\n          <p class=\"property-text\">Price/Sq.ft</p>\r\n        </div>\r\n      </div>\r\n      <div class=\"icon-text w-18\">\r\n        <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n          <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n                      <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n                  </ng-container> -->\r\n          <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.indicativeMarketValue }}</p>\r\n        </div>\r\n        <div class=\"text-1 text-center\">\r\n          <p class=\"property-text\">Indicative Market Value</p>\r\n        </div>\r\n      </div>\r\n      <div class=\"icon-text w-18\">\r\n        <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n          <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n                    <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n                </ng-container> -->\r\n          <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.irr }}%</p>\r\n        </div>\r\n        <div class=\"text-1 text-center\">\r\n          <p class=\"property-text\">Internal Returns Rate</p>\r\n        </div>\r\n      </div>\r\n      <div class=\"icon-text w-18\">\r\n        <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n          <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n                    <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n                </ng-container> -->\r\n          <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.annualReturn }}%</p>\r\n        </div>\r\n        <div class=\"text-1 text-center\">\r\n          <p class=\"property-text\">Annual Returns</p>\r\n        </div>\r\n      </div>\r\n      <div class=\"icon-text w-18\">\r\n        <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n          <ng-container>\r\n            <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/273918c1739173355725checked%201.png\" alt=\"Icon\" class=\"tick-img\">\r\n          </ng-container>\r\n          <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.annualReturn }}%</p>\r\n        </div>\r\n        <div class=\"text-1 text-center\">\r\n          <p class=\"property-text\">Guaranteed annual capital growth</p>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"about-section w-70 d-flex g-40\">\r\n    <div class=\"right w-60 \">\r\n      <div class=\"about-property\">\r\n        <div class=\"head-about-property\">About Property</div>\r\n        <div class=\"about-property-text\">{{propertyDetails.description}}</div>\r\n        <div class=\"about-property-details d-flex gap-10\">\r\n          <ng-container>\r\n            <div class=\"gap-10 d-flex\">\r\n              <div class=\"right-text\">Property Type: </div>\r\n              <div class=\"left-text\">{{propertyDetails.propertyType}}</div>\r\n            </div>\r\n            <div class=\"gap-10 d-flex\">\r\n              <div class=\"right-text\">Property Size:</div>\r\n              <div class=\"left-text\">{{propertyDetails.totalAreaSqFeet}}</div>\r\n            </div>\r\n            <div class=\"gap-10 d-flex\">\r\n              <div class=\"right-text\">year:</div>\r\n              <div class=\"left-text\">{{propertyDetails.year}}</div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <div class=\"about-property\" *ngIf=\"(propertyDetails?.benefits?.length || 0) > 0\">\r\n        <div class=\"head-about-property\">Investment Benefit</div>\r\n        <div class=\"card-container d-flex gap-10\">\r\n          <ng-container *ngFor=\"let benefits of propertyDetails.benefits\">\r\n            <div class=\"cards\">\r\n              <div class=\"image-container w-100 d-flex justify-content-center\">\r\n                <img [src]=\"benefits.imgUrl\" alt=\"\">\r\n              </div>\r\n              <div class=\"card-head\">{{benefits.title}}</div>\r\n              <div class=\"card-text\">{{benefits.description}}</div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <div class=\"about-property\">\r\n        <div class=\"head-about-property\">Documents & Reports</div>\r\n        <div class=\"file-container d-flex justify-content-between gap-10\">\r\n          <div class=\"file d-flex justify-content-between\" *ngFor=\"let ele of pdfCards\">\r\n            <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/678394c1739183726107image%209.png\"\r\n              alt=\"pdf\">\r\n            <div class=\"doc-text w-75 d-flex align-items-center\"> {{ele.length > 15 ?\r\n              ele.substring(0,15)+'...' : ele }}</div>\r\n            <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/195414c1739183779845fi_3502477.png\"\r\n              alt=\"download\" class=\"download-img\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"left w-40\">\r\n      <div class=\"sqft\">\r\n        <div class=\"head-about-property\">Buy SQFT</div>\r\n        <div class=\"price justify-content-between d-flex\">\r\n          <div class=\"left-price\">Price/Sq.ft</div>\r\n          <div class=\"right-price\">\u20B9{{sqft}}</div>\r\n        </div>\r\n        <div class=\"sqft-quantity d-flex justify-content-between w-100 align-items-center\">\r\n          <div class=\"left-sqft\">SQFT Quantity</div>\r\n          <div class=\"right-sqft d-flex align-items-center\">\r\n            <mat-icon (click)=\"noOfSqft > 0 ? noOfSqft = noOfSqft - 1 : noOfSqft = 0\"\r\n              class=\"d-flex align-items-center justify-content-center icon\">remove</mat-icon>\r\n            <div class=\"sqft-number d-flex justify-content-center\"><input type=\"number\" [(ngModel)]=\"noOfSqft\"\r\n                class=\"sqft-number additional-properties-2 text-center p-0 \"></div>\r\n            <mat-icon (click)=\"noOfSqft = noOfSqft + 1\"\r\n              class=\"d-flex align-items-center justify-content-center icon\">add</mat-icon>\r\n          </div>\r\n        </div>\r\n        <div class=\"payable d-flex justify-content-between align-items-center w-100\">\r\n          <div class=\"payable-left\">\r\n            <p class=\"pay-text\">Payable Amount</p><span class=\"pay-subtext\">(Incl. Fees & Other\r\n              Levies)</span>\r\n          </div>\r\n          <div class=\"payable-right\">\r\n            \u20B9{{ noOfSqft * sqft}}\r\n          </div>\r\n        </div>\r\n        <div class=\"buy\">\r\n          Buy SQFT\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}.main-container{overflow-x:hidden}mat-icon{font-family:Material Icons!important}.property-numbers{padding:40px 60px 10px;background:#f2910b}.number-text{font-weight:700;font-size:35px;line-height:40px;color:#102031;font-family:DM Sans}.property-text{font-size:20px;font-weight:600;line-height:28px;color:#ffffffe6}.w-18{width:18%}.last-card{width:21%}.w-70{width:70%}.about-section{margin:30px auto}.about-property{background:#fff;border:1px solid rgba(0,0,0,.03);border-radius:10px;padding:10px;margin-bottom:15px}.head-about-property{font-weight:600;font-size:16px;line-height:26px;margin-bottom:10px}.about-property-text{font-weight:400;font-size:16px;line-height:29px;color:#01161eb3}.gap-10{gap:10px}.w-60{width:60%}.about-property-details{width:100%;justify-content:space-between;padding:13px 10px;background:#f6f5f5;border-radius:7px;margin-top:15px;margin-bottom:5px}.right-text{font-weight:500;font-size:16px;line-height:20px;color:#01161ecc}.left-text{font-weight:600;font-size:16px;line-height:20px;color:#01161e}.cards{width:30%;background:#f9fbff;border-radius:10px;padding:15px}.card-head{font-weight:600;font-size:16px;line-height:25px;text-align:center;overflow:hidden;text-overflow:ellipsis}.card-text{font-size:14px;font-weight:500;line-height:25px;text-align:center;overflow:hidden;text-overflow:ellipsis}.image-container img{height:8vh}.file{background:#f7f7f7;border-radius:5px;padding:12px;width:50%}.w-75{width:75%}.doc-text{font-size:16px;font-weight:500;line-height:26px;color:#000}.download-image{width:28px}.g-40{gap:40px}.w-40{width:40%}.sqft{background:linear-gradient(180deg,#0d1b2a,#172b40);color:#fff;width:85%;border-radius:8px;padding:15px}.right-price{width:50%;color:#fc9a11;font-size:28px;font-weight:700;line-height:32px;text-align:end}.left-price{width:50%;font-size:18px;font-weight:600;line-height:32px}.price{display:flex;background:#263f5a;border-radius:8px;padding:15px 10px}.buy{background:#36b37e;color:#fff;padding:15px;border-radius:8px;font-size:15px;font-weight:700;line-height:20px;text-align:center}.payable{padding:10px;background:#ffffffb3;border-radius:8px;margin-bottom:10px}.pay-text{font-size:14px;line-height:20px;font-weight:600;color:#000;margin-bottom:unset;border-radius:8px}.pay-subtext{font-size:10px;font-weight:500;color:#0006}.payable-right{font-weight:700;font-size:22px;line-height:32px;color:#fff}.card-container{overflow-x:scroll}.sqft-quantity{padding:15px 2px}.left-sqft{font-weight:600;font-size:16px;line-height:32px;color:#fff}.right-sqft{padding:4px;background:#f8a938;border-radius:4px;width:50%}.icon{font-size:16px;font-weight:700;color:#000;line-height:19px;width:30%;margin:0 2px}.sqft-number{background:#fff;width:70%;border-radius:4px;font-weight:700;font-size:20px;line-height:19px;color:#000;padding:10px;outline:unset}.tick-img{width:30px}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%;padding:30px}.pname{font-weight:600;font-size:34px;line-height:44px;color:#fff}.plocation{font-size:16px;font-weight:500;line-height:12px;color:#fff9}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.additional-properties-2{border:unset}.gap-5{gap:5px!important}@media screen and (max-width : 475px){.property-numbers{flex-wrap:wrap;width:100%;padding:15px!important;margin-bottom:15px}.icon-text{width:50%}.last-card{width:100%!important}.right-text,.left-text{white-space:nowrap}.card-container{flex-direction:column;gap:10px;align-items:center}.cards{width:70%}.about-section{flex-direction:column;width:100%!important;margin:unset!important}.right{width:100%!important}.about-property{width:100%;border:none!important}.left{width:100%;margin:10px}.file-container{flex-direction:column}.file{width:100%!important}.sqft{width:95%}.height-30{height:30vh}.about-property-details{display:grid!important;width:100%}.propertyName{padding:10px!important}.pname{font-size:21px;line-height:10px}.additional-properties{height:1vh;width:8px!important}.number-text{font-size:26px}.property-text{font-size:18px}.head-about-property{text-align:center}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-property-detail', standalone: true, imports: [NgFor, MatIcon, NgIf, FormsModule], template: "<section class=\"main-container\">\r\n  <div id=\"carouselExampleInterval\" class=\"carousel slide p-relative\" data-bs-ride=\"carousel\">\r\n    <div class=\"carousel-inner\">\r\n      <div class=\"carousel-item active\" data-bs-interval=\"2000\" *ngFor=\"let img of propertyDetails.imgUrl\">\r\n        <img [src]=\"img\" class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n      </div>\r\n      <!-- <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n                    class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n            </div>\r\n            <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n                <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n                    class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n            </div> -->\r\n    </div>\r\n    <div class=\"propertyName d-flex justify-content-between\">\r\n      <div class=\"property-details\">\r\n        <p class=\"pname\">{{propertyDetails.name}}</p>\r\n        <span class=\"plocation d-flex align-items-center gap-5\"><img\r\n            src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\"\r\n            alt=\"location image\"> {{propertyDetails.location}}</span>\r\n      </div>\r\n      <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n        <!-- d-flex justify-content-end align-items-end -->\r\n        <div class=\"carousel-indicators additional-properties-1\">\r\n          <!-- additional-properties-1 -->\r\n          <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" [attr.data-bs-slide-to]=\"i\"\r\n            class=\"active additional-properties\" aria-current=\"true\" aria-label=\"Slide 1\"\r\n            *ngFor=\"let slide of propertyDetails.imgUrl;let i = index\"></button>\r\n          <!-- class=\"additional-properties\" -->\r\n          <!-- <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\" class=\"additional-properties\"></button>\r\n                    <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\" class=\"additional-properties\"></button> -->\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"property-numbers d-flex justify-content-between\">\r\n    <ng-container>\r\n      <div class=\"icon-text w-18\">\r\n        <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n          <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n                        <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n                    </ng-container> -->\r\n          <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.pricePerSqFeet }}</p>\r\n        </div>\r\n        <div class=\"text-1 text-center\">\r\n          <p class=\"property-text\">Price/Sq.ft</p>\r\n        </div>\r\n      </div>\r\n      <div class=\"icon-text w-18\">\r\n        <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n          <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n                      <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n                  </ng-container> -->\r\n          <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.indicativeMarketValue }}</p>\r\n        </div>\r\n        <div class=\"text-1 text-center\">\r\n          <p class=\"property-text\">Indicative Market Value</p>\r\n        </div>\r\n      </div>\r\n      <div class=\"icon-text w-18\">\r\n        <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n          <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n                    <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n                </ng-container> -->\r\n          <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.irr }}%</p>\r\n        </div>\r\n        <div class=\"text-1 text-center\">\r\n          <p class=\"property-text\">Internal Returns Rate</p>\r\n        </div>\r\n      </div>\r\n      <div class=\"icon-text w-18\">\r\n        <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n          <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n                    <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n                </ng-container> -->\r\n          <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.annualReturn }}%</p>\r\n        </div>\r\n        <div class=\"text-1 text-center\">\r\n          <p class=\"property-text\">Annual Returns</p>\r\n        </div>\r\n      </div>\r\n      <div class=\"icon-text w-18\">\r\n        <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n          <ng-container>\r\n            <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/273918c1739173355725checked%201.png\" alt=\"Icon\" class=\"tick-img\">\r\n          </ng-container>\r\n          <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.annualReturn }}%</p>\r\n        </div>\r\n        <div class=\"text-1 text-center\">\r\n          <p class=\"property-text\">Guaranteed annual capital growth</p>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"about-section w-70 d-flex g-40\">\r\n    <div class=\"right w-60 \">\r\n      <div class=\"about-property\">\r\n        <div class=\"head-about-property\">About Property</div>\r\n        <div class=\"about-property-text\">{{propertyDetails.description}}</div>\r\n        <div class=\"about-property-details d-flex gap-10\">\r\n          <ng-container>\r\n            <div class=\"gap-10 d-flex\">\r\n              <div class=\"right-text\">Property Type: </div>\r\n              <div class=\"left-text\">{{propertyDetails.propertyType}}</div>\r\n            </div>\r\n            <div class=\"gap-10 d-flex\">\r\n              <div class=\"right-text\">Property Size:</div>\r\n              <div class=\"left-text\">{{propertyDetails.totalAreaSqFeet}}</div>\r\n            </div>\r\n            <div class=\"gap-10 d-flex\">\r\n              <div class=\"right-text\">year:</div>\r\n              <div class=\"left-text\">{{propertyDetails.year}}</div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <div class=\"about-property\" *ngIf=\"(propertyDetails?.benefits?.length || 0) > 0\">\r\n        <div class=\"head-about-property\">Investment Benefit</div>\r\n        <div class=\"card-container d-flex gap-10\">\r\n          <ng-container *ngFor=\"let benefits of propertyDetails.benefits\">\r\n            <div class=\"cards\">\r\n              <div class=\"image-container w-100 d-flex justify-content-center\">\r\n                <img [src]=\"benefits.imgUrl\" alt=\"\">\r\n              </div>\r\n              <div class=\"card-head\">{{benefits.title}}</div>\r\n              <div class=\"card-text\">{{benefits.description}}</div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <div class=\"about-property\">\r\n        <div class=\"head-about-property\">Documents & Reports</div>\r\n        <div class=\"file-container d-flex justify-content-between gap-10\">\r\n          <div class=\"file d-flex justify-content-between\" *ngFor=\"let ele of pdfCards\">\r\n            <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/678394c1739183726107image%209.png\"\r\n              alt=\"pdf\">\r\n            <div class=\"doc-text w-75 d-flex align-items-center\"> {{ele.length > 15 ?\r\n              ele.substring(0,15)+'...' : ele }}</div>\r\n            <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/195414c1739183779845fi_3502477.png\"\r\n              alt=\"download\" class=\"download-img\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"left w-40\">\r\n      <div class=\"sqft\">\r\n        <div class=\"head-about-property\">Buy SQFT</div>\r\n        <div class=\"price justify-content-between d-flex\">\r\n          <div class=\"left-price\">Price/Sq.ft</div>\r\n          <div class=\"right-price\">\u20B9{{sqft}}</div>\r\n        </div>\r\n        <div class=\"sqft-quantity d-flex justify-content-between w-100 align-items-center\">\r\n          <div class=\"left-sqft\">SQFT Quantity</div>\r\n          <div class=\"right-sqft d-flex align-items-center\">\r\n            <mat-icon (click)=\"noOfSqft > 0 ? noOfSqft = noOfSqft - 1 : noOfSqft = 0\"\r\n              class=\"d-flex align-items-center justify-content-center icon\">remove</mat-icon>\r\n            <div class=\"sqft-number d-flex justify-content-center\"><input type=\"number\" [(ngModel)]=\"noOfSqft\"\r\n                class=\"sqft-number additional-properties-2 text-center p-0 \"></div>\r\n            <mat-icon (click)=\"noOfSqft = noOfSqft + 1\"\r\n              class=\"d-flex align-items-center justify-content-center icon\">add</mat-icon>\r\n          </div>\r\n        </div>\r\n        <div class=\"payable d-flex justify-content-between align-items-center w-100\">\r\n          <div class=\"payable-left\">\r\n            <p class=\"pay-text\">Payable Amount</p><span class=\"pay-subtext\">(Incl. Fees & Other\r\n              Levies)</span>\r\n          </div>\r\n          <div class=\"payable-right\">\r\n            \u20B9{{ noOfSqft * sqft}}\r\n          </div>\r\n        </div>\r\n        <div class=\"buy\">\r\n          Buy SQFT\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}.main-container{overflow-x:hidden}mat-icon{font-family:Material Icons!important}.property-numbers{padding:40px 60px 10px;background:#f2910b}.number-text{font-weight:700;font-size:35px;line-height:40px;color:#102031;font-family:DM Sans}.property-text{font-size:20px;font-weight:600;line-height:28px;color:#ffffffe6}.w-18{width:18%}.last-card{width:21%}.w-70{width:70%}.about-section{margin:30px auto}.about-property{background:#fff;border:1px solid rgba(0,0,0,.03);border-radius:10px;padding:10px;margin-bottom:15px}.head-about-property{font-weight:600;font-size:16px;line-height:26px;margin-bottom:10px}.about-property-text{font-weight:400;font-size:16px;line-height:29px;color:#01161eb3}.gap-10{gap:10px}.w-60{width:60%}.about-property-details{width:100%;justify-content:space-between;padding:13px 10px;background:#f6f5f5;border-radius:7px;margin-top:15px;margin-bottom:5px}.right-text{font-weight:500;font-size:16px;line-height:20px;color:#01161ecc}.left-text{font-weight:600;font-size:16px;line-height:20px;color:#01161e}.cards{width:30%;background:#f9fbff;border-radius:10px;padding:15px}.card-head{font-weight:600;font-size:16px;line-height:25px;text-align:center;overflow:hidden;text-overflow:ellipsis}.card-text{font-size:14px;font-weight:500;line-height:25px;text-align:center;overflow:hidden;text-overflow:ellipsis}.image-container img{height:8vh}.file{background:#f7f7f7;border-radius:5px;padding:12px;width:50%}.w-75{width:75%}.doc-text{font-size:16px;font-weight:500;line-height:26px;color:#000}.download-image{width:28px}.g-40{gap:40px}.w-40{width:40%}.sqft{background:linear-gradient(180deg,#0d1b2a,#172b40);color:#fff;width:85%;border-radius:8px;padding:15px}.right-price{width:50%;color:#fc9a11;font-size:28px;font-weight:700;line-height:32px;text-align:end}.left-price{width:50%;font-size:18px;font-weight:600;line-height:32px}.price{display:flex;background:#263f5a;border-radius:8px;padding:15px 10px}.buy{background:#36b37e;color:#fff;padding:15px;border-radius:8px;font-size:15px;font-weight:700;line-height:20px;text-align:center}.payable{padding:10px;background:#ffffffb3;border-radius:8px;margin-bottom:10px}.pay-text{font-size:14px;line-height:20px;font-weight:600;color:#000;margin-bottom:unset;border-radius:8px}.pay-subtext{font-size:10px;font-weight:500;color:#0006}.payable-right{font-weight:700;font-size:22px;line-height:32px;color:#fff}.card-container{overflow-x:scroll}.sqft-quantity{padding:15px 2px}.left-sqft{font-weight:600;font-size:16px;line-height:32px;color:#fff}.right-sqft{padding:4px;background:#f8a938;border-radius:4px;width:50%}.icon{font-size:16px;font-weight:700;color:#000;line-height:19px;width:30%;margin:0 2px}.sqft-number{background:#fff;width:70%;border-radius:4px;font-weight:700;font-size:20px;line-height:19px;color:#000;padding:10px;outline:unset}.tick-img{width:30px}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%;padding:30px}.pname{font-weight:600;font-size:34px;line-height:44px;color:#fff}.plocation{font-size:16px;font-weight:500;line-height:12px;color:#fff9}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.additional-properties-2{border:unset}.gap-5{gap:5px!important}@media screen and (max-width : 475px){.property-numbers{flex-wrap:wrap;width:100%;padding:15px!important;margin-bottom:15px}.icon-text{width:50%}.last-card{width:100%!important}.right-text,.left-text{white-space:nowrap}.card-container{flex-direction:column;gap:10px;align-items:center}.cards{width:70%}.about-section{flex-direction:column;width:100%!important;margin:unset!important}.right{width:100%!important}.about-property{width:100%;border:none!important}.left{width:100%;margin:10px}.file-container{flex-direction:column}.file{width:100%!important}.sqft{width:95%}.height-30{height:30vh}.about-property-details{display:grid!important;width:100%}.propertyName{padding:10px!important}.pname{font-size:21px;line-height:10px}.additional-properties{height:1vh;width:8px!important}.number-text{font-size:26px}.property-text{font-size:18px}.head-about-property{text-align:center}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
+        }], ctorParameters: () => [{ type: RestService }, { type: i2$2.ActivatedRoute }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
+class SignupSigninComponent extends BaseSection {
+    constructor(_eventService, restService, router, activatedRoute, messageService) {
+        super();
+        this._eventService = _eventService;
+        this.restService = restService;
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this.messageService = messageService;
+        this.currentPage = 'LOGIN';
+        this.backgroundImage = "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/500415c1739434186310image%2016.png";
+        this.otpArray = new Array(4).fill('');
+        this.loginOtpArray = new Array(4).fill('');
+        this.loginEmail = '';
+        this.investor = {
+            "fullName": "",
+            "emailId": "",
+            "phoneNumber": "",
+            "password": "",
+            "kycVerified": false,
+            "active": true,
+            "otp": "",
+            "deleted": false
+        };
+        this.otpSent = false;
+    }
+    ngOnInit() {
+        this.activatedRoute.queryParams.subscribe((param) => {
+            if (param['type'])
+                this.currentPage = param['type'];
+        });
+    }
+    editSection() {
+        this._eventService.toggleEditorEvent.emit(false);
+        setTimeout(() => {
+            this._eventService.editSection.emit({ data: this.data });
+        }, 100);
+    }
+    move(event, idx) {
+        if (isNaN(Number(event.key)) && event.code != "Backspace")
+            return;
+        if (event.code != "Backspace") {
+            this.otpArray[idx] = event.key;
+            document.getElementById("otp_" + (idx + 1))?.focus();
+        }
+        if (event.code == "Backspace" && !this.otpArray[idx]) {
+            document.getElementById("otp_" + (idx - 1))?.focus();
+        }
+    }
+    moveLoginOtpCursor(event, idx) {
+        if (isNaN(Number(event.key)) && event.code != "Backspace")
+            return;
+        if (event.code != "Backspace") {
+            this.loginOtpArray[idx] = event.key;
+            document.getElementById("loginOtp_" + (idx + 1))?.focus();
+        }
+        if (event.code == "Backspace" && !this.otpArray[idx]) {
+            document.getElementById("loginOtp_" + (idx - 1))?.focus();
+        }
+    }
+    buttonClickedEvent() {
+        if (this.currentPage === 'SIGN_UP') {
+            this.sendOtp();
+        }
+        if (this.currentPage === 'OTP_VERIFY') {
+            this.signUp();
+        }
+        if (this.currentPage === 'LOGIN') {
+            this.loginWithPassword();
+        }
+    }
+    signUp() {
+        this.otpArray.forEach((otp) => {
+            this.investor.otp += otp;
+        });
+        this.restService.signUp(this.investor).subscribe((res) => {
+            this.messageService.add({ severity: 'success', summary: 'Sign Up', detail: 'Sign up Successfully' });
+            this.currentPage = 'LOGIN';
+        });
+    }
+    sendOtp() {
+        this.restService.sendOtp(this.investor.emailId).subscribe((res) => {
+            this.messageService.add({ severity: 'success', summary: 'OTP', detail: 'Otp Sent Successfully' });
+            this.currentPage = 'OTP_VERIFY';
+        });
+    }
+    loginWithPassword() {
+        this.restService.login(this.loginEmail, this.investor.password).subscribe((res) => {
+            this.messageService.add({ severity: 'success', summary: 'Log In', detail: 'Logged in successfully' });
+            localStorage.setItem('investerId', res.investorId);
+            this.router.navigate(['']);
+        });
+    }
+    sendOtpForLogin() {
+        this.otpSent = false;
+        this.restService.sendOtp(this.loginEmail).subscribe((res) => {
+            this.otpSent = true;
+            this.messageService.add({ severity: 'success', summary: 'OTP', detail: 'Otp Sent Successfully' });
+        });
+    }
+    verifyOtp() {
+        let logInOtp = '';
+        this.loginOtpArray.forEach((otp) => {
+            logInOtp += otp;
+        });
+        this.restService.verifyOtp(this.loginEmail, logInOtp).subscribe((res) => {
+            this.messageService.add({ severity: 'success', summary: 'Log In', detail: 'Logged in successfully' });
+        });
+    }
+    isValidEmail(email) {
+        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+        return emailRegex.test(email);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SignupSigninComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i5$2.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SignupSigninComponent, isStandalone: true, selector: "simpo-signup-signin", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" class=\"main-container h-85 d-flex align-items-center justify-content-center\"\r\n  [ngStyle]=\"{'background-image': 'url(' + backgroundImage + ')'}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"middle-container w-40-85\" [id]=\"data?.id\" [simpoBackground]=\"data?.styles?.background\"\r\n    [simpoAnimation]=\"data?.styles?.animation\" [simpoCorner]=\"data?.styles?.corners\">\r\n    <div class=\"head\">{{ currentPage == 'LOGIN' || currentPage == 'OTP' ? \"Sign In\" : currentPage ==\r\n      'FORGOT_PASSWORD' ? \"Forgot Password\" : currentPage == 'OTP_VERIFY' ? \"OTP Verfication\" : \"Sign Up\"}}</div>\r\n    <div class=\"field-container\">\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n        <div class=\"field-head\">Email or Phone Number</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Registered Email or Phone number\" [(ngModel)]=\"loginEmail\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP' && otpSent\">\r\n        <div class=\"field-head\">OTP</div>\r\n        <div class=\"field-text-1\">\r\n          <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n            <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n              <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n                [(ngModel)]=\"loginOtpArray[idx]\" (keyup)=\"moveLoginOtpCursor($event, idx)\" [id]=\"'loginOtp_'+idx\" #otpInput />\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP_VERIFY'\">\r\n        <!-- <div class=\"field-head\" *ngIf=\"currentPage == 'OTP' \">OTP</div> -->\r\n        <div class=\"field-text-1\">\r\n          <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n            <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n              <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n                [(ngModel)]=\"otpArray[idx]\" (keyup)=\"move($event, idx)\" [id]=\"'otp_'+idx\" #otpInput />\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n        <div class=\"field-head\">Name</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Name\" [(ngModel)]=\"investor.fullName\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n        <div class=\"field-head\">Email</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Email\" [(ngModel)]=\"investor.emailId\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n        <div class=\"field-head\">Phone Number</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Phone Number\" [(ngModel)]=\"investor.phoneNumber\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"field-head\">Old Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Enter Your Password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"field-head\">New Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Enter Your Password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"field-head\">Re-Enter Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Re-Enter Your Password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'SIGN_UP' \">\r\n        <div class=\"field-head\">Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"investor.password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"currentPage == 'LOGIN'\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">Forgot Password?</div>\r\n      <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"currentPage == 'OTP_VERIFY'\">Resend OTP?</div>\r\n      <div class=\"btn-container d-flex align-items-center justify-content-center\">\r\n        <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage != 'OTP'\"\r\n          [class.btn-size]=\"currentPage == 'FORGOT_PASSWORD' || currentPage == 'SIGN_UP' || currentPage == 'OTP_VERIFY'\"\r\n          (click)=\"buttonClickedEvent()\">{{ currentPage ==\r\n          'LOGIN' ? \"Login\" : currentPage == 'FORGOT_PASSWORD' ? \"Reset Password\" :\r\n          currentPage == 'OTP_VERIFY' ? 'Verify OTP' : \"Create Account\"}}</button>\r\n\r\n        <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP' && !otpSent\"\r\n         (click)=\"sendOtpForLogin()\">Send Otp</button>\r\n\r\n        <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP' && otpSent\"\r\n         (click)=\"verifyOtp()\">Login</button>\r\n      </div>\r\n      <div class=\"another-page\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n        <div class=\"signup-text\">Don\u2019t have an account? <span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'SIGN_UP'\">Sign\r\n            Up</span></div>\r\n        <div class=\"signup-text m-5\">or</div>\r\n        <div class=\"signup-text\">Login with <span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'LOGIN' \"\r\n            (click)=\"currentPage = 'OTP'\">OTP</span><span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP'\"\r\n            (click)=\"currentPage = 'LOGIN'\">Password</span></div>\r\n      </div>\r\n      <div class=\"another-page\" *ngIf=\"currentPage == 'SIGN_UP' || currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"signup-text\">Already have an account? <span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'LOGIN'\">Sign\r\n            In</span></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}.h-85{height:85vh;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.w-40-85{width:40%}.btn-size{width:40%!important}.head{font-size:36px;font-weight:600;line-height:52px;color:#112133;text-align:center;padding:15px;padding-bottom:unset}.field-container{padding:15px}.field-head{margin-bottom:10px;font-size:17px;font-weight:600;line-height:24px;color:#2c2c2c}.field-text{padding:10px;border-radius:20px;font-size:15px;font-weight:400;color:#ababab;background:#fff}.field-text input{width:100%;border:none;appearance:none;outline:unset;background:#fff}.forgot-password{text-align:end;font-size:16px;font-weight:600;line-height:24px;margin-bottom:15px}.another-page{margin-top:15px;text-align:center}.signup-text{color:#6b6b6b;font-size:14px;font-weight:400;line-height:24px;margin-bottom:5px}.m-5{margin:5px 0!important}.mb-30{margin-bottom:30px!important}.mb-15{margin-bottom:15px!important}.login-btn{border:unset;padding:12px 18px;border-radius:6px;font-size:18px!important;font-weight:600;line-height:20px}.span-text{font-weight:700!important}.cursor-pointer{cursor:pointer}.additional-styles{padding:15px 5px!important;width:9%!important;border:unset!important;border-radius:20px!important}@media screen and (max-width : 475px){.w-40-85{width:85%}.h-86{height:90vh!important}.btn-size{width:100%!important;white-space:nowrap}.additional-styles{width:15%!important;border-radius:10px!important}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: 
+                //Directives
+                BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SignupSigninComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-signup-signin', standalone: true, imports: [
+                        CommonModule,
+                        SimpoComponentModule,
+                        HoverElementsComponent,
+                        DeleteHoverElementComponent,
+                        HoverDirective,
+                        FormsModule,
+                        //Directives
+                        BackgroundDirective,
+                        AnimationDirective,
+                        CornerDirective
+                    ], providers: [MessageService], template: "<section [id]=\"data?.id\" class=\"main-container h-85 d-flex align-items-center justify-content-center\"\r\n  [ngStyle]=\"{'background-image': 'url(' + backgroundImage + ')'}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"middle-container w-40-85\" [id]=\"data?.id\" [simpoBackground]=\"data?.styles?.background\"\r\n    [simpoAnimation]=\"data?.styles?.animation\" [simpoCorner]=\"data?.styles?.corners\">\r\n    <div class=\"head\">{{ currentPage == 'LOGIN' || currentPage == 'OTP' ? \"Sign In\" : currentPage ==\r\n      'FORGOT_PASSWORD' ? \"Forgot Password\" : currentPage == 'OTP_VERIFY' ? \"OTP Verfication\" : \"Sign Up\"}}</div>\r\n    <div class=\"field-container\">\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n        <div class=\"field-head\">Email or Phone Number</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Registered Email or Phone number\" [(ngModel)]=\"loginEmail\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP' && otpSent\">\r\n        <div class=\"field-head\">OTP</div>\r\n        <div class=\"field-text-1\">\r\n          <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n            <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n              <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n                [(ngModel)]=\"loginOtpArray[idx]\" (keyup)=\"moveLoginOtpCursor($event, idx)\" [id]=\"'loginOtp_'+idx\" #otpInput />\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP_VERIFY'\">\r\n        <!-- <div class=\"field-head\" *ngIf=\"currentPage == 'OTP' \">OTP</div> -->\r\n        <div class=\"field-text-1\">\r\n          <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n            <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n              <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n                [(ngModel)]=\"otpArray[idx]\" (keyup)=\"move($event, idx)\" [id]=\"'otp_'+idx\" #otpInput />\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n        <div class=\"field-head\">Name</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Name\" [(ngModel)]=\"investor.fullName\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n        <div class=\"field-head\">Email</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Email\" [(ngModel)]=\"investor.emailId\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n        <div class=\"field-head\">Phone Number</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"text\" placeholder=\"Please Enter Your Phone Number\" [(ngModel)]=\"investor.phoneNumber\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"field-head\">Old Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Enter Your Password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"field-head\">New Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Enter Your Password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"field-head\">Re-Enter Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Re-Enter Your Password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'SIGN_UP' \">\r\n        <div class=\"field-head\">Password</div>\r\n        <div class=\"field-text\">\r\n          <input type=\"password\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"investor.password\">\r\n        </div>\r\n      </div>\r\n      <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"currentPage == 'LOGIN'\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">Forgot Password?</div>\r\n      <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n        *ngIf=\"currentPage == 'OTP_VERIFY'\">Resend OTP?</div>\r\n      <div class=\"btn-container d-flex align-items-center justify-content-center\">\r\n        <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage != 'OTP'\"\r\n          [class.btn-size]=\"currentPage == 'FORGOT_PASSWORD' || currentPage == 'SIGN_UP' || currentPage == 'OTP_VERIFY'\"\r\n          (click)=\"buttonClickedEvent()\">{{ currentPage ==\r\n          'LOGIN' ? \"Login\" : currentPage == 'FORGOT_PASSWORD' ? \"Reset Password\" :\r\n          currentPage == 'OTP_VERIFY' ? 'Verify OTP' : \"Create Account\"}}</button>\r\n\r\n        <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP' && !otpSent\"\r\n         (click)=\"sendOtpForLogin()\">Send Otp</button>\r\n\r\n        <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP' && otpSent\"\r\n         (click)=\"verifyOtp()\">Login</button>\r\n      </div>\r\n      <div class=\"another-page\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n        <div class=\"signup-text\">Don\u2019t have an account? <span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'SIGN_UP'\">Sign\r\n            Up</span></div>\r\n        <div class=\"signup-text m-5\">or</div>\r\n        <div class=\"signup-text\">Login with <span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'LOGIN' \"\r\n            (click)=\"currentPage = 'OTP'\">OTP</span><span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP'\"\r\n            (click)=\"currentPage = 'LOGIN'\">Password</span></div>\r\n      </div>\r\n      <div class=\"another-page\" *ngIf=\"currentPage == 'SIGN_UP' || currentPage == 'FORGOT_PASSWORD'\">\r\n        <div class=\"signup-text\">Already have an account? <span class=\"span-text cursor-pointer\"\r\n            [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'LOGIN'\">Sign\r\n            In</span></div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}.h-85{height:85vh;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.w-40-85{width:40%}.btn-size{width:40%!important}.head{font-size:36px;font-weight:600;line-height:52px;color:#112133;text-align:center;padding:15px;padding-bottom:unset}.field-container{padding:15px}.field-head{margin-bottom:10px;font-size:17px;font-weight:600;line-height:24px;color:#2c2c2c}.field-text{padding:10px;border-radius:20px;font-size:15px;font-weight:400;color:#ababab;background:#fff}.field-text input{width:100%;border:none;appearance:none;outline:unset;background:#fff}.forgot-password{text-align:end;font-size:16px;font-weight:600;line-height:24px;margin-bottom:15px}.another-page{margin-top:15px;text-align:center}.signup-text{color:#6b6b6b;font-size:14px;font-weight:400;line-height:24px;margin-bottom:5px}.m-5{margin:5px 0!important}.mb-30{margin-bottom:30px!important}.mb-15{margin-bottom:15px!important}.login-btn{border:unset;padding:12px 18px;border-radius:6px;font-size:18px!important;font-weight:600;line-height:20px}.span-text{font-weight:700!important}.cursor-pointer{cursor:pointer}.additional-styles{padding:15px 5px!important;width:9%!important;border:unset!important;border-radius:20px!important}@media screen and (max-width : 475px){.w-40-85{width:85%}.h-86{height:90vh!important}.btn-size{width:100%!important;white-space:nowrap}.additional-styles{width:15%!important;border-radius:10px!important}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
+        }], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i5$2.MessageService }], propDecorators: { data: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], edit: [{
+                type: Input
+            }], delete: [{
+                type: Input
+            }] } });
+
 class SimpoWrapComntainer {
     constructor(eventService, el) {
         this.eventService = eventService;
@@ -10471,7 +10794,6 @@ class ProductDescComponent extends BaseSection {
                     if (itemVariant) {
                         this.responseData.itemImages = itemVariant.variantImages;
                     }
-                    console.log("Description", this.responseData?.name, this.responseData?.descriptor?.name);
                     this.titleService.setTitle(this.responseData?.name);
                     if (this.responseData) {
                         this.itemImages = this.responseData.itemImages;
@@ -10515,7 +10837,6 @@ class ProductDescComponent extends BaseSection {
                         });
                         this.currentImg = this.responseData?.itemImages?.[0]?.imgUrl;
                         this.getProductByCategory();
-                        console.log(this.responseData);
                     }
                 });
             }
@@ -10536,9 +10857,7 @@ class ProductDescComponent extends BaseSection {
             let foundVarient = true;
             Object.keys(varient.properties).forEach((property) => {
                 foundVarient = (this.selectedVarient.get(property) == varient.properties[property]) && foundVarient;
-                console.log(this.selectedVarient.get(property), varient.properties[property]);
             });
-            console.log(foundVarient);
             if (foundVarient) {
                 this.itemImages = varient.variantImages;
                 this.currentImg = this.itemImages[0]?.imgUrl;
@@ -10891,7 +11210,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
 
 class ProductListComponent extends BaseSection {
     onWindowScroll(event) {
-        console.log("scrolling");
         this.scrollingValue = window.pageYOffset || document.documentElement.scrollTop;
     }
     constructor(platformId, _eventService, restService, router, activatedRoute, storageService, matBottomSheet, matDialog, cartService, messageService) {
@@ -10983,12 +11301,10 @@ class ProductListComponent extends BaseSection {
         const collections = qCollections?.split("+")?.map((collection) => collection.replaceAll("_", " ").toLowerCase()).filter((collection) => collection.length > 0);
         this.categories?.forEach((category) => category.status = categories?.includes(category?.option?.toLowerCase()) ?? false);
         this.collections?.forEach((collection) => collection.status = collections?.includes(collection?.option?.toLowerCase()) ?? false);
-        console.log(this.categories, this.collections);
         this.filterList = [
             ...this.categories?.filter((category) => category.status).map((category) => { return { id: category.id, name: category.option }; }),
             ...this.collections?.filter((collection) => collection.status).map((collection) => { return { id: collection.id, name: collection.option }; })
         ];
-        console.log(this.filterList);
         this.filterItemList();
     }
     getAllCategories() {
@@ -11421,16 +11737,13 @@ class WhislistComponent extends BaseSection {
                 this.wishlistInfo["cartId"] = response.data?.[0]?.cartId;
                 if (response.data?.[0]?.orderedItems?.length) {
                     this.storageService.addAllProductToWishlist(tempUserWishlist).oncomplete = () => {
-                        console.log(tempUserWishlist);
                         this.storageService.getUserWhishlist().then((wishtlistResponse) => {
                             wishtlistResponse.onsuccess = (wishlistData) => {
                                 const wishlistResponse = this.restService.addItemToDB(this.wishlistInfo).toPromise();
                                 wishlistResponse.finally(() => {
-                                    console.log("wishtlist Data", wishlistData);
                                     this.USER_WISHLIST_ITEMS = wishlistData.target.result;
                                     this.wishlistInfo.orderedItems = this.USER_WISHLIST_ITEMS;
                                     this.responseData = this.wishlistInfo;
-                                    console.log(this.responseData);
                                 });
                             };
                         });
@@ -11482,7 +11795,6 @@ class WhislistComponent extends BaseSection {
         const transaction = this.storageService.addProductToCart(product);
         transaction.onsuccess = (wishlistResponse) => {
             this.storageService.removeProductFromWishlist(product.itemId).onsuccess = (wislistResponse) => {
-                console.log("Success");
                 // this.storageService.addProductToCart(product).onsuccess = (cartResponse) => {
                 this.USER_WISHLIST_ITEMS = this.USER_WISHLIST_ITEMS.filter((item) => item.varientId != product.varientId);
                 this.wishlistInfo.orderedItems = this.USER_WISHLIST_ITEMS;
@@ -11592,7 +11904,6 @@ class OrderDetailsComponent {
     }
     ngOnInit() {
         this.styles = this.data?.styles;
-        console.log(this.orderDetailData);
         this.orderTimiline = this.orderDetailData?.brandOrderDetails?.[0]?.timeLineList?.map((timeline) => {
             return {
                 icon: this.getIcon(timeline.orderStatus),
@@ -11790,7 +12101,6 @@ class UserProfileComponent extends BaseSection {
             ;
         };
         transaction.onerror = () => {
-            console.log("Error");
         };
     }
     moveToCart(product) {
@@ -11799,7 +12109,6 @@ class UserProfileComponent extends BaseSection {
         const transaction = this.storageService.addProductToCart(product);
         transaction.onsuccess = (wishlistResponse) => {
             this.storageService.removeProductFromWishlist(product.varientId).onsuccess = (wislistResponse) => {
-                console.log("Success");
                 this.storageService.addProductToCart(product).onsuccess = (cartResponse) => {
                     this.wishlistData = this.wishlistData.filter((item) => item.varientId != product.varientId);
                 };
@@ -11922,7 +12231,6 @@ class UserProfileComponent extends BaseSection {
     }
     getScreenSize(event) {
         this.screenWidth = window.innerWidth;
-        // console.log(this.scrHeight, this.scrWidth);
     }
     editProfile() {
         if (this.screenWidth > 475) {
@@ -11946,7 +12254,6 @@ class UserProfileComponent extends BaseSection {
         }
     }
     logout() {
-        console.log("Logout");
         Swal.fire({
             icon: "warning",
             title: "Thanks for choosing us",
@@ -12481,7 +12788,6 @@ class VerifyComponent extends BaseSection {
         this.MAX_API_COUNT = 20;
     }
     ngOnInit() {
-        console.log(this.data);
         this.content = this.data?.content;
         this.styles = this.data?.styles;
         this.userDetails = this.storageService.getUser();
@@ -12540,7 +12846,6 @@ class VerifyComponent extends BaseSection {
                         this.router.navigate(['/']);
                     }
                 });
-                console.log("Failed to get Status");
             }
             else {
                 this.checkPaymentStatus();
@@ -13176,5 +13481,5 @@ class Product {
  * Generated bundle index. Do not edit.
  */
 
-export { AddNewSectionComponent, AlignContent, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, EndUserService, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, ServiceSectionComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData };
+export { AddNewSectionComponent, AlignContent, AnimationDirective, AppointmentFormComponent, AuthenticateUserComponent, AuthenticationRequiredComponent, BANNERALIGNMENT, BANNERHALIGN, BackgroundDirective, BannerCarouselComponent, BannerContentFitDirective, BannerGridSectionComponent, BannerSectionComponent, BlogListComponent, BorderDirective, ButtonDirectiveDirective, CarouselBannerComponent, Cart, CartComponent, Category, CategoryProductComponent, ChannelType, CheckoutComponent, ChooseUsSectionComponent, Collection, ColorDirective, ColumnDirectiveDirective, ContactUsComponent, ContainerFitDirective, ContentFitDirective, CornerDirective, Corners, CustomerReviewComponent, DeviderType, EndUserService, EventsService, FaqSectionComponent, FeaturedCategoryComponent, FeaturedCollectionComponent, FeaturedProductsComponent, FeaturesSectionComponent, FooterSectionComponent, FooterTypes, HALIGN, HEADER_STYLING, HeaderButtonStyle, HeaderTextComponent, HoverDirective, ImageCarouselSectionComponent, ImageDirectiveDirective, ImageFit, ImageGridSectionComponent, ImageRatio, ImageSectionComponent, LocationSectionComponent, LogoGalleryComponent, LogoShowcaseComponent, MapType, NavbarSectionComponent, ObjectPositionDirective, OverlayDirective, OverlayValue, Padding, PositionLayoutDirectiveDirective, PricingSectionComponent, ProcessModernComponent, ProcessSectionComponent, Product, ProductCardTheme, ProductCategoryListComponent, ProductDescComponent, ProductListComponent, PropertyComponentComponent, PropertyDetailComponent, PropertyListComponent, RecentBlogPostSectionComponent, RedirectionLinkType, RegistrationFormComponent, RemoveCarouselDirective, SPACING$1 as SPACING, SPACINGALIGN, SanitizeHtmlPipe, ServiceSectionComponent, SignupSigninComponent, SimpoContainerAligment, SimpoFooterLayoutDirective, SimpoStickyDirective, SkeletonLoaderSectionComponent, SpacingAroundDirective, Style, TEXT_SIZE, TeamMemberSectionComponent, TestimonialFullwidthComponent, TestimonialSectionComponent, TestimonialVideoComponent, TextBackgroundDirectiveDirective, TextImageSectionComponent, TextPosition, TextSectionComponent, UserProfileComponent, UspVideoSectionComponent, VALIGN, VerifyComponent, VideoSectionComponent, ViewBlogComponent, WhislistComponent, animation, applySpacing, applyStyle, cartType, contentAlignment, fitContent, fitScreen, fontSize, logoDirection, logoSpeed, logoType, mapStyle, showCaseType, simpoConetenAlignmentDirective, svgData };
 //# sourceMappingURL=simpo-component-library.mjs.map