simpo-component-library 2.2.2 → 2.2.221

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/esm2022/lib/sections/navbar-section/navbar-section.component.mjs +14 -5
  2. package/fesm2022/simpo-component-library.mjs +414 -406
  3. package/fesm2022/simpo-component-library.mjs.map +1 -1
  4. package/lib/directive/background-directive.d.ts +1 -1
  5. package/lib/directive/button-directive.directive.d.ts +1 -1
  6. package/lib/directive/color.directive.d.ts +1 -1
  7. package/lib/sections/navbar-section/navbar-section.component.d.ts +2 -0
  8. package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
  9. package/package.json +1 -1
  10. package/simpo-component-library-2.2.221.tgz +0 -0
  11. package/simpo-component-library-2.2.2.tgz +0 -0
package/fesm2022/simpo-component-library.mjs CHANGED
@@ -5882,8 +5882,392 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
5882
5882
  type: Input
5883
5883
  }] } });
5884
5884
 
5885
+ class PropertyViewComponent {
5886
+ constructor() {
5887
+ this.text = "";
5888
+ this.propertyDetails = {
5889
+ propertyImage: ["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", "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png"],
5890
+ propertyName: "Ananta One - Blue Moon",
5891
+ propertyLocation: "RRR Hyderabad, Telangana",
5892
+ investedDate: "12 Jun 2024",
5893
+ type: "Rental",
5894
+ share: "1.40%",
5895
+ documents: ["Title deed", "Property Registration Certificate"],
5896
+ 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.",
5897
+ managedBy: [{ img: "https://media.istockphoto.com/id/1410538853/photo/young-man-in-the-public-park.jpg?s=612x612&w=0&k=20&c=EtRJGnNOFPJ2HniBSLWKzsL9Xf7GHinHd5y2Tx3da0E=", name: "Vijay Shankar", role: "Property Manager" }, { img: "https://t3.ftcdn.net/jpg/01/86/40/16/360_F_186401650_6tXxwc5x3pwuA9bYjJG65l9pCFRIAu06.jpg", name: "Sanjana", role: "Operational Manager" }],
5898
+ invested: "₹4.1 L",
5899
+ totalSqft: "32",
5900
+ irr: "12%",
5901
+ imv: "₹4.1 L",
5902
+ income: "+₹52 k",
5903
+ projectedValue: "₹5.21 L",
5904
+ potentialApperciation: "8%",
5905
+ guaranteedGrowth: "5%",
5906
+ marketMovement: "High"
5907
+ };
5908
+ }
5909
+ ngOnInit() {
5910
+ console.log(this.text);
5911
+ }
5912
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5913
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertyViewComponent, isStandalone: true, selector: "simpo-property-view", inputs: { text: "text" }, ngImport: i0, template: "<div class=\"main-container w-100 d-flex gap-10\">\r\n <div class=\"left-container w-60\">\r\n <div class=\"property-detail common-style1\">\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide p-relative w-35\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let ele of propertyDetails.propertyImage;let i = index\">\r\n <div class=\"carousel-item active\" [class.active]=\"i\" data-bs-interval=\"3000\">\r\n <img [src]=\"ele\" class=\"d-block w-100 height-30 br-10\" alt=\"property-image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-center\">\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <ng-container *ngFor=\"let ele of propertyDetails.propertyImage;let i = index\">\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\"\r\n [attr.data-bs-slide-to]=\"i\" class=\"active additional-properties\" aria-current=\"true\"\r\n aria-label=\"Slide 1\"></button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"details mt-10\">\r\n <div class=\"top-details d-flex justify-content-between\">\r\n <div class=\"top-left\">\r\n <div class=\"main-text\">{{propertyDetails.propertyName}}</div>\r\n <div class=\"span-text\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\"\r\n alt=\"location image\" width=\"15px\">RRR Hyderabad, Telangana</div>\r\n </div>\r\n <div class=\"top-right d-flex gap-10\">\r\n <div class=\"buy-more common-style2\">\r\n Buy More SQFT\r\n </div>\r\n <div class=\"sell common-style2\">\r\n Sell SQFT\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"bottom-details d-flex gap-10 mt-10 justify-content-center\">\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Invested Date</div>\r\n <div class=\"right\">{{propertyDetails.investedDate}}</div>\r\n </div>\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Property Type</div>\r\n <div class=\"right\">{{propertyDetails.type}}</div>\r\n </div>\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Ownership Share</div>\r\n <div class=\"right\">{{propertyDetails.share}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"common-style1\">\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 propertyDetails.documents\">\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 class=\"common-style1\">\r\n <div class=\"head-about-property\">About Property</div>\r\n <div class=\"about-property-text\">{{propertyDetails.description}}</div>\r\n <div class=\"head-about-property\">Property Managed by</div>\r\n <div class=\"managed-cards d-flex gap-10 w-100\">\r\n <div class=\"card-container br-10\" *ngFor=\"let ele of propertyDetails.managedBy\">\r\n <div class=\"img-container d-flex justify-content-center\">\r\n <img [src]=\"ele.img\" alt=\"Manager Image\" class=\"manage-img\">\r\n </div>\r\n <div class=\"card-details\">\r\n <p class=\"name-text text-center mt-10\">{{ele.name}}</p>\r\n <p class=\"role-text text-center\">{{ele.role}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-container w-40\">\r\n <div class=\"right-content\">\r\n <div class=\"right-head\">Holdings Details</div>\r\n <div class=\"holding-details common-style3\">\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails.invested}}</div>\r\n <div class=\"bottom\">Invested</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails.totalSqft}}</div>\r\n <div class=\"bottom\">Sq.ft</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails.irr}}</div>\r\n <div class=\"bottom\">Indicative Market Value</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails.imv}}</div>\r\n <div class=\"bottom\">Internal Returns Rate</div>\r\n </div>\r\n </div>\r\n <div class=\"income br-0-10\">\r\n <div class=\"left-right-1\">\r\n <div class=\"left-1\">Profit/Loss</div><div class=\"right-1\">{{propertyDetails.income}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-content\">\r\n <div class=\"right-head\">Financial Projections</div>\r\n <div class=\"financial-details common-style3 br-0-10\">\r\n <div class=\"right-left-1 d-flex justify-content-between mb-3\">\r\n <div class=\"left-2\">Projected Value (Next Year)</div><div class=\"right-2\">{{propertyDetails.projectedValue}}</div>\r\n </div>\r\n <div class=\"right-left-1 d-flex justify-content-between mb-3\">\r\n <div class=\"left-2\">Potential Appreciation</div><div class=\"right-2\">{{propertyDetails.potentialApperciation}}</div>\r\n </div>\r\n <div class=\"right-left-1 d-flex justify-content-between mb-3\">\r\n <div class=\"left-2\">Guaranteed Growth</div><div class=\"right-2\">{{propertyDetails.guaranteedGrowth}}</div>\r\n </div>\r\n <div class=\"note-section\">\r\n Note: Above projection are based on past performance\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.main-container{padding:10px}.left-container,.right-container{height:75vh;overflow-y:scroll}.w-60{width:60%}.w-40{width:40%}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%}.br-10{border-radius:10px}.common-style1{padding:10px;border-radius:10px;background:#fff;margin-bottom:10px}.mt-10{margin-top:10px!important}.main-text{font-weight:600;font-size:18px;line-height:24px;color:#000}.span-text{font-size:14px;font-weight:500;line-height:44px;color:#00000080}.gap-10{gap:10px}.common-style2{padding:10px;border-radius:10px;font-size:14px;line-height:24px;font-weight:600;height:6vh;align-content:center}.buy-more{background:#36b37e;color:#fff}.sell{background:#ffcfc6;color:#f36f56}.left{font-size:14px;line-height:18px;font-weight:500;color:#01161ecc}.right{font-size:14px;line-height:20px;font-weight:600;color:#01161e}.head-about-property{font-weight:600;font-size:16px;line-height:26px;margin-bottom:10px}.file{background:#f7f7f7;border-radius:5px;padding:12px;width:50%}.doc-text{font-size:16px;font-weight:500;line-height:26px;color:#000}.about-property-text{font-weight:400;font-size:16px;line-height:29px;color:#01161eb3}.manage-img{width:70px;height:10vh;border-radius:50%}.card-container{background:#f7f7f7;padding:10px}.name-text{font-size:14px;line-height:24px;font-weight:500;color:#000}.role-text{font-size:14px;font-weight:400;line-height:24px;color:#000000b3}.managed-cards{overflow-x:scroll}.right-content{border:1px solid rgba(0,0,0,.03);border-radius:10px;margin-bottom:15px}.right-head{font-weight:600;font-size:16px;line-height:21px;color:#000;padding:10px}.holding-details{display:grid;grid-template-columns:50% 50%;gap:10px}.top-bottom{padding:10px}.top{font-size:20px;font-weight:700;line-height:24px;color:#000}.bottom{font-size:14px;font-weight:500;line-height:24px;color:#000000b3}.income{background:#fff;padding:10px}.left-right-1{background:linear-gradient(180deg,#0d1b2a,#172b40);display:flex;justify-content:space-between;padding:15px;border-radius:10px}.left-1{font-size:16px;font-weight:700;line-height:24px;color:#fff}.right-1{font-weight:800;font-size:20px;line-height:24px;color:#32f4a2}.left-2{font-size:14px;line-height:20px;font-weight:500;color:#000000b3}.right-2{font-size:20px;line-height:24px;font-weight:700;color:#000}.note-section{font-size:14px;line-height:20px;font-weight:500;color:#01161e66}.common-style3{padding:10px;background:#fff}.br-0-10{border-radius:0 0 10px 10px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
5914
+ }
5915
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyViewComponent, decorators: [{
5916
+ type: Component,
5917
+ args: [{ selector: 'simpo-property-view', standalone: true, imports: [CommonModule, MatIcon], template: "<div class=\"main-container w-100 d-flex gap-10\">\r\n <div class=\"left-container w-60\">\r\n <div class=\"property-detail common-style1\">\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide p-relative w-35\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let ele of propertyDetails.propertyImage;let i = index\">\r\n <div class=\"carousel-item active\" [class.active]=\"i\" data-bs-interval=\"3000\">\r\n <img [src]=\"ele\" class=\"d-block w-100 height-30 br-10\" alt=\"property-image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-center\">\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <ng-container *ngFor=\"let ele of propertyDetails.propertyImage;let i = index\">\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\"\r\n [attr.data-bs-slide-to]=\"i\" class=\"active additional-properties\" aria-current=\"true\"\r\n aria-label=\"Slide 1\"></button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"details mt-10\">\r\n <div class=\"top-details d-flex justify-content-between\">\r\n <div class=\"top-left\">\r\n <div class=\"main-text\">{{propertyDetails.propertyName}}</div>\r\n <div class=\"span-text\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\"\r\n alt=\"location image\" width=\"15px\">RRR Hyderabad, Telangana</div>\r\n </div>\r\n <div class=\"top-right d-flex gap-10\">\r\n <div class=\"buy-more common-style2\">\r\n Buy More SQFT\r\n </div>\r\n <div class=\"sell common-style2\">\r\n Sell SQFT\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"bottom-details d-flex gap-10 mt-10 justify-content-center\">\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Invested Date</div>\r\n <div class=\"right\">{{propertyDetails.investedDate}}</div>\r\n </div>\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Property Type</div>\r\n <div class=\"right\">{{propertyDetails.type}}</div>\r\n </div>\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Ownership Share</div>\r\n <div class=\"right\">{{propertyDetails.share}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"common-style1\">\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 propertyDetails.documents\">\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 class=\"common-style1\">\r\n <div class=\"head-about-property\">About Property</div>\r\n <div class=\"about-property-text\">{{propertyDetails.description}}</div>\r\n <div class=\"head-about-property\">Property Managed by</div>\r\n <div class=\"managed-cards d-flex gap-10 w-100\">\r\n <div class=\"card-container br-10\" *ngFor=\"let ele of propertyDetails.managedBy\">\r\n <div class=\"img-container d-flex justify-content-center\">\r\n <img [src]=\"ele.img\" alt=\"Manager Image\" class=\"manage-img\">\r\n </div>\r\n <div class=\"card-details\">\r\n <p class=\"name-text text-center mt-10\">{{ele.name}}</p>\r\n <p class=\"role-text text-center\">{{ele.role}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-container w-40\">\r\n <div class=\"right-content\">\r\n <div class=\"right-head\">Holdings Details</div>\r\n <div class=\"holding-details common-style3\">\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails.invested}}</div>\r\n <div class=\"bottom\">Invested</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails.totalSqft}}</div>\r\n <div class=\"bottom\">Sq.ft</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails.irr}}</div>\r\n <div class=\"bottom\">Indicative Market Value</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails.imv}}</div>\r\n <div class=\"bottom\">Internal Returns Rate</div>\r\n </div>\r\n </div>\r\n <div class=\"income br-0-10\">\r\n <div class=\"left-right-1\">\r\n <div class=\"left-1\">Profit/Loss</div><div class=\"right-1\">{{propertyDetails.income}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-content\">\r\n <div class=\"right-head\">Financial Projections</div>\r\n <div class=\"financial-details common-style3 br-0-10\">\r\n <div class=\"right-left-1 d-flex justify-content-between mb-3\">\r\n <div class=\"left-2\">Projected Value (Next Year)</div><div class=\"right-2\">{{propertyDetails.projectedValue}}</div>\r\n </div>\r\n <div class=\"right-left-1 d-flex justify-content-between mb-3\">\r\n <div class=\"left-2\">Potential Appreciation</div><div class=\"right-2\">{{propertyDetails.potentialApperciation}}</div>\r\n </div>\r\n <div class=\"right-left-1 d-flex justify-content-between mb-3\">\r\n <div class=\"left-2\">Guaranteed Growth</div><div class=\"right-2\">{{propertyDetails.guaranteedGrowth}}</div>\r\n </div>\r\n <div class=\"note-section\">\r\n Note: Above projection are based on past performance\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.main-container{padding:10px}.left-container,.right-container{height:75vh;overflow-y:scroll}.w-60{width:60%}.w-40{width:40%}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%}.br-10{border-radius:10px}.common-style1{padding:10px;border-radius:10px;background:#fff;margin-bottom:10px}.mt-10{margin-top:10px!important}.main-text{font-weight:600;font-size:18px;line-height:24px;color:#000}.span-text{font-size:14px;font-weight:500;line-height:44px;color:#00000080}.gap-10{gap:10px}.common-style2{padding:10px;border-radius:10px;font-size:14px;line-height:24px;font-weight:600;height:6vh;align-content:center}.buy-more{background:#36b37e;color:#fff}.sell{background:#ffcfc6;color:#f36f56}.left{font-size:14px;line-height:18px;font-weight:500;color:#01161ecc}.right{font-size:14px;line-height:20px;font-weight:600;color:#01161e}.head-about-property{font-weight:600;font-size:16px;line-height:26px;margin-bottom:10px}.file{background:#f7f7f7;border-radius:5px;padding:12px;width:50%}.doc-text{font-size:16px;font-weight:500;line-height:26px;color:#000}.about-property-text{font-weight:400;font-size:16px;line-height:29px;color:#01161eb3}.manage-img{width:70px;height:10vh;border-radius:50%}.card-container{background:#f7f7f7;padding:10px}.name-text{font-size:14px;line-height:24px;font-weight:500;color:#000}.role-text{font-size:14px;font-weight:400;line-height:24px;color:#000000b3}.managed-cards{overflow-x:scroll}.right-content{border:1px solid rgba(0,0,0,.03);border-radius:10px;margin-bottom:15px}.right-head{font-weight:600;font-size:16px;line-height:21px;color:#000;padding:10px}.holding-details{display:grid;grid-template-columns:50% 50%;gap:10px}.top-bottom{padding:10px}.top{font-size:20px;font-weight:700;line-height:24px;color:#000}.bottom{font-size:14px;font-weight:500;line-height:24px;color:#000000b3}.income{background:#fff;padding:10px}.left-right-1{background:linear-gradient(180deg,#0d1b2a,#172b40);display:flex;justify-content:space-between;padding:15px;border-radius:10px}.left-1{font-size:16px;font-weight:700;line-height:24px;color:#fff}.right-1{font-weight:800;font-size:20px;line-height:24px;color:#32f4a2}.left-2{font-size:14px;line-height:20px;font-weight:500;color:#000000b3}.right-2{font-size:20px;line-height:24px;font-weight:700;color:#000}.note-section{font-size:14px;line-height:20px;font-weight:500;color:#01161e66}.common-style3{padding:10px;background:#fff}.br-0-10{border-radius:0 0 10px 10px!important}\n"] }]
5918
+ }], propDecorators: { text: [{
5919
+ type: Input
5920
+ }] } });
5921
+
5922
+ class PropertiesComponent {
5923
+ constructor() {
5924
+ this.investments = [
5925
+ {
5926
+ name: "SQFT Investment",
5927
+ details: [
5928
+ { name: "Total Sq.ft Owned", value: "43" },
5929
+ { name: "Amount Invested", value: "₹5.73 L" },
5930
+ { name: "Indicative Market Value", value: "₹6.21 L", spanValue: "+2.1%" },
5931
+ { name: "IRR", value: "14%" },
5932
+ ]
5933
+ },
5934
+ {
5935
+ name: "Private Investment ",
5936
+ details: [
5937
+ { name: "Properties Owned", value: "2" },
5938
+ { name: "Properties Sq.ft", value: "3092" },
5939
+ { name: "Invested Value", value: "₹32.41 L", spanValue: "+2.1%" },
5940
+ { name: "Indicative Market Value", value: "₹38.59 L" },
5941
+ ]
5942
+ }
5943
+ ];
5944
+ this.activeTab = "ALL_PROPERTIES";
5945
+ this.tabs = [
5946
+ { viewValue: "All Properties", value: "ALL_PROPERTIES" },
5947
+ { viewValue: "My SQFT", value: "SQFT" },
5948
+ { viewValue: "Private Investments", value: "PRIVATE" },
5949
+ ];
5950
+ this.propertyDetails = [{
5951
+ propertyImage: ["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", "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png"],
5952
+ propertyName: "Real Estate Debt Investment - Blue Moon",
5953
+ propertyLocation: "RRR Hyderabad, Telangana",
5954
+ propertyType: "SQFT",
5955
+ propertyDetail: [
5956
+ { textValue: "Invested", value: "₹4.1 L" },
5957
+ { textValue: "Sq.ft", value: "32" },
5958
+ { textValue: "Indicative Market Value", value: "₹4.1 L" },
5959
+ { textValue: "Profit/Loss", value: "+₹4.1 L" },
5960
+ ]
5961
+ },
5962
+ {
5963
+ propertyImage: ["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", "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png"],
5964
+ propertyName: "Real Estate Debt Investment - Blue Moon",
5965
+ propertyLocation: "RRR Hyderabad, Telangana",
5966
+ propertyType: "Private Investment",
5967
+ propertyDetail: [
5968
+ { textValue: "Invested", value: "₹4.1 L" },
5969
+ { textValue: "Sq.ft", value: "32" },
5970
+ { textValue: "Indicative Market Value", value: "₹4.1 L" },
5971
+ { textValue: "Profit/Loss", value: "+₹4.1 L" },
5972
+ ]
5973
+ }];
5974
+ this.viewTab = false;
5975
+ }
5976
+ ngOnInit() {
5977
+ }
5978
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5979
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertiesComponent, isStandalone: true, selector: "simpo-properties", ngImport: i0, template: "<section class=\"main-container\" *ngIf=\"!viewTab\">\r\n <!-- <div class=\"card-section d-flex gap-2\">\r\n <div class=\"cards\" *ngFor=\"let ele of investments\">\r\n <div class=\"head\">{{ele.name}}</div>\r\n <div class=\"mini-cards\">\r\n <div class=\"mini-card\" *ngFor=\"let ele of ele.details\">\r\n <div class=\"text\">{{ele.name}}</div>\r\n <div class=\"number d-flex\">{{ele.value}}&nbsp;&nbsp;<span *ngIf=\"ele?.spanValue\"\r\n class=\"span-text d-flex\"><mat-icon>arrow_drop_up</mat-icon>\r\n {{ele.spanValue}}</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"property-tabs d-flex gap-10 mt-3\">\r\n <div class=\"tab\" *ngFor=\"let ele of tabs\" (click)=\"activeTab = ele.value\"\r\n [class.tabActive]=\"activeTab == ele.value\">{{ele.viewValue}}</div>\r\n </div> -->\r\n <div class=\"property-cards\">\r\n <ng-container *ngFor=\"let ele of propertyDetails\">\r\n <div class=\"property-card w-100 d-flex gap-10\" (click)=\"viewTab = true\">\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide p-relative w-35\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let ele of ele.propertyImage;let i = index\">\r\n <div class=\"carousel-item active\" [class.active]=\"i\" data-bs-interval=\"3000\">\r\n <img [src]=\"ele\" class=\"d-block w-100 height-30 br-10\" alt=\"property-image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-center p-15\">\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <ng-container *ngFor=\"let ele of ele.propertyImage;let i = index\">\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\"\r\n [attr.data-bs-slide-to]=\"i\" class=\"active additional-properties\"\r\n aria-current=\"true\" aria-label=\"Slide 1\"></button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-section\">\r\n <div class=\"right-top d-flex justify-content-between\">\r\n <div class=\"head-left\">\r\n <div class=\"propertyname\">{{ele.propertyName}}</div>\r\n <div class=\"property-location\"><img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\" alt=\"location image\">{{ele.propertyLocation}}</div>\r\n </div>\r\n <div class=\"head-right\">\r\n <div class=\"type text-center\">{{ele.propertyType}}</div>\r\n </div>\r\n </div>\r\n <!-- <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/637983c1739855715188Vector%2012%20%281%29.png\" class=\"curve-img\"> -->\r\n <div class=\"right-bottom d-flex gap-10 w-75\">\r\n <div class=\"details\" *ngFor=\"let x of ele.propertyDetail;let i = index\"\r\n [class.lst-div]=\"i == ele.propertyDetail.length - 1\">\r\n <div class=\"top-detail text-center\">{{x.value}}</div>\r\n <div class=\"bottom-detail text-center\">{{x.textValue}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</section>\r\n<section class=\"view-container\" *ngIf=\"viewTab\">\r\n <div class=\"back\">\r\n <div class=\"back-text d-flex align-items-center\"><p class=\"my-text mb-0 common-style\" (click)=\"viewTab = false\">My Properties</p><mat-icon class=\"my-text\">keyboard_arrow_right</mat-icon>\r\n <p class=\"prty-text mb-0 common-style\">Property Details</p></div>\r\n </div>\r\n <simpo-property-view [text]=\"'Hello'\"></simpo-property-view>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.gap-2{gap:2%!important}.cards{background:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.03);width:49%;padding:10px}.head{font-size:18px;font-weight:600;line-height:24px;color:#000;margin-bottom:10px}.mini-cards{display:grid;grid-template-columns:48% 48%;gap:3%}.mini-card{background:#fafafa;border-radius:7px;padding:10px 15px;margin-bottom:10px}.text{font-size:14px;line-height:24px;font-weight:500;color:#01161ecc;margin-bottom:10px}.number{font-size:24px;line-height:24px;font-weight:700;color:#01161e}.span-text{font-size:13px;line-height:24px;font-weight:700;color:#36b37e}.property-tab{display:flex;gap:10px;margin-top:15px}.gap-10{gap:10px}.tab{padding:10px;background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:8px;font-size:16px;line-height:24px;font-weight:500;color:#01161e;cursor:pointer}.tabActive{color:#f8a938!important;border:1px solid rgba(248,169,56,1)!important}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%}.height-30{height:30vh}.w-35{width:35%!important}.property-cards{overflow-y:scroll;height:81vh}.property-card{border-radius:10px!important;background:#fff;border:1px solid rgba(0,0,0,.04);margin-bottom:15px;position:relative;overflow:hidden;cursor:pointer}.br-10{border-radius:10px 0 0 10px}.right-section{width:65%}.property-name{font-size:16px;font-weight:600;line-height:21px;color:#000}.property-location{font-size:14px;font-weight:500;line-height:44px;color:#0000004d}.type{font-size:14px;font-weight:600;line-height:24px;color:#f8a938;background:#ffebcb;border-radius:8px 0 0 9px;padding:6px}.right-bottom{background:#219ebc}.details{border-right:1px solid rgba(255,255,255,.2);padding:8px;margin:8px 0}.top-detail{font-size:20px;font-weight:700;line-height:24px;color:#fff}.bottom-detail{font-size:14px;font-weight:500;line-height:24px;color:#ffffffb3}.head-left{padding:10px}.head-right{padding:10px 0}.lst-div{border:unset!important}.w-75{width:75%!important}.curve-img{position:absolute;width:33px;top:33%;left:31%}.p-15{padding:15px}.my-text{color:#00000080;cursor:pointer}.prty-text{color:#000}.common-style{font-size:14px;line-height:24px;font-weight:500}\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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PropertyViewComponent, selector: "simpo-property-view", inputs: ["text"] }] }); }
5980
+ }
5981
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertiesComponent, decorators: [{
5982
+ type: Component,
5983
+ args: [{ selector: 'simpo-properties', standalone: true, imports: [CommonModule, MatIcon, PropertyViewComponent], template: "<section class=\"main-container\" *ngIf=\"!viewTab\">\r\n <!-- <div class=\"card-section d-flex gap-2\">\r\n <div class=\"cards\" *ngFor=\"let ele of investments\">\r\n <div class=\"head\">{{ele.name}}</div>\r\n <div class=\"mini-cards\">\r\n <div class=\"mini-card\" *ngFor=\"let ele of ele.details\">\r\n <div class=\"text\">{{ele.name}}</div>\r\n <div class=\"number d-flex\">{{ele.value}}&nbsp;&nbsp;<span *ngIf=\"ele?.spanValue\"\r\n class=\"span-text d-flex\"><mat-icon>arrow_drop_up</mat-icon>\r\n {{ele.spanValue}}</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"property-tabs d-flex gap-10 mt-3\">\r\n <div class=\"tab\" *ngFor=\"let ele of tabs\" (click)=\"activeTab = ele.value\"\r\n [class.tabActive]=\"activeTab == ele.value\">{{ele.viewValue}}</div>\r\n </div> -->\r\n <div class=\"property-cards\">\r\n <ng-container *ngFor=\"let ele of propertyDetails\">\r\n <div class=\"property-card w-100 d-flex gap-10\" (click)=\"viewTab = true\">\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide p-relative w-35\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let ele of ele.propertyImage;let i = index\">\r\n <div class=\"carousel-item active\" [class.active]=\"i\" data-bs-interval=\"3000\">\r\n <img [src]=\"ele\" class=\"d-block w-100 height-30 br-10\" alt=\"property-image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-center p-15\">\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <ng-container *ngFor=\"let ele of ele.propertyImage;let i = index\">\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\"\r\n [attr.data-bs-slide-to]=\"i\" class=\"active additional-properties\"\r\n aria-current=\"true\" aria-label=\"Slide 1\"></button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-section\">\r\n <div class=\"right-top d-flex justify-content-between\">\r\n <div class=\"head-left\">\r\n <div class=\"propertyname\">{{ele.propertyName}}</div>\r\n <div class=\"property-location\"><img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\" alt=\"location image\">{{ele.propertyLocation}}</div>\r\n </div>\r\n <div class=\"head-right\">\r\n <div class=\"type text-center\">{{ele.propertyType}}</div>\r\n </div>\r\n </div>\r\n <!-- <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/637983c1739855715188Vector%2012%20%281%29.png\" class=\"curve-img\"> -->\r\n <div class=\"right-bottom d-flex gap-10 w-75\">\r\n <div class=\"details\" *ngFor=\"let x of ele.propertyDetail;let i = index\"\r\n [class.lst-div]=\"i == ele.propertyDetail.length - 1\">\r\n <div class=\"top-detail text-center\">{{x.value}}</div>\r\n <div class=\"bottom-detail text-center\">{{x.textValue}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</section>\r\n<section class=\"view-container\" *ngIf=\"viewTab\">\r\n <div class=\"back\">\r\n <div class=\"back-text d-flex align-items-center\"><p class=\"my-text mb-0 common-style\" (click)=\"viewTab = false\">My Properties</p><mat-icon class=\"my-text\">keyboard_arrow_right</mat-icon>\r\n <p class=\"prty-text mb-0 common-style\">Property Details</p></div>\r\n </div>\r\n <simpo-property-view [text]=\"'Hello'\"></simpo-property-view>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.gap-2{gap:2%!important}.cards{background:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.03);width:49%;padding:10px}.head{font-size:18px;font-weight:600;line-height:24px;color:#000;margin-bottom:10px}.mini-cards{display:grid;grid-template-columns:48% 48%;gap:3%}.mini-card{background:#fafafa;border-radius:7px;padding:10px 15px;margin-bottom:10px}.text{font-size:14px;line-height:24px;font-weight:500;color:#01161ecc;margin-bottom:10px}.number{font-size:24px;line-height:24px;font-weight:700;color:#01161e}.span-text{font-size:13px;line-height:24px;font-weight:700;color:#36b37e}.property-tab{display:flex;gap:10px;margin-top:15px}.gap-10{gap:10px}.tab{padding:10px;background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:8px;font-size:16px;line-height:24px;font-weight:500;color:#01161e;cursor:pointer}.tabActive{color:#f8a938!important;border:1px solid rgba(248,169,56,1)!important}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%}.height-30{height:30vh}.w-35{width:35%!important}.property-cards{overflow-y:scroll;height:81vh}.property-card{border-radius:10px!important;background:#fff;border:1px solid rgba(0,0,0,.04);margin-bottom:15px;position:relative;overflow:hidden;cursor:pointer}.br-10{border-radius:10px 0 0 10px}.right-section{width:65%}.property-name{font-size:16px;font-weight:600;line-height:21px;color:#000}.property-location{font-size:14px;font-weight:500;line-height:44px;color:#0000004d}.type{font-size:14px;font-weight:600;line-height:24px;color:#f8a938;background:#ffebcb;border-radius:8px 0 0 9px;padding:6px}.right-bottom{background:#219ebc}.details{border-right:1px solid rgba(255,255,255,.2);padding:8px;margin:8px 0}.top-detail{font-size:20px;font-weight:700;line-height:24px;color:#fff}.bottom-detail{font-size:14px;font-weight:500;line-height:24px;color:#ffffffb3}.head-left{padding:10px}.head-right{padding:10px 0}.lst-div{border:unset!important}.w-75{width:75%!important}.curve-img{position:absolute;width:33px;top:33%;left:31%}.p-15{padding:15px}.my-text{color:#00000080;cursor:pointer}.prty-text{color:#000}.common-style{font-size:14px;line-height:24px;font-weight:500}\n"] }]
5984
+ }], ctorParameters: () => [] });
5985
+
5986
+ class MyDocumentsComponent {
5987
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MyDocumentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5988
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: MyDocumentsComponent, isStandalone: true, selector: "simpo-my-documents", ngImport: i0, template: "<p>my-documents works!</p>\r\n", styles: [""] }); }
5989
+ }
5990
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MyDocumentsComponent, decorators: [{
5991
+ type: Component,
5992
+ args: [{ selector: 'simpo-my-documents', standalone: true, imports: [], template: "<p>my-documents works!</p>\r\n" }]
5993
+ }] });
5994
+
5995
+ class MyOrdersComponent {
5996
+ constructor() {
5997
+ this.activeTab = "ALL_ORDERS";
5998
+ this.tabs = [
5999
+ { viewValue: "All Orders", value: "ALL_ORDERS" },
6000
+ { viewValue: "Open Orders", value: "ORDERS" },
6001
+ { viewValue: "Successful Orders", value: "SUCCESS" },
6002
+ { viewValue: "Unsuccessful Orders", value: "UNSUCCESS" },
6003
+ { viewValue: "Sell Orders", value: "SELL" },
6004
+ ];
6005
+ this.properties = [
6006
+ {
6007
+ imgUrl: "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png",
6008
+ status: "SUCCESS",
6009
+ investedOn: "10th May 2023",
6010
+ sqft: "450 Sq ft",
6011
+ investedAmount: "₹4.1 L",
6012
+ orderType: "Sell Order",
6013
+ orderPlacedOn: "10th May 2023",
6014
+ orderExecutedOn: "12th May 2023",
6015
+ propertyName: "Real Estate Debt Investment - Blue Moon",
6016
+ propertyLocation: "RRR Hyderabad, Telangana",
6017
+ },
6018
+ {
6019
+ imgUrl: "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png",
6020
+ status: "PENDING",
6021
+ investedOn: "10th May 2023",
6022
+ sqft: "450 Sq ft",
6023
+ investedAmount: "₹4.1 L",
6024
+ orderType: "Buy Order",
6025
+ orderPlacedOn: "10th May 2023",
6026
+ orderExecutedOn: "12th May 2023",
6027
+ propertyName: "Real Estate Debt Investment - Blue Moon",
6028
+ propertyLocation: "RRR Hyderabad, Telangana",
6029
+ },
6030
+ {
6031
+ imgUrl: "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png",
6032
+ status: "CANCELLED",
6033
+ investedOn: "10th May 2023",
6034
+ sqft: "450 Sq ft",
6035
+ investedAmount: "₹4.1 L",
6036
+ orderType: "Buy Order",
6037
+ orderPlacedOn: "10th May 2023",
6038
+ orderExecutedOn: "12th May 2023",
6039
+ propertyName: "Real Estate Debt Investment - Blue Moon",
6040
+ propertyLocation: "RRR Hyderabad, Telangana",
6041
+ }
6042
+ ];
6043
+ }
6044
+ ngOnInit() {
6045
+ }
6046
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MyOrdersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6047
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: MyOrdersComponent, isStandalone: true, selector: "simpo-my-orders", ngImport: i0, template: "<div class=\"main-container\">\r\n <div class=\"property-tabs d-flex gap-10 mt-3 mb-3\">\r\n <div class=\"tab\" *ngFor=\"let ele of tabs\" (click)=\"activeTab = ele.value\"\r\n [class.tabActive]=\"activeTab == ele.value\">{{ele.viewValue}}</div>\r\n </div>\r\n <div class=\"cards-container\">\r\n <div class=\"property-card mb-3\" *ngFor=\"let ele of properties\">\r\n <div class=\"card-top d-flex justify-content-between\">\r\n <div class=\"card-left d-flex p-10 align-items-center\">\r\n <div class=\"br-1 p-0-10\">\r\n <div class=\"status\" [class.success]=\"ele.status == 'SUCCESS'\" [class.cancelled]=\"ele.status == 'CANCELLED'\">\r\n &#x2022;&nbsp;{{ele.status | titlecase}}\r\n </div>\r\n </div>\r\n <div class=\"investedOn p-10\">\r\n {{ele.investedOn}}\r\n </div>\r\n </div>\r\n <div class=\"card-right d-flex align-items-center\" [class.buy]=\"ele.orderType == 'Buy Order' \">\r\n {{ele.orderType}}\r\n </div>\r\n </div>\r\n <div class=\"card-middle d-flex justify-content-between p-15\">\r\n <div class=\"middle-1 d-flex gap-10\">\r\n <div class=\"image-container\">\r\n <img [src]=\"ele.imgUrl\" alt=\"property image\" class=\"property-img\">\r\n </div>\r\n <div class=\"property-details\">\r\n <div class=\"property-name\">{{ele.propertyName}}</div>\r\n <div class=\"property-location\">{{ele.propertyLocation}}</div>\r\n </div>\r\n </div>\r\n <div class=\"middle-2\">\r\n {{ele.sqft}}\r\n </div>\r\n <div class=\"middle-3\">\r\n {{ele.investedAmount}}\r\n </div>\r\n </div>\r\n <div class=\"card-bottom d-flex align-items-center\">\r\n <div class=\"round-container\">\r\n <div class=\"round-1 d-flex align-items-center justify-content-center round-1-active\"><mat-icon class=\"d-flex align-items-center justify-content-center f-16\">check</mat-icon></div>\r\n </div>\r\n <div class=\"line\"></div>\r\n <div class=\"round-container\">\r\n <div class=\"round-2 d-flex align-items-center justify-content-center\" [class.round-1-active]=\"ele.status == 'SUCCESS'\" [class.round-cancelled]=\"ele.status == 'CANCELLED'\"><mat-icon *ngIf=\"ele.status == 'CANCELLED'\" class=\"d-flex align-items-center justify-content-center f-16\">close</mat-icon><mat-icon class=\"d-flex align-items-center justify-content-center f-16\" *ngIf=\"ele.status == 'SUCCESS'\">check</mat-icon></div>\r\n </div>\r\n </div>\r\n <div class=\"card-bottom d-flex justify-content-between\">\r\n <div class=\"placed\">\r\n <p class=\"placed-text mb-0\">Order Placed</p><span class=\"date\">{{ele.orderPlacedOn}}</span>\r\n </div>\r\n <div class=\"placed\">\r\n <p class=\"placed-text mb-0\">Order {{ele.status == 'CANCELLED' ? \"Cancelled\" : \"Executed\"}}</p><span class=\"date\">{{ele.orderExecutedOn}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.tab{padding:10px;background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:8px;font-size:16px;line-height:24px;font-weight:500;color:#01161e;cursor:pointer}.tabActive{color:#f8a938!important;border:1px solid rgba(248,169,56,1)!important}.gap-10{gap:10px}.cards-container{height:70vh;overflow-y:scroll}.property-card{background:#fff;border:1px solid rgba(0,0,0,.04);border-radius:10px}.p-10{padding:10px}.p-15{padding:15px}.status{background:#ffd84b1a;border-radius:10px;font-size:14px;font-weight:600;line-height:21px;color:#f3be00;padding:5px}.success{background-color:#09b6000f!important;color:#09b600!important}.cancelled{background-color:#9017150d!important;color:#e43d11!important}.br-1{border-right:2px solid rgba(0,0,0,.2)}.card-bottom{width:70%;margin:0 auto}.round-1,.round-2{height:3vh;width:20px;background:#e1e1e1;border-radius:50%}.round-1-active{background:#f8a938!important;color:#fff}.f-18{font-size:18px}.line{background:#e1e1e1;height:2px;width:80%}.card-bottom-1{width:70%;margin:0 auto}.investedOn{font-size:16px;line-height:21px;font-weight:600;color:#000000b3}.card-right{background:#f86e38;border-radius:8px 0 0 8px;font-size:14px;line-height:24px;padding:5px;font-weight:600;color:#fff;margin:15px 0}.buy{background:#077b01!important}.property-name{font-size:16px;line-height:21px;font-weight:600;color:#0009}.property-location{font-size:14px;line-height:44px;font-weight:500;color:#0000004d}.middle-2{font-size:16px;line-height:21px;color:#000000b3;font-weight:600}.middle-3{font-size:26px;line-height:33px;font-weight:700;color:#000000b3}.placed-text{font-size:16px;font-weight:600;line-height:21px;color:#000000b3}.date{font-size:14px;line-height:44px;font-weight:500;color:#0000004d}.property-img{height:8vh;width:80px;border-radius:10px}.f-16{font-size:16px}.p-0-10{padding:0 10px}.round-cancelled{background-color:#fd3516!important;color:#fff!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: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
6048
+ }
6049
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MyOrdersComponent, decorators: [{
6050
+ type: Component,
6051
+ args: [{ selector: 'simpo-my-orders', standalone: true, imports: [CommonModule, MatIcon], template: "<div class=\"main-container\">\r\n <div class=\"property-tabs d-flex gap-10 mt-3 mb-3\">\r\n <div class=\"tab\" *ngFor=\"let ele of tabs\" (click)=\"activeTab = ele.value\"\r\n [class.tabActive]=\"activeTab == ele.value\">{{ele.viewValue}}</div>\r\n </div>\r\n <div class=\"cards-container\">\r\n <div class=\"property-card mb-3\" *ngFor=\"let ele of properties\">\r\n <div class=\"card-top d-flex justify-content-between\">\r\n <div class=\"card-left d-flex p-10 align-items-center\">\r\n <div class=\"br-1 p-0-10\">\r\n <div class=\"status\" [class.success]=\"ele.status == 'SUCCESS'\" [class.cancelled]=\"ele.status == 'CANCELLED'\">\r\n &#x2022;&nbsp;{{ele.status | titlecase}}\r\n </div>\r\n </div>\r\n <div class=\"investedOn p-10\">\r\n {{ele.investedOn}}\r\n </div>\r\n </div>\r\n <div class=\"card-right d-flex align-items-center\" [class.buy]=\"ele.orderType == 'Buy Order' \">\r\n {{ele.orderType}}\r\n </div>\r\n </div>\r\n <div class=\"card-middle d-flex justify-content-between p-15\">\r\n <div class=\"middle-1 d-flex gap-10\">\r\n <div class=\"image-container\">\r\n <img [src]=\"ele.imgUrl\" alt=\"property image\" class=\"property-img\">\r\n </div>\r\n <div class=\"property-details\">\r\n <div class=\"property-name\">{{ele.propertyName}}</div>\r\n <div class=\"property-location\">{{ele.propertyLocation}}</div>\r\n </div>\r\n </div>\r\n <div class=\"middle-2\">\r\n {{ele.sqft}}\r\n </div>\r\n <div class=\"middle-3\">\r\n {{ele.investedAmount}}\r\n </div>\r\n </div>\r\n <div class=\"card-bottom d-flex align-items-center\">\r\n <div class=\"round-container\">\r\n <div class=\"round-1 d-flex align-items-center justify-content-center round-1-active\"><mat-icon class=\"d-flex align-items-center justify-content-center f-16\">check</mat-icon></div>\r\n </div>\r\n <div class=\"line\"></div>\r\n <div class=\"round-container\">\r\n <div class=\"round-2 d-flex align-items-center justify-content-center\" [class.round-1-active]=\"ele.status == 'SUCCESS'\" [class.round-cancelled]=\"ele.status == 'CANCELLED'\"><mat-icon *ngIf=\"ele.status == 'CANCELLED'\" class=\"d-flex align-items-center justify-content-center f-16\">close</mat-icon><mat-icon class=\"d-flex align-items-center justify-content-center f-16\" *ngIf=\"ele.status == 'SUCCESS'\">check</mat-icon></div>\r\n </div>\r\n </div>\r\n <div class=\"card-bottom d-flex justify-content-between\">\r\n <div class=\"placed\">\r\n <p class=\"placed-text mb-0\">Order Placed</p><span class=\"date\">{{ele.orderPlacedOn}}</span>\r\n </div>\r\n <div class=\"placed\">\r\n <p class=\"placed-text mb-0\">Order {{ele.status == 'CANCELLED' ? \"Cancelled\" : \"Executed\"}}</p><span class=\"date\">{{ele.orderExecutedOn}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.tab{padding:10px;background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:8px;font-size:16px;line-height:24px;font-weight:500;color:#01161e;cursor:pointer}.tabActive{color:#f8a938!important;border:1px solid rgba(248,169,56,1)!important}.gap-10{gap:10px}.cards-container{height:70vh;overflow-y:scroll}.property-card{background:#fff;border:1px solid rgba(0,0,0,.04);border-radius:10px}.p-10{padding:10px}.p-15{padding:15px}.status{background:#ffd84b1a;border-radius:10px;font-size:14px;font-weight:600;line-height:21px;color:#f3be00;padding:5px}.success{background-color:#09b6000f!important;color:#09b600!important}.cancelled{background-color:#9017150d!important;color:#e43d11!important}.br-1{border-right:2px solid rgba(0,0,0,.2)}.card-bottom{width:70%;margin:0 auto}.round-1,.round-2{height:3vh;width:20px;background:#e1e1e1;border-radius:50%}.round-1-active{background:#f8a938!important;color:#fff}.f-18{font-size:18px}.line{background:#e1e1e1;height:2px;width:80%}.card-bottom-1{width:70%;margin:0 auto}.investedOn{font-size:16px;line-height:21px;font-weight:600;color:#000000b3}.card-right{background:#f86e38;border-radius:8px 0 0 8px;font-size:14px;line-height:24px;padding:5px;font-weight:600;color:#fff;margin:15px 0}.buy{background:#077b01!important}.property-name{font-size:16px;line-height:21px;font-weight:600;color:#0009}.property-location{font-size:14px;line-height:44px;font-weight:500;color:#0000004d}.middle-2{font-size:16px;line-height:21px;color:#000000b3;font-weight:600}.middle-3{font-size:26px;line-height:33px;font-weight:700;color:#000000b3}.placed-text{font-size:16px;font-weight:600;line-height:21px;color:#000000b3}.date{font-size:14px;line-height:44px;font-weight:500;color:#0000004d}.property-img{height:8vh;width:80px;border-radius:10px}.f-16{font-size:16px}.p-0-10{padding:0 10px}.round-cancelled{background-color:#fd3516!important;color:#fff!important}\n"] }]
6052
+ }], ctorParameters: () => [] });
6053
+
6054
+ class MyStatementComponent {
6055
+ constructor() {
6056
+ this.tableHeaders = ["Amount", "Status", "Payment Method", "Remarks"];
6057
+ this.tableData = [
6058
+ { amount: 12000, status: "SUCCESS", method: "Credit Card", remarks: "Property Purchased" },
6059
+ { amount: 12000, status: "SUCCESS", method: "UPI", remarks: "Property Purchased" },
6060
+ { amount: 12000, status: "PENDING", method: "Credit Card", remarks: "Property Purchased" },
6061
+ { amount: 12000, status: "SUCCESS", method: "Credit Card", remarks: "Property Purchased" },
6062
+ { amount: 12000, status: "SUCCESS", method: "Credit Card", remarks: "Property Purchased" },
6063
+ { amount: 12000, status: "FAILED", method: "UPI", remarks: "Property Purchased" },
6064
+ { amount: 12000, status: "SUCCESS", method: "UPI", remarks: "Property Purchased" },
6065
+ { amount: 12000, status: "FAILED", method: "Credit Card", remarks: "Property Purchased" },
6066
+ ];
6067
+ }
6068
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MyStatementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6069
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: MyStatementComponent, isStandalone: true, selector: "simpo-my-statement", ngImport: i0, template: "<div class=\"main-container\">\r\n <div class=\"header\">Transaction History</div>\r\n <div class=\"table-container\">\r\n <table class=\"w-100\">\r\n <thead>\r\n <th *ngFor=\"let head of tableHeaders\">{{head}}</th>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of tableData\">\r\n <td>{{data.amount}}</td>\r\n <td><div [class.success]=\"data.status == 'SUCCESS'\" [class.pending]=\"data.status == 'PENDING'\" [class.failed]=\"data.status == 'FAILED'\" class=\"common-style\"> &#x2022;&nbsp;{{data.status | titlecase}}</div></td>\r\n <td>{{data.method}}</td>\r\n <td>{{data.remarks.length > 15 ? data.remarks.substring(0,15)+\"...\" : data.remarks}}</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n</div>", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.main-container{background:#fff;border:2px solid rgba(0,0,0,.06);border-radius:10px;padding:50px}.header{font-size:16px;font-weight:700;line-height:24px;color:#01161e;margin-bottom:20px}.table-container{overflow-y:scroll;height:60vh}.table-container thead{background:#f6f6f6}.table-container th{padding:10px;position:sticky}.table-container tr{background:#fdfdfd;border-bottom:1px solid rgba(0,0,0,.05)}.table-container td{padding:10px;font-weight:500;font-size:16px;line-height:24px;color:#3e3e3e}.success{background:#3bb6101a;color:#2f9335}.pending{background:#f8a9381a;color:#f8a938}.failed{background:#9017151a;color:#901715}.common-style{width:65%;padding:5px;border-radius:10px;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }] }); }
6070
+ }
6071
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MyStatementComponent, decorators: [{
6072
+ type: Component,
6073
+ args: [{ selector: 'simpo-my-statement', standalone: true, imports: [CommonModule], template: "<div class=\"main-container\">\r\n <div class=\"header\">Transaction History</div>\r\n <div class=\"table-container\">\r\n <table class=\"w-100\">\r\n <thead>\r\n <th *ngFor=\"let head of tableHeaders\">{{head}}</th>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of tableData\">\r\n <td>{{data.amount}}</td>\r\n <td><div [class.success]=\"data.status == 'SUCCESS'\" [class.pending]=\"data.status == 'PENDING'\" [class.failed]=\"data.status == 'FAILED'\" class=\"common-style\"> &#x2022;&nbsp;{{data.status | titlecase}}</div></td>\r\n <td>{{data.method}}</td>\r\n <td>{{data.remarks.length > 15 ? data.remarks.substring(0,15)+\"...\" : data.remarks}}</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n</div>", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.main-container{background:#fff;border:2px solid rgba(0,0,0,.06);border-radius:10px;padding:50px}.header{font-size:16px;font-weight:700;line-height:24px;color:#01161e;margin-bottom:20px}.table-container{overflow-y:scroll;height:60vh}.table-container thead{background:#f6f6f6}.table-container th{padding:10px;position:sticky}.table-container tr{background:#fdfdfd;border-bottom:1px solid rgba(0,0,0,.05)}.table-container td{padding:10px;font-weight:500;font-size:16px;line-height:24px;color:#3e3e3e}.success{background:#3bb6101a;color:#2f9335}.pending{background:#f8a9381a;color:#f8a938}.failed{background:#9017151a;color:#901715}.common-style{width:65%;padding:5px;border-radius:10px;text-align:center}\n"] }]
6074
+ }], ctorParameters: () => [] });
6075
+
6076
+ class NeedHelpComponent {
6077
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NeedHelpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6078
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NeedHelpComponent, isStandalone: true, selector: "simpo-need-help", ngImport: i0, template: "<p>need-help works!</p>\r\n", styles: [""] }); }
6079
+ }
6080
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NeedHelpComponent, decorators: [{
6081
+ type: Component,
6082
+ args: [{ selector: 'simpo-need-help', standalone: true, imports: [], template: "<p>need-help works!</p>\r\n" }]
6083
+ }] });
6084
+
6085
+ class KycDetailsComponent {
6086
+ constructor(restService, messageService, router, dialogRef) {
6087
+ this.restService = restService;
6088
+ this.messageService = messageService;
6089
+ this.router = router;
6090
+ this.dialogRef = dialogRef;
6091
+ this.panRequest = {
6092
+ panNumber: ''
6093
+ };
6094
+ this.aadharRequest = {
6095
+ aadhaarNumber: ''
6096
+ };
6097
+ this.verifyAadharRequest = {
6098
+ otp: '',
6099
+ refId: '',
6100
+ aadhaarNumber: ''
6101
+ };
6102
+ this.aadharOtpArray = new Array(6).fill('');
6103
+ this.isPanVerified = false;
6104
+ this.isAadharverified = false;
6105
+ this.aadharOtpSent = false;
6106
+ this.panVerifyLoader = false;
6107
+ this.aadharVerifyLoader = false;
6108
+ }
6109
+ ngOnInit() {
6110
+ this.getKycDetails();
6111
+ }
6112
+ ngOnDestroy() {
6113
+ this.kycDetailsSubscription?.unsubscribe();
6114
+ }
6115
+ getKycDetails() {
6116
+ this.kycDetailsSubscription = this.restService.getKycDetails().subscribe((res) => {
6117
+ if (res.message) {
6118
+ this.isPanVerified = res.message.panVerified === 'VALID';
6119
+ this.isAadharverified = res.message.aadhaarVerified === 'VALID';
6120
+ this.aadharRequest.aadhaarNumber = res.message.aadharNo;
6121
+ this.panRequest.panNumber = res.message.panNo;
6122
+ }
6123
+ }, (err) => {
6124
+ });
6125
+ }
6126
+ verifyPanNumber() {
6127
+ this.panVerifyLoader = true;
6128
+ if (!this.validatePan()) {
6129
+ this.messageService.add({
6130
+ severity: 'error',
6131
+ summary: 'Pan Number',
6132
+ detail: 'Enter valid PAN number'
6133
+ });
6134
+ this.panVerifyLoader = false;
6135
+ return;
6136
+ }
6137
+ this.restService.verifyPan(this.panRequest).subscribe((res) => {
6138
+ this.isPanVerified = true;
6139
+ this.restService.kycDetails = null;
6140
+ this.panVerifyLoader = false;
6141
+ ;
6142
+ this.checkKycVerification();
6143
+ }, () => {
6144
+ this.panVerifyLoader = false;
6145
+ });
6146
+ }
6147
+ validatePan() {
6148
+ const panRegex = /^[A-Z]{5}[0-9]{4}[A-Z]$/;
6149
+ return panRegex.test(this.panRequest.panNumber);
6150
+ }
6151
+ sendAadharOtp() {
6152
+ this.aadharVerifyLoader = true;
6153
+ if (!this.validateAadhaar()) {
6154
+ this.messageService.add({
6155
+ severity: 'error',
6156
+ summary: 'Aadhar Number',
6157
+ detail: 'Enter valid Aadhar number'
6158
+ });
6159
+ this.aadharVerifyLoader = false;
6160
+ return;
6161
+ }
6162
+ this.restService.sendAadharOtp(this.aadharRequest).subscribe((res) => {
6163
+ this.aadharOtpSent = true;
6164
+ this.messageService.add({
6165
+ severity: 'success',
6166
+ summary: 'OTP Sent',
6167
+ detail: 'AAdhar OTP Sent in registered mobile number'
6168
+ });
6169
+ this.aadharVerifyLoader = false;
6170
+ this.verifyAadharRequest.refId = res.message?.ref_id;
6171
+ }, () => {
6172
+ this.aadharVerifyLoader = false;
6173
+ });
6174
+ }
6175
+ verifyAadharOtp() {
6176
+ this.aadharVerifyLoader = true;
6177
+ this.verifyAadharRequest.otp = "";
6178
+ this.aadharOtpArray.forEach((otp) => {
6179
+ this.verifyAadharRequest.otp += otp;
6180
+ });
6181
+ this.verifyAadharRequest.aadhaarNumber = this.aadharRequest.aadhaarNumber;
6182
+ this.restService.verifyAadharOtp(this.verifyAadharRequest).subscribe((res) => {
6183
+ this.isAadharverified = true;
6184
+ this.restService.kycDetails = null;
6185
+ this.aadharVerifyLoader = false;
6186
+ this.checkKycVerification();
6187
+ }, () => {
6188
+ this.aadharVerifyLoader = false;
6189
+ });
6190
+ }
6191
+ validateAadhaar() {
6192
+ const aadhaarRegex = /^[2-9]{1}[0-9]{11}$/;
6193
+ return aadhaarRegex.test(this.aadharRequest.aadhaarNumber);
6194
+ }
6195
+ moveAadharOtpCursor(event, idx) {
6196
+ if (isNaN(Number(event.key)) && event.code != "Backspace")
6197
+ return;
6198
+ if (event.code != "Backspace") {
6199
+ this.aadharOtpArray[idx] = event.key;
6200
+ document.getElementById("aadharOtp_" + (idx + 1))?.focus();
6201
+ }
6202
+ if (event.code == "Backspace" && !this.aadharOtpArray[idx]) {
6203
+ document.getElementById("aadharOtp_" + (idx - 1))?.focus();
6204
+ }
6205
+ }
6206
+ checkKycVerification() {
6207
+ if (this.isAadharverified && this.isPanVerified) {
6208
+ document.getElementById('closeKycCanvas')?.click();
6209
+ this.dialogRef?.close();
6210
+ }
6211
+ }
6212
+ closeDialog() {
6213
+ this.dialogRef?.close();
6214
+ }
6215
+ redirectToProductList() {
6216
+ this.router.navigate(['property-list']);
6217
+ }
6218
+ get isMobile() {
6219
+ return window.innerWidth <= 475;
6220
+ }
6221
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: KycDetailsComponent, deps: [{ token: RestService }, { token: i5$2.MessageService }, { token: i2$2.Router }, { token: i5.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
6222
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: KycDetailsComponent, isStandalone: true, selector: "simpo-kyc-details", providers: [MessageService], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section class=\"main-section\">\r\n <div class=\"display-center\" *ngIf=\"!(isPanVerified && isAadharverified)\">\r\n <img class=\"img\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/970332c1740030187726kyc.png\"\r\n alt=\"\">\r\n <div class=\"text-group\">\r\n <p class=\"heading\">Complete Your KYC to start Investing</p>\r\n <p class=\"desc\">Before you can invest, we need to verify your identity, simply upload your documents,\r\n <br> submit your KYC, and let us handle the rest\r\n </p>\r\n </div>\r\n <button class=\"submit-btn\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">Submit KYC Now</button>\r\n </div>\r\n <div *ngIf=\"isPanVerified && isAadharverified\" class=\"display-center\">\r\n <div class=\"w-50\">\r\n <div class=\"secured\">\r\n <mat-icon>security</mat-icon>\r\n <p>Your Data is Safe & Secure</p>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">PAN Number</label>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"panRequest.panNumber\" disabled>\r\n <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">Aadhar Number</label>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"aadharRequest.aadhaarNumber\" disabled>\r\n <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-15 text-center\">\r\n <button class=\"submit-btn\" (click)=\"redirectToProductList()\">Let's Grow Wealth</button>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\">\r\n <div class=\"header\">\r\n <p>KYC Details</p>\r\n </div>\r\n <div class=\"middle-section\">\r\n <div class=\"body\">\r\n <div class=\"secured\">\r\n <mat-icon>security</mat-icon>\r\n <p>Your Data is Safe & Secure</p>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">PAN Number</label>\r\n <p class=\"verify-text\" (click)=\"verifyPanNumber()\" *ngIf=\"!isPanVerified && !panVerifyLoader\">Verify</p>\r\n <div *ngIf=\"panVerifyLoader\" class=\"kyc-detail\"><mat-spinner></mat-spinner></div>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"panRequest.panNumber\" [disabled]=\"isPanVerified\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\" *ngIf=\"isPanVerified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">Aadhar Number</label>\r\n <p class=\"verify-text\" (click)=\"sendAadharOtp()\" *ngIf=\"!aadharOtpSent && !aadharVerifyLoader\">Send OTP</p>\r\n <div *ngIf=\"aadharVerifyLoader && !aadharOtpSent\" class=\"kyc-detail\"><mat-spinner></mat-spinner></div>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"aadharRequest.aadhaarNumber\" [disabled]=\"isAadharverified\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\" *ngIf=\"aadharOtpSent\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\" *ngIf=\"aadharOtpSent\">\r\n <label for=\"\">Enter OTP</label>\r\n\r\n <div id=\"otp\" class=\"otp-input\">\r\n <ng-container *ngFor=\"let otp of [1,2,3,4,5,6]; let idx = index\">\r\n <input type=\"number\" max=\"9\" class=\"otp-input\" [(ngModel)]=\"aadharOtpArray[idx]\"\r\n (keyup)=\"moveAadharOtpCursor($event, idx)\" [id]=\"'aadharOtp_'+idx\" />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button class=\"cancel-btn\" data-bs-dismiss=\"offcanvas\" id=\"closeKycCanvas\" (click)=\"closeDialog()\">Cancel</button>\r\n <button class=\"submit-btn\" *ngIf=\"aadharOtpSent && !aadharVerifyLoader\" (click)=\"verifyAadharOtp()\">Verify</button>\r\n <button class=\"d-flex submit-btn\" *ngIf=\"aadharVerifyLoader && aadharOtpSent\">\r\n <mat-spinner></mat-spinner> Verifying\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".main-section{height:100%;background:#fff;border-radius:10px}.display-center{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.img{width:35%}.text-group{text-align:center;margin-top:3rem;margin-bottom:2rem}.heading{font-size:14px;font-family:DM SANS;font-weight:700;color:#000}.desc{font-size:14px;color:#0009;font-family:DM SANS;font-weight:500}.submit-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:#f8a938;color:#fff;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.cancel-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:transparent;color:#f8a938;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.header{padding:20px;border:1px solid rgba(14,35,60,.16);height:60px}.header p{font-size:17px;margin-bottom:0;font-weight:600;font-family:Inter}.middle-section{height:calc(100vh - 120px);overflow:scroll;background:#fcfcfc}.footer{position:absolute;bottom:0;height:60px;display:flex;align-items:center;justify-content:flex-end;border-top:1px solid rgba(14,35,60,.16);width:100%;padding:20px;gap:14px}.mat-mdc-progress-spinner{height:20px!important;width:20px!important}.offcanvas{width:40%;z-index:100000000}.body{background:#fff;margin:2.5rem;padding:2rem;border-radius:10px}.body label{font-size:14px;font-family:DM SANS;color:#434443;font-weight:400}.w-50{width:50%}.secured{display:flex;justify-content:center;gap:10px}.secured p{font-size:15px;font-family:DM SANS;font-weight:400;color:#0009}.secured mat-icon{display:flex;font-size:18px;color:#00dd80;align-items:center;justify-content:center}.input-box{width:100%;display:flex;justify-content:space-between;padding:10px;border:1px solid rgba(208,213,221,1);border-radius:7px;margin-top:8px}.input-box input{width:90%;border:none;outline:none;font-size:16px;font-family:DM SANS;background:#fff}.verified{color:#1ac100}p{margin-bottom:0}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.mt-15{margin-top:1.5rem}.otp-input{display:flex;gap:20px;margin-top:8px}.otp-input input{width:59px;border:1px solid rgba(208,213,221,1);height:54px;border-radius:8px;outline:none;justify-content:center;text-align:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.justify-space{justify-content:space-between}.verify-text{font-size:13px;font-family:DM SANS;color:#f8a938;cursor:pointer}@media screen and (max-width: 475px){.offcanvas{width:100%}}\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 }, { 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: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
6223
+ }
6224
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: KycDetailsComponent, decorators: [{
6225
+ type: Component,
6226
+ args: [{ selector: 'simpo-kyc-details', standalone: true, imports: [MatIconModule, CommonModule, FormsModule, MatProgressSpinnerModule, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section class=\"main-section\">\r\n <div class=\"display-center\" *ngIf=\"!(isPanVerified && isAadharverified)\">\r\n <img class=\"img\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/970332c1740030187726kyc.png\"\r\n alt=\"\">\r\n <div class=\"text-group\">\r\n <p class=\"heading\">Complete Your KYC to start Investing</p>\r\n <p class=\"desc\">Before you can invest, we need to verify your identity, simply upload your documents,\r\n <br> submit your KYC, and let us handle the rest\r\n </p>\r\n </div>\r\n <button class=\"submit-btn\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">Submit KYC Now</button>\r\n </div>\r\n <div *ngIf=\"isPanVerified && isAadharverified\" class=\"display-center\">\r\n <div class=\"w-50\">\r\n <div class=\"secured\">\r\n <mat-icon>security</mat-icon>\r\n <p>Your Data is Safe & Secure</p>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">PAN Number</label>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"panRequest.panNumber\" disabled>\r\n <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">Aadhar Number</label>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"aadharRequest.aadhaarNumber\" disabled>\r\n <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-15 text-center\">\r\n <button class=\"submit-btn\" (click)=\"redirectToProductList()\">Let's Grow Wealth</button>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\">\r\n <div class=\"header\">\r\n <p>KYC Details</p>\r\n </div>\r\n <div class=\"middle-section\">\r\n <div class=\"body\">\r\n <div class=\"secured\">\r\n <mat-icon>security</mat-icon>\r\n <p>Your Data is Safe & Secure</p>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">PAN Number</label>\r\n <p class=\"verify-text\" (click)=\"verifyPanNumber()\" *ngIf=\"!isPanVerified && !panVerifyLoader\">Verify</p>\r\n <div *ngIf=\"panVerifyLoader\" class=\"kyc-detail\"><mat-spinner></mat-spinner></div>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"panRequest.panNumber\" [disabled]=\"isPanVerified\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\" *ngIf=\"isPanVerified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">Aadhar Number</label>\r\n <p class=\"verify-text\" (click)=\"sendAadharOtp()\" *ngIf=\"!aadharOtpSent && !aadharVerifyLoader\">Send OTP</p>\r\n <div *ngIf=\"aadharVerifyLoader && !aadharOtpSent\" class=\"kyc-detail\"><mat-spinner></mat-spinner></div>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"aadharRequest.aadhaarNumber\" [disabled]=\"isAadharverified\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\" *ngIf=\"aadharOtpSent\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\" *ngIf=\"aadharOtpSent\">\r\n <label for=\"\">Enter OTP</label>\r\n\r\n <div id=\"otp\" class=\"otp-input\">\r\n <ng-container *ngFor=\"let otp of [1,2,3,4,5,6]; let idx = index\">\r\n <input type=\"number\" max=\"9\" class=\"otp-input\" [(ngModel)]=\"aadharOtpArray[idx]\"\r\n (keyup)=\"moveAadharOtpCursor($event, idx)\" [id]=\"'aadharOtp_'+idx\" />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button class=\"cancel-btn\" data-bs-dismiss=\"offcanvas\" id=\"closeKycCanvas\" (click)=\"closeDialog()\">Cancel</button>\r\n <button class=\"submit-btn\" *ngIf=\"aadharOtpSent && !aadharVerifyLoader\" (click)=\"verifyAadharOtp()\">Verify</button>\r\n <button class=\"d-flex submit-btn\" *ngIf=\"aadharVerifyLoader && aadharOtpSent\">\r\n <mat-spinner></mat-spinner> Verifying\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".main-section{height:100%;background:#fff;border-radius:10px}.display-center{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.img{width:35%}.text-group{text-align:center;margin-top:3rem;margin-bottom:2rem}.heading{font-size:14px;font-family:DM SANS;font-weight:700;color:#000}.desc{font-size:14px;color:#0009;font-family:DM SANS;font-weight:500}.submit-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:#f8a938;color:#fff;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.cancel-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:transparent;color:#f8a938;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.header{padding:20px;border:1px solid rgba(14,35,60,.16);height:60px}.header p{font-size:17px;margin-bottom:0;font-weight:600;font-family:Inter}.middle-section{height:calc(100vh - 120px);overflow:scroll;background:#fcfcfc}.footer{position:absolute;bottom:0;height:60px;display:flex;align-items:center;justify-content:flex-end;border-top:1px solid rgba(14,35,60,.16);width:100%;padding:20px;gap:14px}.mat-mdc-progress-spinner{height:20px!important;width:20px!important}.offcanvas{width:40%;z-index:100000000}.body{background:#fff;margin:2.5rem;padding:2rem;border-radius:10px}.body label{font-size:14px;font-family:DM SANS;color:#434443;font-weight:400}.w-50{width:50%}.secured{display:flex;justify-content:center;gap:10px}.secured p{font-size:15px;font-family:DM SANS;font-weight:400;color:#0009}.secured mat-icon{display:flex;font-size:18px;color:#00dd80;align-items:center;justify-content:center}.input-box{width:100%;display:flex;justify-content:space-between;padding:10px;border:1px solid rgba(208,213,221,1);border-radius:7px;margin-top:8px}.input-box input{width:90%;border:none;outline:none;font-size:16px;font-family:DM SANS;background:#fff}.verified{color:#1ac100}p{margin-bottom:0}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.mt-15{margin-top:1.5rem}.otp-input{display:flex;gap:20px;margin-top:8px}.otp-input input{width:59px;border:1px solid rgba(208,213,221,1);height:54px;border-radius:8px;outline:none;justify-content:center;text-align:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.justify-space{justify-content:space-between}.verify-text{font-size:13px;font-family:DM SANS;color:#f8a938;cursor:pointer}@media screen and (max-width: 475px){.offcanvas{width:100%}}\n"] }]
6227
+ }], ctorParameters: () => [{ type: RestService }, { type: i5$2.MessageService }, { type: i2$2.Router }, { type: i5.MatDialogRef, decorators: [{
6228
+ type: Optional
6229
+ }] }] });
6230
+
6231
+ class ProfileSectionComponent {
6232
+ constructor(restService) {
6233
+ this.restService = restService;
6234
+ this.selectedPanel = "PORTFOLIO";
6235
+ this.sidePanelTabs = [
6236
+ { value: "PORTFOLIO", viewValue: "My Portfolio" },
6237
+ { value: "PROPERTIES", viewValue: "My Properties" },
6238
+ // {value : "ORDERS" , viewValue : "My Orders"},
6239
+ // {value : "DOCUMENTS" , viewValue : "My Documents"},
6240
+ // {value : "STATEMENT" , viewValue : "My Statements"},
6241
+ { value: "KYC", viewValue: "KYC" },
6242
+ // {value : "HELP" , viewValue : "Need Help"},
6243
+ ];
6244
+ }
6245
+ ngOnInit() {
6246
+ this.getInvestorDetails();
6247
+ }
6248
+ getInvestorDetails() {
6249
+ this.restService.getInvesterById().subscribe((res) => {
6250
+ this.investorDetails = res.message;
6251
+ });
6252
+ }
6253
+ getInitials() {
6254
+ const nameParts = this.investorDetails?.fullName?.split(' ');
6255
+ const initials = nameParts?.map((part) => part.charAt(0).toUpperCase()).join('');
6256
+ return initials;
6257
+ }
6258
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProfileSectionComponent, deps: [{ token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
6259
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProfileSectionComponent, isStandalone: true, selector: "simpo-profile-section", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"main-container d-flex justify-content-center\">\r\n <div class=\"side-panel\">\r\n <div class=\"details\">\r\n <div class=\"left-right d-flex align-items-center gap-10\">\r\n <div class=\"logo left w-15\">{{ getInitials() }}</div><div class=\"right name w-85\">{{investorDetails?.fullName || 'N/A'}}</div>\r\n </div>\r\n <div class=\"left-right d-flex align-items-center gap-10\">\r\n <div class=\"left w-15\"><mat-icon class=\"d-flex align-items-center justify-content-center f-18\"> phone</mat-icon>\r\n </div><div class=\"right w-80\">{{investorDetails?.phoneNumber || 'N/A'}}</div>\r\n </div>\r\n <div class=\"left-right d-flex align-items-center gap-10\">\r\n <div class=\"left w-15\"><mat-icon class=\" d-flex align-items-center justify-content-center f-18\"> email</mat-icon>\r\n </div><div class=\"right w-80\">{{investorDetails?.emailId || 'N/A'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"tab-section\">\r\n <div class=\"tabs cursor-pointer\" *ngFor=\"let ele of sidePanelTabs\" (click)=\"selectedPanel = ele.value\" [class.activeTab]=\"selectedPanel == ele.value\">\r\n {{ele.viewValue}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"display-section\">\r\n <ng-container *ngIf=\"selectedPanel == 'KYC'\">\r\n <simpo-kyc-details></simpo-kyc-details>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'PORTFOLIO'\">\r\n <simpo-portfolio></simpo-portfolio>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'PROPERTIES'\">\r\n <simpo-properties></simpo-properties>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'ORDERS'\">\r\n <simpo-my-orders></simpo-my-orders>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'DOCUMENTS'\">\r\n <simpo-my-documents></simpo-my-documents>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'STATEMENT'\">\r\n <simpo-my-statement></simpo-my-statement>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'HELP'\">\r\n <simpo-need-help></simpo-need-help>\r\n </ng-container>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.main-container{height:85vh;width:100%;padding:10px 0;gap:15px;background:#f1f6ff}.side-panel{width:18%;background:#fff;border:2px solid rgba(241,246,255,1);border-radius:10px}.display-section{width:60%}.w-15{width:15%}.w-85{width:85%}.cursor-pointer{cursor:pointer}.details{background:#19a6c6;border-radius:10px;padding:10px;margin:15px}.left-right{gap:10px;margin-bottom:10px}.logo{background:#e6f0ff;border-radius:50%;font-size:14px;text-align:center;font-weight:600;line-height:24px;padding:3px;color:#405071!important}.name{font-size:14px;font-weight:600;line-height:24px;color:#fff!important}.f-18{font-size:18px}.gap-10{gap:10px}.left{color:#fffc}.right{font-weight:500;font-size:14px;line-height:24px;color:#fffc}.tab-section{margin-top:15px}.tabs{margin-bottom:25px;font-weight:500;font-size:16px;line-height:24px;color:#01161e;margin-left:8px}.activeTab{border-left:8px solid rgba(248,169,56,1);font-weight:700!important;color:#219ebc;margin-right:15px;background:#f1f3f7;padding:10px;border-radius:0 6px 6px 0;margin-left:unset}\n"], dependencies: [{ kind: "component", type: PortfolioComponent, selector: "simpo-portfolio" }, { kind: "component", type: PropertiesComponent, selector: "simpo-properties" }, { kind: "component", type: MyDocumentsComponent, selector: "simpo-my-documents" }, { kind: "component", type: MyOrdersComponent, selector: "simpo-my-orders" }, { kind: "component", type: MyStatementComponent, selector: "simpo-my-statement" }, { kind: "component", type: NeedHelpComponent, selector: "simpo-need-help" }, { 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KycDetailsComponent, selector: "simpo-kyc-details" }] }); }
6260
+ }
6261
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProfileSectionComponent, decorators: [{
6262
+ type: Component,
6263
+ args: [{ selector: 'simpo-profile-section', standalone: true, imports: [PortfolioComponent, PropertiesComponent, MyDocumentsComponent, MyOrdersComponent, MyStatementComponent, NeedHelpComponent, MatIcon, CommonModule,
6264
+ KycDetailsComponent
6265
+ ], template: "<section class=\"main-container d-flex justify-content-center\">\r\n <div class=\"side-panel\">\r\n <div class=\"details\">\r\n <div class=\"left-right d-flex align-items-center gap-10\">\r\n <div class=\"logo left w-15\">{{ getInitials() }}</div><div class=\"right name w-85\">{{investorDetails?.fullName || 'N/A'}}</div>\r\n </div>\r\n <div class=\"left-right d-flex align-items-center gap-10\">\r\n <div class=\"left w-15\"><mat-icon class=\"d-flex align-items-center justify-content-center f-18\"> phone</mat-icon>\r\n </div><div class=\"right w-80\">{{investorDetails?.phoneNumber || 'N/A'}}</div>\r\n </div>\r\n <div class=\"left-right d-flex align-items-center gap-10\">\r\n <div class=\"left w-15\"><mat-icon class=\" d-flex align-items-center justify-content-center f-18\"> email</mat-icon>\r\n </div><div class=\"right w-80\">{{investorDetails?.emailId || 'N/A'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"tab-section\">\r\n <div class=\"tabs cursor-pointer\" *ngFor=\"let ele of sidePanelTabs\" (click)=\"selectedPanel = ele.value\" [class.activeTab]=\"selectedPanel == ele.value\">\r\n {{ele.viewValue}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"display-section\">\r\n <ng-container *ngIf=\"selectedPanel == 'KYC'\">\r\n <simpo-kyc-details></simpo-kyc-details>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'PORTFOLIO'\">\r\n <simpo-portfolio></simpo-portfolio>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'PROPERTIES'\">\r\n <simpo-properties></simpo-properties>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'ORDERS'\">\r\n <simpo-my-orders></simpo-my-orders>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'DOCUMENTS'\">\r\n <simpo-my-documents></simpo-my-documents>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'STATEMENT'\">\r\n <simpo-my-statement></simpo-my-statement>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'HELP'\">\r\n <simpo-need-help></simpo-need-help>\r\n </ng-container>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.main-container{height:85vh;width:100%;padding:10px 0;gap:15px;background:#f1f6ff}.side-panel{width:18%;background:#fff;border:2px solid rgba(241,246,255,1);border-radius:10px}.display-section{width:60%}.w-15{width:15%}.w-85{width:85%}.cursor-pointer{cursor:pointer}.details{background:#19a6c6;border-radius:10px;padding:10px;margin:15px}.left-right{gap:10px;margin-bottom:10px}.logo{background:#e6f0ff;border-radius:50%;font-size:14px;text-align:center;font-weight:600;line-height:24px;padding:3px;color:#405071!important}.name{font-size:14px;font-weight:600;line-height:24px;color:#fff!important}.f-18{font-size:18px}.gap-10{gap:10px}.left{color:#fffc}.right{font-weight:500;font-size:14px;line-height:24px;color:#fffc}.tab-section{margin-top:15px}.tabs{margin-bottom:25px;font-weight:500;font-size:16px;line-height:24px;color:#01161e;margin-left:8px}.activeTab{border-left:8px solid rgba(248,169,56,1);font-weight:700!important;color:#219ebc;margin-right:15px;background:#f1f3f7;padding:10px;border-radius:0 6px 6px 0;margin-left:unset}\n"] }]
6266
+ }], ctorParameters: () => [{ type: RestService }], propDecorators: { data: [{
6267
+ type: Input
6268
+ }] } });
6269
+
5885
6270
  class NavbarSectionComponent {
5886
- // matDialog = inject(MatDialog);
5887
6271
  constructor(_eventService, router, activatedRoute, matDialog, bottomSheet, cookieService, storageService, restService, messageService) {
5888
6272
  this._eventService = _eventService;
5889
6273
  this.router = router;
@@ -5900,6 +6284,8 @@ class NavbarSectionComponent {
5900
6284
  this.searchText = "";
5901
6285
  this.theme = ProductCardTheme;
5902
6286
  this.HeaderStyling = HEADER_STYLING;
6287
+ // matDialog = inject(MatDialog);
6288
+ this.realEstateMobileMenu = false;
5903
6289
  this.isNavbarOpen = false;
5904
6290
  this.screenWidth = 475;
5905
6291
  this.showEditors = false;
@@ -5953,6 +6339,9 @@ class NavbarSectionComponent {
5953
6339
  // this.style.background.color = this.nextComponent.styles.background.color;
5954
6340
  // this.style.background.accentColor = this.nextComponent.styles.background.accentColor;
5955
6341
  // }
6342
+ setTimeout(() => {
6343
+ this.realEstateMobileMenu = true;
6344
+ }, 1000);
5956
6345
  }
5957
6346
  getScreenSize(event) {
5958
6347
  if (typeof window !== 'undefined') {
@@ -6078,8 +6467,11 @@ class NavbarSectionComponent {
6078
6467
  this.router.navigate(['']);
6079
6468
  });
6080
6469
  }
6470
+ closeMobileMenu() {
6471
+ document.getElementById('closeMobileMenu')?.click();
6472
+ }
6081
6473
  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 }, { token: i5$2.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
6082
- 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)" } }, providers: [MessageService], 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 *ngIf=\"isLoggedIn\">\r\n <ng-container *ngTemplateOutlet=\"realEstateButtontemplate\"></ng-container>\r\n </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\" [matMenuTriggerFor]=\"menu\">\r\n <p class=\"investorName\">Hv</p>\r\n <mat-icon>keyboard_arrow_down</mat-icon>\r\n </div>\r\n <mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=\"redirectToProfile()\">Profile</button>\r\n <button mat-menu-item (click)=\"logout()\">Logout</button>\r\n </mat-menu>\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;cursor:pointer}.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: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
6474
+ 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)" } }, providers: [MessageService], 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\" *ngIf=\"!isMobile\">\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 *ngIf=\"isLoggedIn\">\r\n <ng-container *ngTemplateOutlet=\"realEstateButtontemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"isMobile\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">\r\n <mat-icon style=\"color: black;\">menu</mat-icon>\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\" [matMenuTriggerFor]=\"menu\">\r\n <p class=\"investorName\">Hv</p>\r\n <mat-icon>keyboard_arrow_down</mat-icon>\r\n </div>\r\n <mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=\"redirectToProfile()\">Profile</button>\r\n <button mat-menu-item (click)=\"logout()\">Logout</button>\r\n </mat-menu>\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<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\">\r\n <div class=\"offcanvas-header\">\r\n <h5 class=\"offcanvas-title\" id=\"offcanvasRightLabel\">Offcanvas right</h5>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\" id=\"closeMobileMenu\"></button>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <!-- <ng-container *ngIf=\"realEstateMobileMenu\">\r\n <simpo-profile-section (tabChanged)=\"closeMobileMenu()\"></simpo-profile-section>\r\n </ng-container> -->\r\n </div>\r\n</div>\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;cursor:pointer}.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}.offcanvas{z-index:10000}\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: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
6083
6475
  }
6084
6476
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, decorators: [{
6085
6477
  type: Component,
@@ -6114,8 +6506,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
6114
6506
  MatBottomSheetModule,
6115
6507
  MatButtonModule,
6116
6508
  MatMenuModule,
6117
- SpacingHorizontalDirective
6118
- ], providers: [MessageService], 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 *ngIf=\"isLoggedIn\">\r\n <ng-container *ngTemplateOutlet=\"realEstateButtontemplate\"></ng-container>\r\n </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\" [matMenuTriggerFor]=\"menu\">\r\n <p class=\"investorName\">Hv</p>\r\n <mat-icon>keyboard_arrow_down</mat-icon>\r\n </div>\r\n <mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=\"redirectToProfile()\">Profile</button>\r\n <button mat-menu-item (click)=\"logout()\">Logout</button>\r\n </mat-menu>\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;cursor:pointer}.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"] }]
6509
+ SpacingHorizontalDirective,
6510
+ ProfileSectionComponent
6511
+ ], providers: [MessageService], 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\" *ngIf=\"!isMobile\">\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 *ngIf=\"isLoggedIn\">\r\n <ng-container *ngTemplateOutlet=\"realEstateButtontemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div *ngIf=\"isMobile\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">\r\n <mat-icon style=\"color: black;\">menu</mat-icon>\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\" [matMenuTriggerFor]=\"menu\">\r\n <p class=\"investorName\">Hv</p>\r\n <mat-icon>keyboard_arrow_down</mat-icon>\r\n </div>\r\n <mat-menu #menu=\"matMenu\">\r\n <button mat-menu-item (click)=\"redirectToProfile()\">Profile</button>\r\n <button mat-menu-item (click)=\"logout()\">Logout</button>\r\n </mat-menu>\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<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\">\r\n <div class=\"offcanvas-header\">\r\n <h5 class=\"offcanvas-title\" id=\"offcanvasRightLabel\">Offcanvas right</h5>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close\" id=\"closeMobileMenu\"></button>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <!-- <ng-container *ngIf=\"realEstateMobileMenu\">\r\n <simpo-profile-section (tabChanged)=\"closeMobileMenu()\"></simpo-profile-section>\r\n </ng-container> -->\r\n </div>\r\n</div>\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;cursor:pointer}.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}.offcanvas{z-index:10000}\n"] }]
6119
6512
  }], 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 }, { type: i5$2.MessageService }], propDecorators: { data: [{
6120
6513
  type: Input
6121
6514
  }], nextComponent: [{
@@ -9881,169 +10274,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
9881
10274
  SanitizeHtmlPipe,
9882
10275
  ContentFitDirective,
9883
10276
  OverlayDirective,
9884
- SpacingAroundDirective,
9885
- ButtonDirectiveDirective,
9886
- MatIconModule,
9887
- ContentTitleDirective,
9888
- SpacingHorizontalDirective
9889
- ], 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"] }]
9890
- }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }], propDecorators: { data: [{
9891
- type: Input
9892
- }], index: [{
9893
- type: Input
9894
- }], edit: [{
9895
- type: Input
9896
- }], delete: [{
9897
- type: Input
9898
- }], customClass: [{
9899
- type: Input
9900
- }] } });
9901
-
9902
- class KycDetailsComponent {
9903
- constructor(restService, messageService, router, dialogRef) {
9904
- this.restService = restService;
9905
- this.messageService = messageService;
9906
- this.router = router;
9907
- this.dialogRef = dialogRef;
9908
- this.panRequest = {
9909
- panNumber: ''
9910
- };
9911
- this.aadharRequest = {
9912
- aadhaarNumber: ''
9913
- };
9914
- this.verifyAadharRequest = {
9915
- otp: '',
9916
- refId: '',
9917
- aadhaarNumber: ''
9918
- };
9919
- this.aadharOtpArray = new Array(6).fill('');
9920
- this.isPanVerified = false;
9921
- this.isAadharverified = false;
9922
- this.aadharOtpSent = false;
9923
- this.panVerifyLoader = false;
9924
- this.aadharVerifyLoader = false;
9925
- }
9926
- ngOnInit() {
9927
- this.getKycDetails();
9928
- }
9929
- ngOnDestroy() {
9930
- this.kycDetailsSubscription?.unsubscribe();
9931
- }
9932
- getKycDetails() {
9933
- this.kycDetailsSubscription = this.restService.getKycDetails().subscribe((res) => {
9934
- if (res.message) {
9935
- this.isPanVerified = res.message.panVerified === 'VALID';
9936
- this.isAadharverified = res.message.aadhaarVerified === 'VALID';
9937
- this.aadharRequest.aadhaarNumber = res.message.aadharNo;
9938
- this.panRequest.panNumber = res.message.panNo;
9939
- }
9940
- }, (err) => {
9941
- });
9942
- }
9943
- verifyPanNumber() {
9944
- this.panVerifyLoader = true;
9945
- if (!this.validatePan()) {
9946
- this.messageService.add({
9947
- severity: 'error',
9948
- summary: 'Pan Number',
9949
- detail: 'Enter valid PAN number'
9950
- });
9951
- this.panVerifyLoader = false;
9952
- return;
9953
- }
9954
- this.restService.verifyPan(this.panRequest).subscribe((res) => {
9955
- this.isPanVerified = true;
9956
- this.restService.kycDetails = null;
9957
- this.panVerifyLoader = false;
9958
- ;
9959
- this.checkKycVerification();
9960
- }, () => {
9961
- this.panVerifyLoader = false;
9962
- });
9963
- }
9964
- validatePan() {
9965
- const panRegex = /^[A-Z]{5}[0-9]{4}[A-Z]$/;
9966
- return panRegex.test(this.panRequest.panNumber);
9967
- }
9968
- sendAadharOtp() {
9969
- this.aadharVerifyLoader = true;
9970
- if (!this.validateAadhaar()) {
9971
- this.messageService.add({
9972
- severity: 'error',
9973
- summary: 'Aadhar Number',
9974
- detail: 'Enter valid Aadhar number'
9975
- });
9976
- this.aadharVerifyLoader = false;
9977
- return;
9978
- }
9979
- this.restService.sendAadharOtp(this.aadharRequest).subscribe((res) => {
9980
- this.aadharOtpSent = true;
9981
- this.messageService.add({
9982
- severity: 'success',
9983
- summary: 'OTP Sent',
9984
- detail: 'AAdhar OTP Sent in registered mobile number'
9985
- });
9986
- this.aadharVerifyLoader = false;
9987
- this.verifyAadharRequest.refId = res.message?.ref_id;
9988
- }, () => {
9989
- this.aadharVerifyLoader = false;
9990
- });
9991
- }
9992
- verifyAadharOtp() {
9993
- this.aadharVerifyLoader = true;
9994
- this.verifyAadharRequest.otp = "";
9995
- this.aadharOtpArray.forEach((otp) => {
9996
- this.verifyAadharRequest.otp += otp;
9997
- });
9998
- this.verifyAadharRequest.aadhaarNumber = this.aadharRequest.aadhaarNumber;
9999
- this.restService.verifyAadharOtp(this.verifyAadharRequest).subscribe((res) => {
10000
- this.isAadharverified = true;
10001
- this.restService.kycDetails = null;
10002
- this.aadharVerifyLoader = false;
10003
- this.checkKycVerification();
10004
- }, () => {
10005
- this.aadharVerifyLoader = false;
10006
- });
10007
- }
10008
- validateAadhaar() {
10009
- const aadhaarRegex = /^[2-9]{1}[0-9]{11}$/;
10010
- return aadhaarRegex.test(this.aadharRequest.aadhaarNumber);
10011
- }
10012
- moveAadharOtpCursor(event, idx) {
10013
- if (isNaN(Number(event.key)) && event.code != "Backspace")
10014
- return;
10015
- if (event.code != "Backspace") {
10016
- this.aadharOtpArray[idx] = event.key;
10017
- document.getElementById("aadharOtp_" + (idx + 1))?.focus();
10018
- }
10019
- if (event.code == "Backspace" && !this.aadharOtpArray[idx]) {
10020
- document.getElementById("aadharOtp_" + (idx - 1))?.focus();
10021
- }
10022
- }
10023
- checkKycVerification() {
10024
- if (this.isAadharverified && this.isPanVerified) {
10025
- document.getElementById('closeKycCanvas')?.click();
10026
- this.dialogRef?.close();
10027
- }
10028
- }
10029
- closeDialog() {
10030
- this.dialogRef?.close();
10031
- }
10032
- redirectToProductList() {
10033
- this.router.navigate(['property-list']);
10034
- }
10035
- get isMobile() {
10036
- return window.innerWidth <= 475;
10037
- }
10038
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: KycDetailsComponent, deps: [{ token: RestService }, { token: i5$2.MessageService }, { token: i2$2.Router }, { token: i5.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
10039
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: KycDetailsComponent, isStandalone: true, selector: "simpo-kyc-details", providers: [MessageService], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section class=\"main-section\">\r\n <div class=\"display-center\" *ngIf=\"!(isPanVerified && isAadharverified)\">\r\n <img class=\"img\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/970332c1740030187726kyc.png\"\r\n alt=\"\">\r\n <div class=\"text-group\">\r\n <p class=\"heading\">Complete Your KYC to start Investing</p>\r\n <p class=\"desc\">Before you can invest, we need to verify your identity, simply upload your documents,\r\n <br> submit your KYC, and let us handle the rest\r\n </p>\r\n </div>\r\n <button class=\"submit-btn\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">Submit KYC Now</button>\r\n </div>\r\n <div *ngIf=\"isPanVerified && isAadharverified\" class=\"display-center\">\r\n <div class=\"w-50\">\r\n <div class=\"secured\">\r\n <mat-icon>security</mat-icon>\r\n <p>Your Data is Safe & Secure</p>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">PAN Number</label>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"panRequest.panNumber\" disabled>\r\n <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">Aadhar Number</label>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"aadharRequest.aadhaarNumber\" disabled>\r\n <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-15 text-center\">\r\n <button class=\"submit-btn\" (click)=\"redirectToProductList()\">Let's Grow Wealth</button>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\">\r\n <div class=\"header\">\r\n <p>KYC Details</p>\r\n </div>\r\n <div class=\"middle-section\">\r\n <div class=\"body\">\r\n <div class=\"secured\">\r\n <mat-icon>security</mat-icon>\r\n <p>Your Data is Safe & Secure</p>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">PAN Number</label>\r\n <p class=\"verify-text\" (click)=\"verifyPanNumber()\" *ngIf=\"!isPanVerified && !panVerifyLoader\">Verify</p>\r\n <div *ngIf=\"panVerifyLoader\" class=\"kyc-detail\"><mat-spinner></mat-spinner></div>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"panRequest.panNumber\" [disabled]=\"isPanVerified\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\" *ngIf=\"isPanVerified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">Aadhar Number</label>\r\n <p class=\"verify-text\" (click)=\"sendAadharOtp()\" *ngIf=\"!aadharOtpSent && !aadharVerifyLoader\">Send OTP</p>\r\n <div *ngIf=\"aadharVerifyLoader && !aadharOtpSent\" class=\"kyc-detail\"><mat-spinner></mat-spinner></div>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"aadharRequest.aadhaarNumber\" [disabled]=\"isAadharverified\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\" *ngIf=\"aadharOtpSent\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\" *ngIf=\"aadharOtpSent\">\r\n <label for=\"\">Enter OTP</label>\r\n\r\n <div id=\"otp\" class=\"otp-input\">\r\n <ng-container *ngFor=\"let otp of [1,2,3,4,5,6]; let idx = index\">\r\n <input type=\"number\" max=\"9\" class=\"otp-input\" [(ngModel)]=\"aadharOtpArray[idx]\"\r\n (keyup)=\"moveAadharOtpCursor($event, idx)\" [id]=\"'aadharOtp_'+idx\" />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button class=\"cancel-btn\" data-bs-dismiss=\"offcanvas\" id=\"closeKycCanvas\" (click)=\"closeDialog()\">Cancel</button>\r\n <button class=\"submit-btn\" *ngIf=\"aadharOtpSent && !aadharVerifyLoader\" (click)=\"verifyAadharOtp()\">Verify</button>\r\n <button class=\"d-flex submit-btn\" *ngIf=\"aadharVerifyLoader && aadharOtpSent\">\r\n <mat-spinner></mat-spinner> Verifying\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".main-section{height:100%;background:#fff;border-radius:10px}.display-center{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.img{width:35%}.text-group{text-align:center;margin-top:3rem;margin-bottom:2rem}.heading{font-size:14px;font-family:DM SANS;font-weight:700;color:#000}.desc{font-size:14px;color:#0009;font-family:DM SANS;font-weight:500}.submit-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:#f8a938;color:#fff;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.cancel-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:transparent;color:#f8a938;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.header{padding:20px;border:1px solid rgba(14,35,60,.16);height:60px}.header p{font-size:17px;margin-bottom:0;font-weight:600;font-family:Inter}.middle-section{height:calc(100vh - 120px);overflow:scroll;background:#fcfcfc}.footer{position:absolute;bottom:0;height:60px;display:flex;align-items:center;justify-content:flex-end;border-top:1px solid rgba(14,35,60,.16);width:100%;padding:20px;gap:14px}.mat-mdc-progress-spinner{height:20px!important;width:20px!important}.offcanvas{width:40%;z-index:100000000}.body{background:#fff;margin:2.5rem;padding:2rem;border-radius:10px}.body label{font-size:14px;font-family:DM SANS;color:#434443;font-weight:400}.w-50{width:50%}.secured{display:flex;justify-content:center;gap:10px}.secured p{font-size:15px;font-family:DM SANS;font-weight:400;color:#0009}.secured mat-icon{display:flex;font-size:18px;color:#00dd80;align-items:center;justify-content:center}.input-box{width:100%;display:flex;justify-content:space-between;padding:10px;border:1px solid rgba(208,213,221,1);border-radius:7px;margin-top:8px}.input-box input{width:90%;border:none;outline:none;font-size:16px;font-family:DM SANS;background:#fff}.verified{color:#1ac100}p{margin-bottom:0}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.mt-15{margin-top:1.5rem}.otp-input{display:flex;gap:20px;margin-top:8px}.otp-input input{width:59px;border:1px solid rgba(208,213,221,1);height:54px;border-radius:8px;outline:none;justify-content:center;text-align:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.justify-space{justify-content:space-between}.verify-text{font-size:13px;font-family:DM SANS;color:#f8a938;cursor:pointer}@media screen and (max-width: 475px){.offcanvas{width:100%}}\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 }, { 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: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
10040
- }
10041
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: KycDetailsComponent, decorators: [{
10042
- type: Component,
10043
- args: [{ selector: 'simpo-kyc-details', standalone: true, imports: [MatIconModule, CommonModule, FormsModule, MatProgressSpinnerModule, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section class=\"main-section\">\r\n <div class=\"display-center\" *ngIf=\"!(isPanVerified && isAadharverified)\">\r\n <img class=\"img\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/970332c1740030187726kyc.png\"\r\n alt=\"\">\r\n <div class=\"text-group\">\r\n <p class=\"heading\">Complete Your KYC to start Investing</p>\r\n <p class=\"desc\">Before you can invest, we need to verify your identity, simply upload your documents,\r\n <br> submit your KYC, and let us handle the rest\r\n </p>\r\n </div>\r\n <button class=\"submit-btn\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">Submit KYC Now</button>\r\n </div>\r\n <div *ngIf=\"isPanVerified && isAadharverified\" class=\"display-center\">\r\n <div class=\"w-50\">\r\n <div class=\"secured\">\r\n <mat-icon>security</mat-icon>\r\n <p>Your Data is Safe & Secure</p>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">PAN Number</label>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"panRequest.panNumber\" disabled>\r\n <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">Aadhar Number</label>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"aadharRequest.aadhaarNumber\" disabled>\r\n <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"mt-15 text-center\">\r\n <button class=\"submit-btn\" (click)=\"redirectToProductList()\">Let's Grow Wealth</button>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\">\r\n <div class=\"header\">\r\n <p>KYC Details</p>\r\n </div>\r\n <div class=\"middle-section\">\r\n <div class=\"body\">\r\n <div class=\"secured\">\r\n <mat-icon>security</mat-icon>\r\n <p>Your Data is Safe & Secure</p>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">PAN Number</label>\r\n <p class=\"verify-text\" (click)=\"verifyPanNumber()\" *ngIf=\"!isPanVerified && !panVerifyLoader\">Verify</p>\r\n <div *ngIf=\"panVerifyLoader\" class=\"kyc-detail\"><mat-spinner></mat-spinner></div>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"panRequest.panNumber\" [disabled]=\"isPanVerified\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\" *ngIf=\"isPanVerified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">Aadhar Number</label>\r\n <p class=\"verify-text\" (click)=\"sendAadharOtp()\" *ngIf=\"!aadharOtpSent && !aadharVerifyLoader\">Send OTP</p>\r\n <div *ngIf=\"aadharVerifyLoader && !aadharOtpSent\" class=\"kyc-detail\"><mat-spinner></mat-spinner></div>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"aadharRequest.aadhaarNumber\" [disabled]=\"isAadharverified\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\" *ngIf=\"aadharOtpSent\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\" *ngIf=\"aadharOtpSent\">\r\n <label for=\"\">Enter OTP</label>\r\n\r\n <div id=\"otp\" class=\"otp-input\">\r\n <ng-container *ngFor=\"let otp of [1,2,3,4,5,6]; let idx = index\">\r\n <input type=\"number\" max=\"9\" class=\"otp-input\" [(ngModel)]=\"aadharOtpArray[idx]\"\r\n (keyup)=\"moveAadharOtpCursor($event, idx)\" [id]=\"'aadharOtp_'+idx\" />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button class=\"cancel-btn\" data-bs-dismiss=\"offcanvas\" id=\"closeKycCanvas\" (click)=\"closeDialog()\">Cancel</button>\r\n <button class=\"submit-btn\" *ngIf=\"aadharOtpSent && !aadharVerifyLoader\" (click)=\"verifyAadharOtp()\">Verify</button>\r\n <button class=\"d-flex submit-btn\" *ngIf=\"aadharVerifyLoader && aadharOtpSent\">\r\n <mat-spinner></mat-spinner> Verifying\r\n </button>\r\n </div>\r\n</div>\r\n", styles: [".main-section{height:100%;background:#fff;border-radius:10px}.display-center{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.img{width:35%}.text-group{text-align:center;margin-top:3rem;margin-bottom:2rem}.heading{font-size:14px;font-family:DM SANS;font-weight:700;color:#000}.desc{font-size:14px;color:#0009;font-family:DM SANS;font-weight:500}.submit-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:#f8a938;color:#fff;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.cancel-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:transparent;color:#f8a938;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.header{padding:20px;border:1px solid rgba(14,35,60,.16);height:60px}.header p{font-size:17px;margin-bottom:0;font-weight:600;font-family:Inter}.middle-section{height:calc(100vh - 120px);overflow:scroll;background:#fcfcfc}.footer{position:absolute;bottom:0;height:60px;display:flex;align-items:center;justify-content:flex-end;border-top:1px solid rgba(14,35,60,.16);width:100%;padding:20px;gap:14px}.mat-mdc-progress-spinner{height:20px!important;width:20px!important}.offcanvas{width:40%;z-index:100000000}.body{background:#fff;margin:2.5rem;padding:2rem;border-radius:10px}.body label{font-size:14px;font-family:DM SANS;color:#434443;font-weight:400}.w-50{width:50%}.secured{display:flex;justify-content:center;gap:10px}.secured p{font-size:15px;font-family:DM SANS;font-weight:400;color:#0009}.secured mat-icon{display:flex;font-size:18px;color:#00dd80;align-items:center;justify-content:center}.input-box{width:100%;display:flex;justify-content:space-between;padding:10px;border:1px solid rgba(208,213,221,1);border-radius:7px;margin-top:8px}.input-box input{width:90%;border:none;outline:none;font-size:16px;font-family:DM SANS;background:#fff}.verified{color:#1ac100}p{margin-bottom:0}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.mt-15{margin-top:1.5rem}.otp-input{display:flex;gap:20px;margin-top:8px}.otp-input input{width:59px;border:1px solid rgba(208,213,221,1);height:54px;border-radius:8px;outline:none;justify-content:center;text-align:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.justify-space{justify-content:space-between}.verify-text{font-size:13px;font-family:DM SANS;color:#f8a938;cursor:pointer}@media screen and (max-width: 475px){.offcanvas{width:100%}}\n"] }]
10044
- }], ctorParameters: () => [{ type: RestService }, { type: i5$2.MessageService }, { type: i2$2.Router }, { type: i5.MatDialogRef, decorators: [{
10045
- type: Optional
10046
- }] }] });
10277
+ SpacingAroundDirective,
10278
+ ButtonDirectiveDirective,
10279
+ MatIconModule,
10280
+ ContentTitleDirective,
10281
+ SpacingHorizontalDirective
10282
+ ], 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"] }]
10283
+ }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }], propDecorators: { data: [{
10284
+ type: Input
10285
+ }], index: [{
10286
+ type: Input
10287
+ }], edit: [{
10288
+ type: Input
10289
+ }], delete: [{
10290
+ type: Input
10291
+ }], customClass: [{
10292
+ type: Input
10293
+ }] } });
10047
10294
 
10048
10295
  class PropertyDetailComponent {
10049
10296
  constructor(restService, activatedRoute, router, matDialog) {
@@ -10405,245 +10652,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
10405
10652
  type: Input
10406
10653
  }] } });
10407
10654
 
10408
- class PropertyViewComponent {
10409
- constructor() {
10410
- this.text = "";
10411
- this.propertyDetails = {
10412
- propertyImage: ["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", "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png"],
10413
- propertyName: "Ananta One - Blue Moon",
10414
- propertyLocation: "RRR Hyderabad, Telangana",
10415
- investedDate: "12 Jun 2024",
10416
- type: "Rental",
10417
- share: "1.40%",
10418
- documents: ["Title deed", "Property Registration Certificate"],
10419
- 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.",
10420
- managedBy: [{ img: "https://media.istockphoto.com/id/1410538853/photo/young-man-in-the-public-park.jpg?s=612x612&w=0&k=20&c=EtRJGnNOFPJ2HniBSLWKzsL9Xf7GHinHd5y2Tx3da0E=", name: "Vijay Shankar", role: "Property Manager" }, { img: "https://t3.ftcdn.net/jpg/01/86/40/16/360_F_186401650_6tXxwc5x3pwuA9bYjJG65l9pCFRIAu06.jpg", name: "Sanjana", role: "Operational Manager" }],
10421
- invested: "₹4.1 L",
10422
- totalSqft: "32",
10423
- irr: "12%",
10424
- imv: "₹4.1 L",
10425
- income: "+₹52 k",
10426
- projectedValue: "₹5.21 L",
10427
- potentialApperciation: "8%",
10428
- guaranteedGrowth: "5%",
10429
- marketMovement: "High"
10430
- };
10431
- }
10432
- ngOnInit() {
10433
- console.log(this.text);
10434
- }
10435
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10436
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertyViewComponent, isStandalone: true, selector: "simpo-property-view", inputs: { text: "text" }, ngImport: i0, template: "<div class=\"main-container w-100 d-flex gap-10\">\r\n <div class=\"left-container w-60\">\r\n <div class=\"property-detail common-style1\">\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide p-relative w-35\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let ele of propertyDetails.propertyImage;let i = index\">\r\n <div class=\"carousel-item active\" [class.active]=\"i\" data-bs-interval=\"3000\">\r\n <img [src]=\"ele\" class=\"d-block w-100 height-30 br-10\" alt=\"property-image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-center\">\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <ng-container *ngFor=\"let ele of propertyDetails.propertyImage;let i = index\">\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\"\r\n [attr.data-bs-slide-to]=\"i\" class=\"active additional-properties\" aria-current=\"true\"\r\n aria-label=\"Slide 1\"></button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"details mt-10\">\r\n <div class=\"top-details d-flex justify-content-between\">\r\n <div class=\"top-left\">\r\n <div class=\"main-text\">{{propertyDetails.propertyName}}</div>\r\n <div class=\"span-text\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\"\r\n alt=\"location image\" width=\"15px\">RRR Hyderabad, Telangana</div>\r\n </div>\r\n <div class=\"top-right d-flex gap-10\">\r\n <div class=\"buy-more common-style2\">\r\n Buy More SQFT\r\n </div>\r\n <div class=\"sell common-style2\">\r\n Sell SQFT\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"bottom-details d-flex gap-10 mt-10 justify-content-center\">\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Invested Date</div>\r\n <div class=\"right\">{{propertyDetails.investedDate}}</div>\r\n </div>\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Property Type</div>\r\n <div class=\"right\">{{propertyDetails.type}}</div>\r\n </div>\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Ownership Share</div>\r\n <div class=\"right\">{{propertyDetails.share}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"common-style1\">\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 propertyDetails.documents\">\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 class=\"common-style1\">\r\n <div class=\"head-about-property\">About Property</div>\r\n <div class=\"about-property-text\">{{propertyDetails.description}}</div>\r\n <div class=\"head-about-property\">Property Managed by</div>\r\n <div class=\"managed-cards d-flex gap-10 w-100\">\r\n <div class=\"card-container br-10\" *ngFor=\"let ele of propertyDetails.managedBy\">\r\n <div class=\"img-container d-flex justify-content-center\">\r\n <img [src]=\"ele.img\" alt=\"Manager Image\" class=\"manage-img\">\r\n </div>\r\n <div class=\"card-details\">\r\n <p class=\"name-text text-center mt-10\">{{ele.name}}</p>\r\n <p class=\"role-text text-center\">{{ele.role}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-container w-40\">\r\n <div class=\"right-content\">\r\n <div class=\"right-head\">Holdings Details</div>\r\n <div class=\"holding-details common-style3\">\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails.invested}}</div>\r\n <div class=\"bottom\">Invested</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails.totalSqft}}</div>\r\n <div class=\"bottom\">Sq.ft</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails.irr}}</div>\r\n <div class=\"bottom\">Indicative Market Value</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails.imv}}</div>\r\n <div class=\"bottom\">Internal Returns Rate</div>\r\n </div>\r\n </div>\r\n <div class=\"income br-0-10\">\r\n <div class=\"left-right-1\">\r\n <div class=\"left-1\">Profit/Loss</div><div class=\"right-1\">{{propertyDetails.income}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-content\">\r\n <div class=\"right-head\">Financial Projections</div>\r\n <div class=\"financial-details common-style3 br-0-10\">\r\n <div class=\"right-left-1 d-flex justify-content-between mb-3\">\r\n <div class=\"left-2\">Projected Value (Next Year)</div><div class=\"right-2\">{{propertyDetails.projectedValue}}</div>\r\n </div>\r\n <div class=\"right-left-1 d-flex justify-content-between mb-3\">\r\n <div class=\"left-2\">Potential Appreciation</div><div class=\"right-2\">{{propertyDetails.potentialApperciation}}</div>\r\n </div>\r\n <div class=\"right-left-1 d-flex justify-content-between mb-3\">\r\n <div class=\"left-2\">Guaranteed Growth</div><div class=\"right-2\">{{propertyDetails.guaranteedGrowth}}</div>\r\n </div>\r\n <div class=\"note-section\">\r\n Note: Above projection are based on past performance\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.main-container{padding:10px}.left-container,.right-container{height:75vh;overflow-y:scroll}.w-60{width:60%}.w-40{width:40%}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%}.br-10{border-radius:10px}.common-style1{padding:10px;border-radius:10px;background:#fff;margin-bottom:10px}.mt-10{margin-top:10px!important}.main-text{font-weight:600;font-size:18px;line-height:24px;color:#000}.span-text{font-size:14px;font-weight:500;line-height:44px;color:#00000080}.gap-10{gap:10px}.common-style2{padding:10px;border-radius:10px;font-size:14px;line-height:24px;font-weight:600;height:6vh;align-content:center}.buy-more{background:#36b37e;color:#fff}.sell{background:#ffcfc6;color:#f36f56}.left{font-size:14px;line-height:18px;font-weight:500;color:#01161ecc}.right{font-size:14px;line-height:20px;font-weight:600;color:#01161e}.head-about-property{font-weight:600;font-size:16px;line-height:26px;margin-bottom:10px}.file{background:#f7f7f7;border-radius:5px;padding:12px;width:50%}.doc-text{font-size:16px;font-weight:500;line-height:26px;color:#000}.about-property-text{font-weight:400;font-size:16px;line-height:29px;color:#01161eb3}.manage-img{width:70px;height:10vh;border-radius:50%}.card-container{background:#f7f7f7;padding:10px}.name-text{font-size:14px;line-height:24px;font-weight:500;color:#000}.role-text{font-size:14px;font-weight:400;line-height:24px;color:#000000b3}.managed-cards{overflow-x:scroll}.right-content{border:1px solid rgba(0,0,0,.03);border-radius:10px;margin-bottom:15px}.right-head{font-weight:600;font-size:16px;line-height:21px;color:#000;padding:10px}.holding-details{display:grid;grid-template-columns:50% 50%;gap:10px}.top-bottom{padding:10px}.top{font-size:20px;font-weight:700;line-height:24px;color:#000}.bottom{font-size:14px;font-weight:500;line-height:24px;color:#000000b3}.income{background:#fff;padding:10px}.left-right-1{background:linear-gradient(180deg,#0d1b2a,#172b40);display:flex;justify-content:space-between;padding:15px;border-radius:10px}.left-1{font-size:16px;font-weight:700;line-height:24px;color:#fff}.right-1{font-weight:800;font-size:20px;line-height:24px;color:#32f4a2}.left-2{font-size:14px;line-height:20px;font-weight:500;color:#000000b3}.right-2{font-size:20px;line-height:24px;font-weight:700;color:#000}.note-section{font-size:14px;line-height:20px;font-weight:500;color:#01161e66}.common-style3{padding:10px;background:#fff}.br-0-10{border-radius:0 0 10px 10px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
10437
- }
10438
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyViewComponent, decorators: [{
10439
- type: Component,
10440
- args: [{ selector: 'simpo-property-view', standalone: true, imports: [CommonModule, MatIcon], template: "<div class=\"main-container w-100 d-flex gap-10\">\r\n <div class=\"left-container w-60\">\r\n <div class=\"property-detail common-style1\">\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide p-relative w-35\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let ele of propertyDetails.propertyImage;let i = index\">\r\n <div class=\"carousel-item active\" [class.active]=\"i\" data-bs-interval=\"3000\">\r\n <img [src]=\"ele\" class=\"d-block w-100 height-30 br-10\" alt=\"property-image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-center\">\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <ng-container *ngFor=\"let ele of propertyDetails.propertyImage;let i = index\">\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\"\r\n [attr.data-bs-slide-to]=\"i\" class=\"active additional-properties\" aria-current=\"true\"\r\n aria-label=\"Slide 1\"></button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"details mt-10\">\r\n <div class=\"top-details d-flex justify-content-between\">\r\n <div class=\"top-left\">\r\n <div class=\"main-text\">{{propertyDetails.propertyName}}</div>\r\n <div class=\"span-text\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\"\r\n alt=\"location image\" width=\"15px\">RRR Hyderabad, Telangana</div>\r\n </div>\r\n <div class=\"top-right d-flex gap-10\">\r\n <div class=\"buy-more common-style2\">\r\n Buy More SQFT\r\n </div>\r\n <div class=\"sell common-style2\">\r\n Sell SQFT\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"bottom-details d-flex gap-10 mt-10 justify-content-center\">\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Invested Date</div>\r\n <div class=\"right\">{{propertyDetails.investedDate}}</div>\r\n </div>\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Property Type</div>\r\n <div class=\"right\">{{propertyDetails.type}}</div>\r\n </div>\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Ownership Share</div>\r\n <div class=\"right\">{{propertyDetails.share}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"common-style1\">\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 propertyDetails.documents\">\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 class=\"common-style1\">\r\n <div class=\"head-about-property\">About Property</div>\r\n <div class=\"about-property-text\">{{propertyDetails.description}}</div>\r\n <div class=\"head-about-property\">Property Managed by</div>\r\n <div class=\"managed-cards d-flex gap-10 w-100\">\r\n <div class=\"card-container br-10\" *ngFor=\"let ele of propertyDetails.managedBy\">\r\n <div class=\"img-container d-flex justify-content-center\">\r\n <img [src]=\"ele.img\" alt=\"Manager Image\" class=\"manage-img\">\r\n </div>\r\n <div class=\"card-details\">\r\n <p class=\"name-text text-center mt-10\">{{ele.name}}</p>\r\n <p class=\"role-text text-center\">{{ele.role}}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-container w-40\">\r\n <div class=\"right-content\">\r\n <div class=\"right-head\">Holdings Details</div>\r\n <div class=\"holding-details common-style3\">\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails.invested}}</div>\r\n <div class=\"bottom\">Invested</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails.totalSqft}}</div>\r\n <div class=\"bottom\">Sq.ft</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails.irr}}</div>\r\n <div class=\"bottom\">Indicative Market Value</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails.imv}}</div>\r\n <div class=\"bottom\">Internal Returns Rate</div>\r\n </div>\r\n </div>\r\n <div class=\"income br-0-10\">\r\n <div class=\"left-right-1\">\r\n <div class=\"left-1\">Profit/Loss</div><div class=\"right-1\">{{propertyDetails.income}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-content\">\r\n <div class=\"right-head\">Financial Projections</div>\r\n <div class=\"financial-details common-style3 br-0-10\">\r\n <div class=\"right-left-1 d-flex justify-content-between mb-3\">\r\n <div class=\"left-2\">Projected Value (Next Year)</div><div class=\"right-2\">{{propertyDetails.projectedValue}}</div>\r\n </div>\r\n <div class=\"right-left-1 d-flex justify-content-between mb-3\">\r\n <div class=\"left-2\">Potential Appreciation</div><div class=\"right-2\">{{propertyDetails.potentialApperciation}}</div>\r\n </div>\r\n <div class=\"right-left-1 d-flex justify-content-between mb-3\">\r\n <div class=\"left-2\">Guaranteed Growth</div><div class=\"right-2\">{{propertyDetails.guaranteedGrowth}}</div>\r\n </div>\r\n <div class=\"note-section\">\r\n Note: Above projection are based on past performance\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.main-container{padding:10px}.left-container,.right-container{height:75vh;overflow-y:scroll}.w-60{width:60%}.w-40{width:40%}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%}.br-10{border-radius:10px}.common-style1{padding:10px;border-radius:10px;background:#fff;margin-bottom:10px}.mt-10{margin-top:10px!important}.main-text{font-weight:600;font-size:18px;line-height:24px;color:#000}.span-text{font-size:14px;font-weight:500;line-height:44px;color:#00000080}.gap-10{gap:10px}.common-style2{padding:10px;border-radius:10px;font-size:14px;line-height:24px;font-weight:600;height:6vh;align-content:center}.buy-more{background:#36b37e;color:#fff}.sell{background:#ffcfc6;color:#f36f56}.left{font-size:14px;line-height:18px;font-weight:500;color:#01161ecc}.right{font-size:14px;line-height:20px;font-weight:600;color:#01161e}.head-about-property{font-weight:600;font-size:16px;line-height:26px;margin-bottom:10px}.file{background:#f7f7f7;border-radius:5px;padding:12px;width:50%}.doc-text{font-size:16px;font-weight:500;line-height:26px;color:#000}.about-property-text{font-weight:400;font-size:16px;line-height:29px;color:#01161eb3}.manage-img{width:70px;height:10vh;border-radius:50%}.card-container{background:#f7f7f7;padding:10px}.name-text{font-size:14px;line-height:24px;font-weight:500;color:#000}.role-text{font-size:14px;font-weight:400;line-height:24px;color:#000000b3}.managed-cards{overflow-x:scroll}.right-content{border:1px solid rgba(0,0,0,.03);border-radius:10px;margin-bottom:15px}.right-head{font-weight:600;font-size:16px;line-height:21px;color:#000;padding:10px}.holding-details{display:grid;grid-template-columns:50% 50%;gap:10px}.top-bottom{padding:10px}.top{font-size:20px;font-weight:700;line-height:24px;color:#000}.bottom{font-size:14px;font-weight:500;line-height:24px;color:#000000b3}.income{background:#fff;padding:10px}.left-right-1{background:linear-gradient(180deg,#0d1b2a,#172b40);display:flex;justify-content:space-between;padding:15px;border-radius:10px}.left-1{font-size:16px;font-weight:700;line-height:24px;color:#fff}.right-1{font-weight:800;font-size:20px;line-height:24px;color:#32f4a2}.left-2{font-size:14px;line-height:20px;font-weight:500;color:#000000b3}.right-2{font-size:20px;line-height:24px;font-weight:700;color:#000}.note-section{font-size:14px;line-height:20px;font-weight:500;color:#01161e66}.common-style3{padding:10px;background:#fff}.br-0-10{border-radius:0 0 10px 10px!important}\n"] }]
10441
- }], propDecorators: { text: [{
10442
- type: Input
10443
- }] } });
10444
-
10445
- class PropertiesComponent {
10446
- constructor() {
10447
- this.investments = [
10448
- {
10449
- name: "SQFT Investment",
10450
- details: [
10451
- { name: "Total Sq.ft Owned", value: "43" },
10452
- { name: "Amount Invested", value: "₹5.73 L" },
10453
- { name: "Indicative Market Value", value: "₹6.21 L", spanValue: "+2.1%" },
10454
- { name: "IRR", value: "14%" },
10455
- ]
10456
- },
10457
- {
10458
- name: "Private Investment ",
10459
- details: [
10460
- { name: "Properties Owned", value: "2" },
10461
- { name: "Properties Sq.ft", value: "3092" },
10462
- { name: "Invested Value", value: "₹32.41 L", spanValue: "+2.1%" },
10463
- { name: "Indicative Market Value", value: "₹38.59 L" },
10464
- ]
10465
- }
10466
- ];
10467
- this.activeTab = "ALL_PROPERTIES";
10468
- this.tabs = [
10469
- { viewValue: "All Properties", value: "ALL_PROPERTIES" },
10470
- { viewValue: "My SQFT", value: "SQFT" },
10471
- { viewValue: "Private Investments", value: "PRIVATE" },
10472
- ];
10473
- this.propertyDetails = [{
10474
- propertyImage: ["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", "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png"],
10475
- propertyName: "Real Estate Debt Investment - Blue Moon",
10476
- propertyLocation: "RRR Hyderabad, Telangana",
10477
- propertyType: "SQFT",
10478
- propertyDetail: [
10479
- { textValue: "Invested", value: "₹4.1 L" },
10480
- { textValue: "Sq.ft", value: "32" },
10481
- { textValue: "Indicative Market Value", value: "₹4.1 L" },
10482
- { textValue: "Profit/Loss", value: "+₹4.1 L" },
10483
- ]
10484
- },
10485
- {
10486
- propertyImage: ["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", "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png"],
10487
- propertyName: "Real Estate Debt Investment - Blue Moon",
10488
- propertyLocation: "RRR Hyderabad, Telangana",
10489
- propertyType: "Private Investment",
10490
- propertyDetail: [
10491
- { textValue: "Invested", value: "₹4.1 L" },
10492
- { textValue: "Sq.ft", value: "32" },
10493
- { textValue: "Indicative Market Value", value: "₹4.1 L" },
10494
- { textValue: "Profit/Loss", value: "+₹4.1 L" },
10495
- ]
10496
- }];
10497
- this.viewTab = false;
10498
- }
10499
- ngOnInit() {
10500
- }
10501
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10502
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertiesComponent, isStandalone: true, selector: "simpo-properties", ngImport: i0, template: "<section class=\"main-container\" *ngIf=\"!viewTab\">\r\n <!-- <div class=\"card-section d-flex gap-2\">\r\n <div class=\"cards\" *ngFor=\"let ele of investments\">\r\n <div class=\"head\">{{ele.name}}</div>\r\n <div class=\"mini-cards\">\r\n <div class=\"mini-card\" *ngFor=\"let ele of ele.details\">\r\n <div class=\"text\">{{ele.name}}</div>\r\n <div class=\"number d-flex\">{{ele.value}}&nbsp;&nbsp;<span *ngIf=\"ele?.spanValue\"\r\n class=\"span-text d-flex\"><mat-icon>arrow_drop_up</mat-icon>\r\n {{ele.spanValue}}</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"property-tabs d-flex gap-10 mt-3\">\r\n <div class=\"tab\" *ngFor=\"let ele of tabs\" (click)=\"activeTab = ele.value\"\r\n [class.tabActive]=\"activeTab == ele.value\">{{ele.viewValue}}</div>\r\n </div> -->\r\n <div class=\"property-cards\">\r\n <ng-container *ngFor=\"let ele of propertyDetails\">\r\n <div class=\"property-card w-100 d-flex gap-10\" (click)=\"viewTab = true\">\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide p-relative w-35\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let ele of ele.propertyImage;let i = index\">\r\n <div class=\"carousel-item active\" [class.active]=\"i\" data-bs-interval=\"3000\">\r\n <img [src]=\"ele\" class=\"d-block w-100 height-30 br-10\" alt=\"property-image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-center p-15\">\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <ng-container *ngFor=\"let ele of ele.propertyImage;let i = index\">\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\"\r\n [attr.data-bs-slide-to]=\"i\" class=\"active additional-properties\"\r\n aria-current=\"true\" aria-label=\"Slide 1\"></button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-section\">\r\n <div class=\"right-top d-flex justify-content-between\">\r\n <div class=\"head-left\">\r\n <div class=\"propertyname\">{{ele.propertyName}}</div>\r\n <div class=\"property-location\"><img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\" alt=\"location image\">{{ele.propertyLocation}}</div>\r\n </div>\r\n <div class=\"head-right\">\r\n <div class=\"type text-center\">{{ele.propertyType}}</div>\r\n </div>\r\n </div>\r\n <!-- <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/637983c1739855715188Vector%2012%20%281%29.png\" class=\"curve-img\"> -->\r\n <div class=\"right-bottom d-flex gap-10 w-75\">\r\n <div class=\"details\" *ngFor=\"let x of ele.propertyDetail;let i = index\"\r\n [class.lst-div]=\"i == ele.propertyDetail.length - 1\">\r\n <div class=\"top-detail text-center\">{{x.value}}</div>\r\n <div class=\"bottom-detail text-center\">{{x.textValue}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</section>\r\n<section class=\"view-container\" *ngIf=\"viewTab\">\r\n <div class=\"back\">\r\n <div class=\"back-text d-flex align-items-center\"><p class=\"my-text mb-0 common-style\" (click)=\"viewTab = false\">My Properties</p><mat-icon class=\"my-text\">keyboard_arrow_right</mat-icon>\r\n <p class=\"prty-text mb-0 common-style\">Property Details</p></div>\r\n </div>\r\n <simpo-property-view [text]=\"'Hello'\"></simpo-property-view>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.gap-2{gap:2%!important}.cards{background:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.03);width:49%;padding:10px}.head{font-size:18px;font-weight:600;line-height:24px;color:#000;margin-bottom:10px}.mini-cards{display:grid;grid-template-columns:48% 48%;gap:3%}.mini-card{background:#fafafa;border-radius:7px;padding:10px 15px;margin-bottom:10px}.text{font-size:14px;line-height:24px;font-weight:500;color:#01161ecc;margin-bottom:10px}.number{font-size:24px;line-height:24px;font-weight:700;color:#01161e}.span-text{font-size:13px;line-height:24px;font-weight:700;color:#36b37e}.property-tab{display:flex;gap:10px;margin-top:15px}.gap-10{gap:10px}.tab{padding:10px;background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:8px;font-size:16px;line-height:24px;font-weight:500;color:#01161e;cursor:pointer}.tabActive{color:#f8a938!important;border:1px solid rgba(248,169,56,1)!important}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%}.height-30{height:30vh}.w-35{width:35%!important}.property-cards{overflow-y:scroll;height:81vh}.property-card{border-radius:10px!important;background:#fff;border:1px solid rgba(0,0,0,.04);margin-bottom:15px;position:relative;overflow:hidden;cursor:pointer}.br-10{border-radius:10px 0 0 10px}.right-section{width:65%}.property-name{font-size:16px;font-weight:600;line-height:21px;color:#000}.property-location{font-size:14px;font-weight:500;line-height:44px;color:#0000004d}.type{font-size:14px;font-weight:600;line-height:24px;color:#f8a938;background:#ffebcb;border-radius:8px 0 0 9px;padding:6px}.right-bottom{background:#219ebc}.details{border-right:1px solid rgba(255,255,255,.2);padding:8px;margin:8px 0}.top-detail{font-size:20px;font-weight:700;line-height:24px;color:#fff}.bottom-detail{font-size:14px;font-weight:500;line-height:24px;color:#ffffffb3}.head-left{padding:10px}.head-right{padding:10px 0}.lst-div{border:unset!important}.w-75{width:75%!important}.curve-img{position:absolute;width:33px;top:33%;left:31%}.p-15{padding:15px}.my-text{color:#00000080;cursor:pointer}.prty-text{color:#000}.common-style{font-size:14px;line-height:24px;font-weight:500}\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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PropertyViewComponent, selector: "simpo-property-view", inputs: ["text"] }] }); }
10503
- }
10504
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertiesComponent, decorators: [{
10505
- type: Component,
10506
- args: [{ selector: 'simpo-properties', standalone: true, imports: [CommonModule, MatIcon, PropertyViewComponent], template: "<section class=\"main-container\" *ngIf=\"!viewTab\">\r\n <!-- <div class=\"card-section d-flex gap-2\">\r\n <div class=\"cards\" *ngFor=\"let ele of investments\">\r\n <div class=\"head\">{{ele.name}}</div>\r\n <div class=\"mini-cards\">\r\n <div class=\"mini-card\" *ngFor=\"let ele of ele.details\">\r\n <div class=\"text\">{{ele.name}}</div>\r\n <div class=\"number d-flex\">{{ele.value}}&nbsp;&nbsp;<span *ngIf=\"ele?.spanValue\"\r\n class=\"span-text d-flex\"><mat-icon>arrow_drop_up</mat-icon>\r\n {{ele.spanValue}}</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"property-tabs d-flex gap-10 mt-3\">\r\n <div class=\"tab\" *ngFor=\"let ele of tabs\" (click)=\"activeTab = ele.value\"\r\n [class.tabActive]=\"activeTab == ele.value\">{{ele.viewValue}}</div>\r\n </div> -->\r\n <div class=\"property-cards\">\r\n <ng-container *ngFor=\"let ele of propertyDetails\">\r\n <div class=\"property-card w-100 d-flex gap-10\" (click)=\"viewTab = true\">\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide p-relative w-35\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let ele of ele.propertyImage;let i = index\">\r\n <div class=\"carousel-item active\" [class.active]=\"i\" data-bs-interval=\"3000\">\r\n <img [src]=\"ele\" class=\"d-block w-100 height-30 br-10\" alt=\"property-image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-center p-15\">\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <ng-container *ngFor=\"let ele of ele.propertyImage;let i = index\">\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\"\r\n [attr.data-bs-slide-to]=\"i\" class=\"active additional-properties\"\r\n aria-current=\"true\" aria-label=\"Slide 1\"></button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right-section\">\r\n <div class=\"right-top d-flex justify-content-between\">\r\n <div class=\"head-left\">\r\n <div class=\"propertyname\">{{ele.propertyName}}</div>\r\n <div class=\"property-location\"><img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\" alt=\"location image\">{{ele.propertyLocation}}</div>\r\n </div>\r\n <div class=\"head-right\">\r\n <div class=\"type text-center\">{{ele.propertyType}}</div>\r\n </div>\r\n </div>\r\n <!-- <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/637983c1739855715188Vector%2012%20%281%29.png\" class=\"curve-img\"> -->\r\n <div class=\"right-bottom d-flex gap-10 w-75\">\r\n <div class=\"details\" *ngFor=\"let x of ele.propertyDetail;let i = index\"\r\n [class.lst-div]=\"i == ele.propertyDetail.length - 1\">\r\n <div class=\"top-detail text-center\">{{x.value}}</div>\r\n <div class=\"bottom-detail text-center\">{{x.textValue}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</section>\r\n<section class=\"view-container\" *ngIf=\"viewTab\">\r\n <div class=\"back\">\r\n <div class=\"back-text d-flex align-items-center\"><p class=\"my-text mb-0 common-style\" (click)=\"viewTab = false\">My Properties</p><mat-icon class=\"my-text\">keyboard_arrow_right</mat-icon>\r\n <p class=\"prty-text mb-0 common-style\">Property Details</p></div>\r\n </div>\r\n <simpo-property-view [text]=\"'Hello'\"></simpo-property-view>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.gap-2{gap:2%!important}.cards{background:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.03);width:49%;padding:10px}.head{font-size:18px;font-weight:600;line-height:24px;color:#000;margin-bottom:10px}.mini-cards{display:grid;grid-template-columns:48% 48%;gap:3%}.mini-card{background:#fafafa;border-radius:7px;padding:10px 15px;margin-bottom:10px}.text{font-size:14px;line-height:24px;font-weight:500;color:#01161ecc;margin-bottom:10px}.number{font-size:24px;line-height:24px;font-weight:700;color:#01161e}.span-text{font-size:13px;line-height:24px;font-weight:700;color:#36b37e}.property-tab{display:flex;gap:10px;margin-top:15px}.gap-10{gap:10px}.tab{padding:10px;background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:8px;font-size:16px;line-height:24px;font-weight:500;color:#01161e;cursor:pointer}.tabActive{color:#f8a938!important;border:1px solid rgba(248,169,56,1)!important}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%}.height-30{height:30vh}.w-35{width:35%!important}.property-cards{overflow-y:scroll;height:81vh}.property-card{border-radius:10px!important;background:#fff;border:1px solid rgba(0,0,0,.04);margin-bottom:15px;position:relative;overflow:hidden;cursor:pointer}.br-10{border-radius:10px 0 0 10px}.right-section{width:65%}.property-name{font-size:16px;font-weight:600;line-height:21px;color:#000}.property-location{font-size:14px;font-weight:500;line-height:44px;color:#0000004d}.type{font-size:14px;font-weight:600;line-height:24px;color:#f8a938;background:#ffebcb;border-radius:8px 0 0 9px;padding:6px}.right-bottom{background:#219ebc}.details{border-right:1px solid rgba(255,255,255,.2);padding:8px;margin:8px 0}.top-detail{font-size:20px;font-weight:700;line-height:24px;color:#fff}.bottom-detail{font-size:14px;font-weight:500;line-height:24px;color:#ffffffb3}.head-left{padding:10px}.head-right{padding:10px 0}.lst-div{border:unset!important}.w-75{width:75%!important}.curve-img{position:absolute;width:33px;top:33%;left:31%}.p-15{padding:15px}.my-text{color:#00000080;cursor:pointer}.prty-text{color:#000}.common-style{font-size:14px;line-height:24px;font-weight:500}\n"] }]
10507
- }], ctorParameters: () => [] });
10508
-
10509
- class MyDocumentsComponent {
10510
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MyDocumentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10511
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: MyDocumentsComponent, isStandalone: true, selector: "simpo-my-documents", ngImport: i0, template: "<p>my-documents works!</p>\r\n", styles: [""] }); }
10512
- }
10513
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MyDocumentsComponent, decorators: [{
10514
- type: Component,
10515
- args: [{ selector: 'simpo-my-documents', standalone: true, imports: [], template: "<p>my-documents works!</p>\r\n" }]
10516
- }] });
10517
-
10518
- class MyOrdersComponent {
10519
- constructor() {
10520
- this.activeTab = "ALL_ORDERS";
10521
- this.tabs = [
10522
- { viewValue: "All Orders", value: "ALL_ORDERS" },
10523
- { viewValue: "Open Orders", value: "ORDERS" },
10524
- { viewValue: "Successful Orders", value: "SUCCESS" },
10525
- { viewValue: "Unsuccessful Orders", value: "UNSUCCESS" },
10526
- { viewValue: "Sell Orders", value: "SELL" },
10527
- ];
10528
- this.properties = [
10529
- {
10530
- imgUrl: "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png",
10531
- status: "SUCCESS",
10532
- investedOn: "10th May 2023",
10533
- sqft: "450 Sq ft",
10534
- investedAmount: "₹4.1 L",
10535
- orderType: "Sell Order",
10536
- orderPlacedOn: "10th May 2023",
10537
- orderExecutedOn: "12th May 2023",
10538
- propertyName: "Real Estate Debt Investment - Blue Moon",
10539
- propertyLocation: "RRR Hyderabad, Telangana",
10540
- },
10541
- {
10542
- imgUrl: "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png",
10543
- status: "PENDING",
10544
- investedOn: "10th May 2023",
10545
- sqft: "450 Sq ft",
10546
- investedAmount: "₹4.1 L",
10547
- orderType: "Buy Order",
10548
- orderPlacedOn: "10th May 2023",
10549
- orderExecutedOn: "12th May 2023",
10550
- propertyName: "Real Estate Debt Investment - Blue Moon",
10551
- propertyLocation: "RRR Hyderabad, Telangana",
10552
- },
10553
- {
10554
- imgUrl: "https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png",
10555
- status: "CANCELLED",
10556
- investedOn: "10th May 2023",
10557
- sqft: "450 Sq ft",
10558
- investedAmount: "₹4.1 L",
10559
- orderType: "Buy Order",
10560
- orderPlacedOn: "10th May 2023",
10561
- orderExecutedOn: "12th May 2023",
10562
- propertyName: "Real Estate Debt Investment - Blue Moon",
10563
- propertyLocation: "RRR Hyderabad, Telangana",
10564
- }
10565
- ];
10566
- }
10567
- ngOnInit() {
10568
- }
10569
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MyOrdersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10570
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: MyOrdersComponent, isStandalone: true, selector: "simpo-my-orders", ngImport: i0, template: "<div class=\"main-container\">\r\n <div class=\"property-tabs d-flex gap-10 mt-3 mb-3\">\r\n <div class=\"tab\" *ngFor=\"let ele of tabs\" (click)=\"activeTab = ele.value\"\r\n [class.tabActive]=\"activeTab == ele.value\">{{ele.viewValue}}</div>\r\n </div>\r\n <div class=\"cards-container\">\r\n <div class=\"property-card mb-3\" *ngFor=\"let ele of properties\">\r\n <div class=\"card-top d-flex justify-content-between\">\r\n <div class=\"card-left d-flex p-10 align-items-center\">\r\n <div class=\"br-1 p-0-10\">\r\n <div class=\"status\" [class.success]=\"ele.status == 'SUCCESS'\" [class.cancelled]=\"ele.status == 'CANCELLED'\">\r\n &#x2022;&nbsp;{{ele.status | titlecase}}\r\n </div>\r\n </div>\r\n <div class=\"investedOn p-10\">\r\n {{ele.investedOn}}\r\n </div>\r\n </div>\r\n <div class=\"card-right d-flex align-items-center\" [class.buy]=\"ele.orderType == 'Buy Order' \">\r\n {{ele.orderType}}\r\n </div>\r\n </div>\r\n <div class=\"card-middle d-flex justify-content-between p-15\">\r\n <div class=\"middle-1 d-flex gap-10\">\r\n <div class=\"image-container\">\r\n <img [src]=\"ele.imgUrl\" alt=\"property image\" class=\"property-img\">\r\n </div>\r\n <div class=\"property-details\">\r\n <div class=\"property-name\">{{ele.propertyName}}</div>\r\n <div class=\"property-location\">{{ele.propertyLocation}}</div>\r\n </div>\r\n </div>\r\n <div class=\"middle-2\">\r\n {{ele.sqft}}\r\n </div>\r\n <div class=\"middle-3\">\r\n {{ele.investedAmount}}\r\n </div>\r\n </div>\r\n <div class=\"card-bottom d-flex align-items-center\">\r\n <div class=\"round-container\">\r\n <div class=\"round-1 d-flex align-items-center justify-content-center round-1-active\"><mat-icon class=\"d-flex align-items-center justify-content-center f-16\">check</mat-icon></div>\r\n </div>\r\n <div class=\"line\"></div>\r\n <div class=\"round-container\">\r\n <div class=\"round-2 d-flex align-items-center justify-content-center\" [class.round-1-active]=\"ele.status == 'SUCCESS'\" [class.round-cancelled]=\"ele.status == 'CANCELLED'\"><mat-icon *ngIf=\"ele.status == 'CANCELLED'\" class=\"d-flex align-items-center justify-content-center f-16\">close</mat-icon><mat-icon class=\"d-flex align-items-center justify-content-center f-16\" *ngIf=\"ele.status == 'SUCCESS'\">check</mat-icon></div>\r\n </div>\r\n </div>\r\n <div class=\"card-bottom d-flex justify-content-between\">\r\n <div class=\"placed\">\r\n <p class=\"placed-text mb-0\">Order Placed</p><span class=\"date\">{{ele.orderPlacedOn}}</span>\r\n </div>\r\n <div class=\"placed\">\r\n <p class=\"placed-text mb-0\">Order {{ele.status == 'CANCELLED' ? \"Cancelled\" : \"Executed\"}}</p><span class=\"date\">{{ele.orderExecutedOn}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.tab{padding:10px;background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:8px;font-size:16px;line-height:24px;font-weight:500;color:#01161e;cursor:pointer}.tabActive{color:#f8a938!important;border:1px solid rgba(248,169,56,1)!important}.gap-10{gap:10px}.cards-container{height:70vh;overflow-y:scroll}.property-card{background:#fff;border:1px solid rgba(0,0,0,.04);border-radius:10px}.p-10{padding:10px}.p-15{padding:15px}.status{background:#ffd84b1a;border-radius:10px;font-size:14px;font-weight:600;line-height:21px;color:#f3be00;padding:5px}.success{background-color:#09b6000f!important;color:#09b600!important}.cancelled{background-color:#9017150d!important;color:#e43d11!important}.br-1{border-right:2px solid rgba(0,0,0,.2)}.card-bottom{width:70%;margin:0 auto}.round-1,.round-2{height:3vh;width:20px;background:#e1e1e1;border-radius:50%}.round-1-active{background:#f8a938!important;color:#fff}.f-18{font-size:18px}.line{background:#e1e1e1;height:2px;width:80%}.card-bottom-1{width:70%;margin:0 auto}.investedOn{font-size:16px;line-height:21px;font-weight:600;color:#000000b3}.card-right{background:#f86e38;border-radius:8px 0 0 8px;font-size:14px;line-height:24px;padding:5px;font-weight:600;color:#fff;margin:15px 0}.buy{background:#077b01!important}.property-name{font-size:16px;line-height:21px;font-weight:600;color:#0009}.property-location{font-size:14px;line-height:44px;font-weight:500;color:#0000004d}.middle-2{font-size:16px;line-height:21px;color:#000000b3;font-weight:600}.middle-3{font-size:26px;line-height:33px;font-weight:700;color:#000000b3}.placed-text{font-size:16px;font-weight:600;line-height:21px;color:#000000b3}.date{font-size:14px;line-height:44px;font-weight:500;color:#0000004d}.property-img{height:8vh;width:80px;border-radius:10px}.f-16{font-size:16px}.p-0-10{padding:0 10px}.round-cancelled{background-color:#fd3516!important;color:#fff!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: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
10571
- }
10572
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MyOrdersComponent, decorators: [{
10573
- type: Component,
10574
- args: [{ selector: 'simpo-my-orders', standalone: true, imports: [CommonModule, MatIcon], template: "<div class=\"main-container\">\r\n <div class=\"property-tabs d-flex gap-10 mt-3 mb-3\">\r\n <div class=\"tab\" *ngFor=\"let ele of tabs\" (click)=\"activeTab = ele.value\"\r\n [class.tabActive]=\"activeTab == ele.value\">{{ele.viewValue}}</div>\r\n </div>\r\n <div class=\"cards-container\">\r\n <div class=\"property-card mb-3\" *ngFor=\"let ele of properties\">\r\n <div class=\"card-top d-flex justify-content-between\">\r\n <div class=\"card-left d-flex p-10 align-items-center\">\r\n <div class=\"br-1 p-0-10\">\r\n <div class=\"status\" [class.success]=\"ele.status == 'SUCCESS'\" [class.cancelled]=\"ele.status == 'CANCELLED'\">\r\n &#x2022;&nbsp;{{ele.status | titlecase}}\r\n </div>\r\n </div>\r\n <div class=\"investedOn p-10\">\r\n {{ele.investedOn}}\r\n </div>\r\n </div>\r\n <div class=\"card-right d-flex align-items-center\" [class.buy]=\"ele.orderType == 'Buy Order' \">\r\n {{ele.orderType}}\r\n </div>\r\n </div>\r\n <div class=\"card-middle d-flex justify-content-between p-15\">\r\n <div class=\"middle-1 d-flex gap-10\">\r\n <div class=\"image-container\">\r\n <img [src]=\"ele.imgUrl\" alt=\"property image\" class=\"property-img\">\r\n </div>\r\n <div class=\"property-details\">\r\n <div class=\"property-name\">{{ele.propertyName}}</div>\r\n <div class=\"property-location\">{{ele.propertyLocation}}</div>\r\n </div>\r\n </div>\r\n <div class=\"middle-2\">\r\n {{ele.sqft}}\r\n </div>\r\n <div class=\"middle-3\">\r\n {{ele.investedAmount}}\r\n </div>\r\n </div>\r\n <div class=\"card-bottom d-flex align-items-center\">\r\n <div class=\"round-container\">\r\n <div class=\"round-1 d-flex align-items-center justify-content-center round-1-active\"><mat-icon class=\"d-flex align-items-center justify-content-center f-16\">check</mat-icon></div>\r\n </div>\r\n <div class=\"line\"></div>\r\n <div class=\"round-container\">\r\n <div class=\"round-2 d-flex align-items-center justify-content-center\" [class.round-1-active]=\"ele.status == 'SUCCESS'\" [class.round-cancelled]=\"ele.status == 'CANCELLED'\"><mat-icon *ngIf=\"ele.status == 'CANCELLED'\" class=\"d-flex align-items-center justify-content-center f-16\">close</mat-icon><mat-icon class=\"d-flex align-items-center justify-content-center f-16\" *ngIf=\"ele.status == 'SUCCESS'\">check</mat-icon></div>\r\n </div>\r\n </div>\r\n <div class=\"card-bottom d-flex justify-content-between\">\r\n <div class=\"placed\">\r\n <p class=\"placed-text mb-0\">Order Placed</p><span class=\"date\">{{ele.orderPlacedOn}}</span>\r\n </div>\r\n <div class=\"placed\">\r\n <p class=\"placed-text mb-0\">Order {{ele.status == 'CANCELLED' ? \"Cancelled\" : \"Executed\"}}</p><span class=\"date\">{{ele.orderExecutedOn}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.tab{padding:10px;background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:8px;font-size:16px;line-height:24px;font-weight:500;color:#01161e;cursor:pointer}.tabActive{color:#f8a938!important;border:1px solid rgba(248,169,56,1)!important}.gap-10{gap:10px}.cards-container{height:70vh;overflow-y:scroll}.property-card{background:#fff;border:1px solid rgba(0,0,0,.04);border-radius:10px}.p-10{padding:10px}.p-15{padding:15px}.status{background:#ffd84b1a;border-radius:10px;font-size:14px;font-weight:600;line-height:21px;color:#f3be00;padding:5px}.success{background-color:#09b6000f!important;color:#09b600!important}.cancelled{background-color:#9017150d!important;color:#e43d11!important}.br-1{border-right:2px solid rgba(0,0,0,.2)}.card-bottom{width:70%;margin:0 auto}.round-1,.round-2{height:3vh;width:20px;background:#e1e1e1;border-radius:50%}.round-1-active{background:#f8a938!important;color:#fff}.f-18{font-size:18px}.line{background:#e1e1e1;height:2px;width:80%}.card-bottom-1{width:70%;margin:0 auto}.investedOn{font-size:16px;line-height:21px;font-weight:600;color:#000000b3}.card-right{background:#f86e38;border-radius:8px 0 0 8px;font-size:14px;line-height:24px;padding:5px;font-weight:600;color:#fff;margin:15px 0}.buy{background:#077b01!important}.property-name{font-size:16px;line-height:21px;font-weight:600;color:#0009}.property-location{font-size:14px;line-height:44px;font-weight:500;color:#0000004d}.middle-2{font-size:16px;line-height:21px;color:#000000b3;font-weight:600}.middle-3{font-size:26px;line-height:33px;font-weight:700;color:#000000b3}.placed-text{font-size:16px;font-weight:600;line-height:21px;color:#000000b3}.date{font-size:14px;line-height:44px;font-weight:500;color:#0000004d}.property-img{height:8vh;width:80px;border-radius:10px}.f-16{font-size:16px}.p-0-10{padding:0 10px}.round-cancelled{background-color:#fd3516!important;color:#fff!important}\n"] }]
10575
- }], ctorParameters: () => [] });
10576
-
10577
- class MyStatementComponent {
10578
- constructor() {
10579
- this.tableHeaders = ["Amount", "Status", "Payment Method", "Remarks"];
10580
- this.tableData = [
10581
- { amount: 12000, status: "SUCCESS", method: "Credit Card", remarks: "Property Purchased" },
10582
- { amount: 12000, status: "SUCCESS", method: "UPI", remarks: "Property Purchased" },
10583
- { amount: 12000, status: "PENDING", method: "Credit Card", remarks: "Property Purchased" },
10584
- { amount: 12000, status: "SUCCESS", method: "Credit Card", remarks: "Property Purchased" },
10585
- { amount: 12000, status: "SUCCESS", method: "Credit Card", remarks: "Property Purchased" },
10586
- { amount: 12000, status: "FAILED", method: "UPI", remarks: "Property Purchased" },
10587
- { amount: 12000, status: "SUCCESS", method: "UPI", remarks: "Property Purchased" },
10588
- { amount: 12000, status: "FAILED", method: "Credit Card", remarks: "Property Purchased" },
10589
- ];
10590
- }
10591
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MyStatementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10592
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: MyStatementComponent, isStandalone: true, selector: "simpo-my-statement", ngImport: i0, template: "<div class=\"main-container\">\r\n <div class=\"header\">Transaction History</div>\r\n <div class=\"table-container\">\r\n <table class=\"w-100\">\r\n <thead>\r\n <th *ngFor=\"let head of tableHeaders\">{{head}}</th>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of tableData\">\r\n <td>{{data.amount}}</td>\r\n <td><div [class.success]=\"data.status == 'SUCCESS'\" [class.pending]=\"data.status == 'PENDING'\" [class.failed]=\"data.status == 'FAILED'\" class=\"common-style\"> &#x2022;&nbsp;{{data.status | titlecase}}</div></td>\r\n <td>{{data.method}}</td>\r\n <td>{{data.remarks.length > 15 ? data.remarks.substring(0,15)+\"...\" : data.remarks}}</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n</div>", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.main-container{background:#fff;border:2px solid rgba(0,0,0,.06);border-radius:10px;padding:50px}.header{font-size:16px;font-weight:700;line-height:24px;color:#01161e;margin-bottom:20px}.table-container{overflow-y:scroll;height:60vh}.table-container thead{background:#f6f6f6}.table-container th{padding:10px;position:sticky}.table-container tr{background:#fdfdfd;border-bottom:1px solid rgba(0,0,0,.05)}.table-container td{padding:10px;font-weight:500;font-size:16px;line-height:24px;color:#3e3e3e}.success{background:#3bb6101a;color:#2f9335}.pending{background:#f8a9381a;color:#f8a938}.failed{background:#9017151a;color:#901715}.common-style{width:65%;padding:5px;border-radius:10px;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }] }); }
10593
- }
10594
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: MyStatementComponent, decorators: [{
10595
- type: Component,
10596
- args: [{ selector: 'simpo-my-statement', standalone: true, imports: [CommonModule], template: "<div class=\"main-container\">\r\n <div class=\"header\">Transaction History</div>\r\n <div class=\"table-container\">\r\n <table class=\"w-100\">\r\n <thead>\r\n <th *ngFor=\"let head of tableHeaders\">{{head}}</th>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let data of tableData\">\r\n <td>{{data.amount}}</td>\r\n <td><div [class.success]=\"data.status == 'SUCCESS'\" [class.pending]=\"data.status == 'PENDING'\" [class.failed]=\"data.status == 'FAILED'\" class=\"common-style\"> &#x2022;&nbsp;{{data.status | titlecase}}</div></td>\r\n <td>{{data.method}}</td>\r\n <td>{{data.remarks.length > 15 ? data.remarks.substring(0,15)+\"...\" : data.remarks}}</td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n</div>", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.main-container{background:#fff;border:2px solid rgba(0,0,0,.06);border-radius:10px;padding:50px}.header{font-size:16px;font-weight:700;line-height:24px;color:#01161e;margin-bottom:20px}.table-container{overflow-y:scroll;height:60vh}.table-container thead{background:#f6f6f6}.table-container th{padding:10px;position:sticky}.table-container tr{background:#fdfdfd;border-bottom:1px solid rgba(0,0,0,.05)}.table-container td{padding:10px;font-weight:500;font-size:16px;line-height:24px;color:#3e3e3e}.success{background:#3bb6101a;color:#2f9335}.pending{background:#f8a9381a;color:#f8a938}.failed{background:#9017151a;color:#901715}.common-style{width:65%;padding:5px;border-radius:10px;text-align:center}\n"] }]
10597
- }], ctorParameters: () => [] });
10598
-
10599
- class NeedHelpComponent {
10600
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NeedHelpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
10601
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NeedHelpComponent, isStandalone: true, selector: "simpo-need-help", ngImport: i0, template: "<p>need-help works!</p>\r\n", styles: [""] }); }
10602
- }
10603
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NeedHelpComponent, decorators: [{
10604
- type: Component,
10605
- args: [{ selector: 'simpo-need-help', standalone: true, imports: [], template: "<p>need-help works!</p>\r\n" }]
10606
- }] });
10607
-
10608
- class ProfileSectionComponent {
10609
- constructor(restService) {
10610
- this.restService = restService;
10611
- this.selectedPanel = "PORTFOLIO";
10612
- this.sidePanelTabs = [
10613
- { value: "PORTFOLIO", viewValue: "My Portfolio" },
10614
- { value: "PROPERTIES", viewValue: "My Properties" },
10615
- // {value : "ORDERS" , viewValue : "My Orders"},
10616
- // {value : "DOCUMENTS" , viewValue : "My Documents"},
10617
- // {value : "STATEMENT" , viewValue : "My Statements"},
10618
- { value: "KYC", viewValue: "KYC" },
10619
- // {value : "HELP" , viewValue : "Need Help"},
10620
- ];
10621
- }
10622
- ngOnInit() {
10623
- this.getInvestorDetails();
10624
- }
10625
- getInvestorDetails() {
10626
- this.restService.getInvesterById().subscribe((res) => {
10627
- this.investorDetails = res.message;
10628
- });
10629
- }
10630
- getInitials() {
10631
- const nameParts = this.investorDetails?.fullName?.split(' ');
10632
- const initials = nameParts?.map((part) => part.charAt(0).toUpperCase()).join('');
10633
- return initials;
10634
- }
10635
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProfileSectionComponent, deps: [{ token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
10636
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProfileSectionComponent, isStandalone: true, selector: "simpo-profile-section", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"main-container d-flex justify-content-center\">\r\n <div class=\"side-panel\">\r\n <div class=\"details\">\r\n <div class=\"left-right d-flex align-items-center gap-10\">\r\n <div class=\"logo left w-15\">{{ getInitials() }}</div><div class=\"right name w-85\">{{investorDetails?.fullName || 'N/A'}}</div>\r\n </div>\r\n <div class=\"left-right d-flex align-items-center gap-10\">\r\n <div class=\"left w-15\"><mat-icon class=\"d-flex align-items-center justify-content-center f-18\"> phone</mat-icon>\r\n </div><div class=\"right w-80\">{{investorDetails?.phoneNumber || 'N/A'}}</div>\r\n </div>\r\n <div class=\"left-right d-flex align-items-center gap-10\">\r\n <div class=\"left w-15\"><mat-icon class=\" d-flex align-items-center justify-content-center f-18\"> email</mat-icon>\r\n </div><div class=\"right w-80\">{{investorDetails?.emailId || 'N/A'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"tab-section\">\r\n <div class=\"tabs cursor-pointer\" *ngFor=\"let ele of sidePanelTabs\" (click)=\"selectedPanel = ele.value\" [class.activeTab]=\"selectedPanel == ele.value\">\r\n {{ele.viewValue}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"display-section\">\r\n <ng-container *ngIf=\"selectedPanel == 'KYC'\">\r\n <simpo-kyc-details></simpo-kyc-details>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'PORTFOLIO'\">\r\n <simpo-portfolio></simpo-portfolio>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'PROPERTIES'\">\r\n <simpo-properties></simpo-properties>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'ORDERS'\">\r\n <simpo-my-orders></simpo-my-orders>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'DOCUMENTS'\">\r\n <simpo-my-documents></simpo-my-documents>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'STATEMENT'\">\r\n <simpo-my-statement></simpo-my-statement>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'HELP'\">\r\n <simpo-need-help></simpo-need-help>\r\n </ng-container>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.main-container{height:85vh;width:100%;padding:10px 0;gap:15px;background:#f1f6ff}.side-panel{width:18%;background:#fff;border:2px solid rgba(241,246,255,1);border-radius:10px}.display-section{width:60%}.w-15{width:15%}.w-85{width:85%}.cursor-pointer{cursor:pointer}.details{background:#19a6c6;border-radius:10px;padding:10px;margin:15px}.left-right{gap:10px;margin-bottom:10px}.logo{background:#e6f0ff;border-radius:50%;font-size:14px;text-align:center;font-weight:600;line-height:24px;padding:3px;color:#405071!important}.name{font-size:14px;font-weight:600;line-height:24px;color:#fff!important}.f-18{font-size:18px}.gap-10{gap:10px}.left{color:#fffc}.right{font-weight:500;font-size:14px;line-height:24px;color:#fffc}.tab-section{margin-top:15px}.tabs{margin-bottom:25px;font-weight:500;font-size:16px;line-height:24px;color:#01161e;margin-left:8px}.activeTab{border-left:8px solid rgba(248,169,56,1);font-weight:700!important;color:#219ebc;margin-right:15px;background:#f1f3f7;padding:10px;border-radius:0 6px 6px 0;margin-left:unset}\n"], dependencies: [{ kind: "component", type: PortfolioComponent, selector: "simpo-portfolio" }, { kind: "component", type: PropertiesComponent, selector: "simpo-properties" }, { kind: "component", type: MyDocumentsComponent, selector: "simpo-my-documents" }, { kind: "component", type: MyOrdersComponent, selector: "simpo-my-orders" }, { kind: "component", type: MyStatementComponent, selector: "simpo-my-statement" }, { kind: "component", type: NeedHelpComponent, selector: "simpo-need-help" }, { 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KycDetailsComponent, selector: "simpo-kyc-details" }] }); }
10637
- }
10638
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProfileSectionComponent, decorators: [{
10639
- type: Component,
10640
- args: [{ selector: 'simpo-profile-section', standalone: true, imports: [PortfolioComponent, PropertiesComponent, MyDocumentsComponent, MyOrdersComponent, MyStatementComponent, NeedHelpComponent, MatIcon, CommonModule,
10641
- KycDetailsComponent
10642
- ], template: "<section class=\"main-container d-flex justify-content-center\">\r\n <div class=\"side-panel\">\r\n <div class=\"details\">\r\n <div class=\"left-right d-flex align-items-center gap-10\">\r\n <div class=\"logo left w-15\">{{ getInitials() }}</div><div class=\"right name w-85\">{{investorDetails?.fullName || 'N/A'}}</div>\r\n </div>\r\n <div class=\"left-right d-flex align-items-center gap-10\">\r\n <div class=\"left w-15\"><mat-icon class=\"d-flex align-items-center justify-content-center f-18\"> phone</mat-icon>\r\n </div><div class=\"right w-80\">{{investorDetails?.phoneNumber || 'N/A'}}</div>\r\n </div>\r\n <div class=\"left-right d-flex align-items-center gap-10\">\r\n <div class=\"left w-15\"><mat-icon class=\" d-flex align-items-center justify-content-center f-18\"> email</mat-icon>\r\n </div><div class=\"right w-80\">{{investorDetails?.emailId || 'N/A'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"tab-section\">\r\n <div class=\"tabs cursor-pointer\" *ngFor=\"let ele of sidePanelTabs\" (click)=\"selectedPanel = ele.value\" [class.activeTab]=\"selectedPanel == ele.value\">\r\n {{ele.viewValue}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"display-section\">\r\n <ng-container *ngIf=\"selectedPanel == 'KYC'\">\r\n <simpo-kyc-details></simpo-kyc-details>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'PORTFOLIO'\">\r\n <simpo-portfolio></simpo-portfolio>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'PROPERTIES'\">\r\n <simpo-properties></simpo-properties>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'ORDERS'\">\r\n <simpo-my-orders></simpo-my-orders>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'DOCUMENTS'\">\r\n <simpo-my-documents></simpo-my-documents>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'STATEMENT'\">\r\n <simpo-my-statement></simpo-my-statement>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'HELP'\">\r\n <simpo-need-help></simpo-need-help>\r\n </ng-container>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.main-container{height:85vh;width:100%;padding:10px 0;gap:15px;background:#f1f6ff}.side-panel{width:18%;background:#fff;border:2px solid rgba(241,246,255,1);border-radius:10px}.display-section{width:60%}.w-15{width:15%}.w-85{width:85%}.cursor-pointer{cursor:pointer}.details{background:#19a6c6;border-radius:10px;padding:10px;margin:15px}.left-right{gap:10px;margin-bottom:10px}.logo{background:#e6f0ff;border-radius:50%;font-size:14px;text-align:center;font-weight:600;line-height:24px;padding:3px;color:#405071!important}.name{font-size:14px;font-weight:600;line-height:24px;color:#fff!important}.f-18{font-size:18px}.gap-10{gap:10px}.left{color:#fffc}.right{font-weight:500;font-size:14px;line-height:24px;color:#fffc}.tab-section{margin-top:15px}.tabs{margin-bottom:25px;font-weight:500;font-size:16px;line-height:24px;color:#01161e;margin-left:8px}.activeTab{border-left:8px solid rgba(248,169,56,1);font-weight:700!important;color:#219ebc;margin-right:15px;background:#f1f3f7;padding:10px;border-radius:0 6px 6px 0;margin-left:unset}\n"] }]
10643
- }], ctorParameters: () => [{ type: RestService }], propDecorators: { data: [{
10644
- type: Input
10645
- }] } });
10646
-
10647
10655
  class SimpoWrapComntainer {
10648
10656
  constructor(eventService, el) {
10649
10657
  this.eventService = eventService;