simpo-component-library 3.0.32 → 3.0.33
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.
- package/esm2022/lib/elements/property-view/property-view.component.mjs +3 -23
- package/esm2022/lib/sections/property-detail/property-detail.component.mjs +3 -3
- package/esm2022/lib/sections/signup-signin/signup-signin.component.mjs +34 -23
- package/fesm2022/simpo-component-library.mjs +37 -46
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/sections/signup-signin/signup-signin.component.d.ts +1 -0
- package/package.json +1 -1
- package/simpo-component-library-3.0.33.tgz +0 -0
- package/simpo-component-library-3.0.32.tgz +0 -0
|
@@ -5964,26 +5964,6 @@ class PropertyViewComponent {
|
|
|
5964
5964
|
guaranteedGrowth: "5%",
|
|
5965
5965
|
marketMovement: "High"
|
|
5966
5966
|
};
|
|
5967
|
-
// propertyDetails : any = {
|
|
5968
|
-
// 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"],
|
|
5969
|
-
// propertyName : "Ananta One - Blue Moon",
|
|
5970
|
-
// propertyLocation : "RRR Hyderabad, Telangana",
|
|
5971
|
-
// investedDate : "12 Jun 2024",
|
|
5972
|
-
// type : "Rental",
|
|
5973
|
-
// share : "1.40%",
|
|
5974
|
-
// documents : ["Title deed","Property Registration Certificate"],
|
|
5975
|
-
// 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.",
|
|
5976
|
-
// 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"}],
|
|
5977
|
-
// invested : "₹4.1 L",
|
|
5978
|
-
// totalSqft : "32",
|
|
5979
|
-
// irr : "12%",
|
|
5980
|
-
// imv : "₹4.1 L",
|
|
5981
|
-
// income : "+₹52 k",
|
|
5982
|
-
// projectedValue : "₹5.21 L",
|
|
5983
|
-
// potentialApperciation : "8%",
|
|
5984
|
-
// guaranteedGrowth : "5%",
|
|
5985
|
-
// marketMovement : "High"
|
|
5986
|
-
// }
|
|
5987
5967
|
this.pageLoader = false;
|
|
5988
5968
|
}
|
|
5989
5969
|
ngOnInit() {
|
|
@@ -6004,11 +5984,11 @@ class PropertyViewComponent {
|
|
|
6004
5984
|
});
|
|
6005
5985
|
}
|
|
6006
5986
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyViewComponent, deps: [{ token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6007
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertyViewComponent, isStandalone: true, selector: "simpo-property-view", inputs: { id: "id" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, ngImport: i0, template: "<div class=\" row main-container gap-10 \" *ngIf=\"!pageLoader\">\r\n <div class=\" col-md-6 left-container w-60 \">\r\n <div class=\"property-detail common-style1\">\r\n <div class=\" row carousel-01\">\r\n <div id=\"carouselExampleInterval\" class=\" col-12 col-6 carousel slide p-relative \" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let ele of propertyDetails?.property?.imgUrl;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 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.property.imgUrl;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 *ngIf=\"srcWidth < 475\" class=\" col-6 bottom-details d-flex gap-10 mt-10\">\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Invested Date</div>\r\n <div class=\"right\">{{(propertyDetails?.earliestPurchaseDate | date) ?? \"N/A\"}}</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?.property?.propertyType ?? \"N/A\"}}</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 ?? \"N/A\"}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"details mt-10\">\r\n <div class=\"row top-details\">\r\n <div class=\"col-md-6 col-12 top-left\">\r\n <div class=\"main-text\">{{propertyDetails?.property?.name ?? \"N/A\"}}</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\" class=\"grey-icon\" width=\"15px\">{{propertyDetails?.property?.location ?? \"N/A\"}}</div>\r\n </div>\r\n <div *ngIf=\"srcWidth > 475\" class=\"col-md-6 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 *ngIf=\"srcWidth > 475\" 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?.earliestPurchaseDate | date) ?? \"N/A\"}}</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?.property?.propertyType ?? \"N/A\"}}</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 ?? \"N/A\"}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"doc-rep common-style1\" *ngIf=\"propertyDetails?.property?.documents.length > 0\">\r\n <div class=\"head-about-property\">Documents & Reports</div>\r\n <div class=\"file-container d-flex flex-column gap-10\">\r\n <div class=\"file d-flex justify-content-between\" *ngFor=\"let ele of propertyDetails?.property?.documents\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/678394c1739183726107image%209.png\"\r\n alt=\"pdf\" class=\"w-10\">\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 w-10\">\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?.property?.description ?? \"N/A\"}}</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=\" col-md-6 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\">\u20B9{{propertyDetails?.totalInvestedAmount ?? \"N/A\"}}</div>\r\n <div class=\"bottom\">Invested</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails?.totalSqFeetOwned ?? \"N/A\"}}</div>\r\n <div class=\"bottom\">Sq.ft</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails?.financeDetails?.indicativeMarketValue ?? \"N/A\"}}</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?.financeDetails?.irr ?? \"N/A\"}}</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\">\u20B9{{propertyDetails?.financeDetails?.annualReturn ?? \"N/A\"}}</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 *ngIf=\"srcWidth < 475\" 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\r\n<section class=\"pageloader\" *ngIf=\"pageLoader\">\r\n <div class=\"row gap-10 overflow-y-scroll\" [class.flex-column]=\"srcWidth < 475\">\r\n <div class=\"left-container-1 w-60\">\r\n <div class=\"skel-loader\" *ngFor=\"let skel of [1,2,4]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '25vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n <div class=\"right-container-1 w-40\">\r\n <div class=\"skel-loader\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '35vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.main-container{padding:10px;width:100%}.left-container,.right-container{height:75vh;overflow-y:scroll}.carousel-item{display:unset!important}.w-60{width:63%}.w-40{width:35%}.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:5px 7px;border-radius:10px;font-size:12px;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}.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;width:48%}.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;background:#f1f6ff}.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}.grey-icon{filter:grayscale(100%) brightness(50%)}.doc-rep{overflow-y:scroll;height:17vh}@media only screen and (max-width: 475px){.main-container{flex-direction:column;width:auto}.left-container,.right-container{height:auto}.carousel{height:16vh;width:40%}.w-60,.w-40{width:auto}.w-4 .carousel{width:40%}.d-block{height:16vh}.bottom-details{flex-direction:column;width:60%}.left-right{justify-content:space-between}.propertyName{width:88%}.top-right{position:sticky;bottom:0%;background:#fff;justify-content:center;padding:8px 2px}.common-style2{padding:11px 8px;width:40vw;text-align:center;font-size:14px}.right-head{border-radius:10px}.w-10{width:14%}.file{padding:5px 10px;height:8vh}.doc-text{font-size:12px}.left-container-1,.right-container-1{width:100%}.overflow-y-scroll{overflow-y:scroll;height:75vh}}\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.DatePipe, name: "date" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i3.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
|
|
5987
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertyViewComponent, isStandalone: true, selector: "simpo-property-view", inputs: { id: "id" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, ngImport: i0, template: "<div class=\" row main-container gap-10 \" *ngIf=\"!pageLoader\">\r\n <div class=\" col-md-6 left-container w-60 \">\r\n <div class=\"property-detail common-style1\">\r\n <div class=\" row carousel-01\">\r\n <div id=\"carouselExampleInterval\" class=\" col-12 col-6 carousel slide p-relative \" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let ele of propertyDetails?.property?.imgUrl;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 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.property.imgUrl;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 *ngIf=\"srcWidth < 475\" class=\" col-6 bottom-details d-flex gap-10 mt-10\">\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Invested Date</div>\r\n <div class=\"right\">{{(propertyDetails?.earliestPurchaseDate | date) ?? \"N/A\"}}</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?.property?.propertyType ?? \"N/A\"}}</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 ?? \"N/A\"}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"details mt-10\">\r\n <div class=\"row top-details\">\r\n <div class=\"col-md-6 col-12 top-left\">\r\n <div class=\"main-text\">{{propertyDetails?.property?.name ?? \"N/A\"}}</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\" class=\"grey-icon\" width=\"15px\">{{propertyDetails?.property?.location ?? \"N/A\"}}</div>\r\n </div>\r\n <div *ngIf=\"srcWidth > 475\" class=\"col-md-6 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 *ngIf=\"srcWidth > 475\" 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?.earliestPurchaseDate | date) ?? \"N/A\"}}</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?.property?.propertyType ?? \"N/A\"}}</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 ?? \"N/A\"}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"doc-rep common-style1\" *ngIf=\"propertyDetails?.property?.documents.length > 0\">\r\n <div class=\"head-about-property\">Documents & Reports</div>\r\n <div class=\"file-container d-flex flex-column gap-10\">\r\n <div class=\"file d-flex justify-content-between\" *ngFor=\"let ele of propertyDetails?.property?.documents\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/678394c1739183726107image%209.png\"\r\n alt=\"pdf\" class=\"w-10\">\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 w-10\">\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?.property?.description ?? \"N/A\"}}</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=\" col-md-6 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\">\u20B9{{propertyDetails?.totalInvestedAmount ?? \"N/A\"}}</div>\r\n <div class=\"bottom\">Invested</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails?.totalSqFeetOwned ?? \"N/A\"}}</div>\r\n <div class=\"bottom\">Sq.ft</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails?.property?.financeDetails?.indicativeMarketValue ?? \"N/A\"}}</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?.property?.financeDetails?.irr ?? \"N/A\"}}</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\">\u20B9{{propertyDetails?.property?.financeDetails?.annualReturn ?? \"N/A\"}}</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 *ngIf=\"srcWidth < 475\" 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\r\n<section class=\"pageloader\" *ngIf=\"pageLoader\">\r\n <div class=\"row gap-10 overflow-y-scroll\" [class.flex-column]=\"srcWidth < 475\">\r\n <div class=\"left-container-1 w-60\">\r\n <div class=\"skel-loader\" *ngFor=\"let skel of [1,2,4]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '25vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n <div class=\"right-container-1 w-40\">\r\n <div class=\"skel-loader\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '35vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.main-container{padding:10px;width:100%}.left-container,.right-container{height:75vh;overflow-y:scroll}.carousel-item{display:unset!important}.w-60{width:63%}.w-40{width:35%}.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:5px 7px;border-radius:10px;font-size:12px;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}.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;width:48%}.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;background:#f1f6ff}.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}.grey-icon{filter:grayscale(100%) brightness(50%)}.doc-rep{overflow-y:scroll;height:17vh}@media only screen and (max-width: 475px){.main-container{flex-direction:column;width:auto}.left-container,.right-container{height:auto}.carousel{height:16vh;width:40%}.w-60,.w-40{width:auto}.w-4 .carousel{width:40%}.d-block{height:16vh}.bottom-details{flex-direction:column;width:60%}.left-right{justify-content:space-between}.propertyName{width:88%}.top-right{position:sticky;bottom:0%;background:#fff;justify-content:center;padding:8px 2px}.common-style2{padding:11px 8px;width:40vw;text-align:center;font-size:14px}.right-head{border-radius:10px}.w-10{width:14%}.file{padding:5px 10px;height:8vh}.doc-text{font-size:12px}.left-container-1,.right-container-1{width:100%}.overflow-y-scroll{overflow-y:scroll;height:75vh}}\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.DatePipe, name: "date" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i3.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
|
|
6008
5988
|
}
|
|
6009
5989
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyViewComponent, decorators: [{
|
|
6010
5990
|
type: Component,
|
|
6011
|
-
args: [{ selector: 'simpo-property-view', standalone: true, imports: [CommonModule, MatIcon, NgxSkeletonLoaderModule], template: "<div class=\" row main-container gap-10 \" *ngIf=\"!pageLoader\">\r\n <div class=\" col-md-6 left-container w-60 \">\r\n <div class=\"property-detail common-style1\">\r\n <div class=\" row carousel-01\">\r\n <div id=\"carouselExampleInterval\" class=\" col-12 col-6 carousel slide p-relative \" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let ele of propertyDetails?.property?.imgUrl;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 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.property.imgUrl;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 *ngIf=\"srcWidth < 475\" class=\" col-6 bottom-details d-flex gap-10 mt-10\">\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Invested Date</div>\r\n <div class=\"right\">{{(propertyDetails?.earliestPurchaseDate | date) ?? \"N/A\"}}</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?.property?.propertyType ?? \"N/A\"}}</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 ?? \"N/A\"}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"details mt-10\">\r\n <div class=\"row top-details\">\r\n <div class=\"col-md-6 col-12 top-left\">\r\n <div class=\"main-text\">{{propertyDetails?.property?.name ?? \"N/A\"}}</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\" class=\"grey-icon\" width=\"15px\">{{propertyDetails?.property?.location ?? \"N/A\"}}</div>\r\n </div>\r\n <div *ngIf=\"srcWidth > 475\" class=\"col-md-6 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 *ngIf=\"srcWidth > 475\" 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?.earliestPurchaseDate | date) ?? \"N/A\"}}</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?.property?.propertyType ?? \"N/A\"}}</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 ?? \"N/A\"}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"doc-rep common-style1\" *ngIf=\"propertyDetails?.property?.documents.length > 0\">\r\n <div class=\"head-about-property\">Documents & Reports</div>\r\n <div class=\"file-container d-flex flex-column gap-10\">\r\n <div class=\"file d-flex justify-content-between\" *ngFor=\"let ele of propertyDetails?.property?.documents\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/678394c1739183726107image%209.png\"\r\n alt=\"pdf\" class=\"w-10\">\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 w-10\">\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?.property?.description ?? \"N/A\"}}</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=\" col-md-6 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\">\u20B9{{propertyDetails?.totalInvestedAmount ?? \"N/A\"}}</div>\r\n <div class=\"bottom\">Invested</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails?.totalSqFeetOwned ?? \"N/A\"}}</div>\r\n <div class=\"bottom\">Sq.ft</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails?.financeDetails?.indicativeMarketValue ?? \"N/A\"}}</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?.financeDetails?.irr ?? \"N/A\"}}</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\">\u20B9{{propertyDetails?.financeDetails?.annualReturn ?? \"N/A\"}}</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 *ngIf=\"srcWidth < 475\" 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\r\n<section class=\"pageloader\" *ngIf=\"pageLoader\">\r\n <div class=\"row gap-10 overflow-y-scroll\" [class.flex-column]=\"srcWidth < 475\">\r\n <div class=\"left-container-1 w-60\">\r\n <div class=\"skel-loader\" *ngFor=\"let skel of [1,2,4]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '25vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n <div class=\"right-container-1 w-40\">\r\n <div class=\"skel-loader\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '35vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.main-container{padding:10px;width:100%}.left-container,.right-container{height:75vh;overflow-y:scroll}.carousel-item{display:unset!important}.w-60{width:63%}.w-40{width:35%}.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:5px 7px;border-radius:10px;font-size:12px;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}.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;width:48%}.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;background:#f1f6ff}.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}.grey-icon{filter:grayscale(100%) brightness(50%)}.doc-rep{overflow-y:scroll;height:17vh}@media only screen and (max-width: 475px){.main-container{flex-direction:column;width:auto}.left-container,.right-container{height:auto}.carousel{height:16vh;width:40%}.w-60,.w-40{width:auto}.w-4 .carousel{width:40%}.d-block{height:16vh}.bottom-details{flex-direction:column;width:60%}.left-right{justify-content:space-between}.propertyName{width:88%}.top-right{position:sticky;bottom:0%;background:#fff;justify-content:center;padding:8px 2px}.common-style2{padding:11px 8px;width:40vw;text-align:center;font-size:14px}.right-head{border-radius:10px}.w-10{width:14%}.file{padding:5px 10px;height:8vh}.doc-text{font-size:12px}.left-container-1,.right-container-1{width:100%}.overflow-y-scroll{overflow-y:scroll;height:75vh}}\n"] }]
|
|
5991
|
+
args: [{ selector: 'simpo-property-view', standalone: true, imports: [CommonModule, MatIcon, NgxSkeletonLoaderModule], template: "<div class=\" row main-container gap-10 \" *ngIf=\"!pageLoader\">\r\n <div class=\" col-md-6 left-container w-60 \">\r\n <div class=\"property-detail common-style1\">\r\n <div class=\" row carousel-01\">\r\n <div id=\"carouselExampleInterval\" class=\" col-12 col-6 carousel slide p-relative \" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let ele of propertyDetails?.property?.imgUrl;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 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.property.imgUrl;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 *ngIf=\"srcWidth < 475\" class=\" col-6 bottom-details d-flex gap-10 mt-10\">\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Invested Date</div>\r\n <div class=\"right\">{{(propertyDetails?.earliestPurchaseDate | date) ?? \"N/A\"}}</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?.property?.propertyType ?? \"N/A\"}}</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 ?? \"N/A\"}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"details mt-10\">\r\n <div class=\"row top-details\">\r\n <div class=\"col-md-6 col-12 top-left\">\r\n <div class=\"main-text\">{{propertyDetails?.property?.name ?? \"N/A\"}}</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\" class=\"grey-icon\" width=\"15px\">{{propertyDetails?.property?.location ?? \"N/A\"}}</div>\r\n </div>\r\n <div *ngIf=\"srcWidth > 475\" class=\"col-md-6 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 *ngIf=\"srcWidth > 475\" 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?.earliestPurchaseDate | date) ?? \"N/A\"}}</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?.property?.propertyType ?? \"N/A\"}}</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 ?? \"N/A\"}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"doc-rep common-style1\" *ngIf=\"propertyDetails?.property?.documents.length > 0\">\r\n <div class=\"head-about-property\">Documents & Reports</div>\r\n <div class=\"file-container d-flex flex-column gap-10\">\r\n <div class=\"file d-flex justify-content-between\" *ngFor=\"let ele of propertyDetails?.property?.documents\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/678394c1739183726107image%209.png\"\r\n alt=\"pdf\" class=\"w-10\">\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 w-10\">\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?.property?.description ?? \"N/A\"}}</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=\" col-md-6 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\">\u20B9{{propertyDetails?.totalInvestedAmount ?? \"N/A\"}}</div>\r\n <div class=\"bottom\">Invested</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails?.totalSqFeetOwned ?? \"N/A\"}}</div>\r\n <div class=\"bottom\">Sq.ft</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails?.property?.financeDetails?.indicativeMarketValue ?? \"N/A\"}}</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?.property?.financeDetails?.irr ?? \"N/A\"}}</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\">\u20B9{{propertyDetails?.property?.financeDetails?.annualReturn ?? \"N/A\"}}</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 *ngIf=\"srcWidth < 475\" 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\r\n<section class=\"pageloader\" *ngIf=\"pageLoader\">\r\n <div class=\"row gap-10 overflow-y-scroll\" [class.flex-column]=\"srcWidth < 475\">\r\n <div class=\"left-container-1 w-60\">\r\n <div class=\"skel-loader\" *ngFor=\"let skel of [1,2,4]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '25vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n <div class=\"right-container-1 w-40\">\r\n <div class=\"skel-loader\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '35vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.main-container{padding:10px;width:100%}.left-container,.right-container{height:75vh;overflow-y:scroll}.carousel-item{display:unset!important}.w-60{width:63%}.w-40{width:35%}.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:5px 7px;border-radius:10px;font-size:12px;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}.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;width:48%}.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;background:#f1f6ff}.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}.grey-icon{filter:grayscale(100%) brightness(50%)}.doc-rep{overflow-y:scroll;height:17vh}@media only screen and (max-width: 475px){.main-container{flex-direction:column;width:auto}.left-container,.right-container{height:auto}.carousel{height:16vh;width:40%}.w-60,.w-40{width:auto}.w-4 .carousel{width:40%}.d-block{height:16vh}.bottom-details{flex-direction:column;width:60%}.left-right{justify-content:space-between}.propertyName{width:88%}.top-right{position:sticky;bottom:0%;background:#fff;justify-content:center;padding:8px 2px}.common-style2{padding:11px 8px;width:40vw;text-align:center;font-size:14px}.right-head{border-radius:10px}.w-10{width:14%}.file{padding:5px 10px;height:8vh}.doc-text{font-size:12px}.left-container-1,.right-container-1{width:100%}.overflow-y-scroll{overflow-y:scroll;height:75vh}}\n"] }]
|
|
6012
5992
|
}], ctorParameters: () => [{ type: RestService }], propDecorators: { id: [{
|
|
6013
5993
|
type: Input
|
|
6014
5994
|
}], getScreenSize: [{
|
|
@@ -10400,11 +10380,11 @@ class PropertyDetailComponent {
|
|
|
10400
10380
|
return window.innerWidth <= 475;
|
|
10401
10381
|
}
|
|
10402
10382
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyDetailComponent, deps: [{ token: RestService }, { token: i2$2.ActivatedRoute }, { token: i2$2.Router }, { token: i5.MatDialog }, { token: i4$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10403
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertyDetailComponent, isStandalone: true, selector: "simpo-property-detail", inputs: { data: "data" }, 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-container\">\r\n <div id=\"carouselExampleInterval\" *ngIf=\"!skelLoader\" class=\"carousel slide p-relative\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\" >\r\n <div class=\"carousel-item active\" data-bs-interval=\"2000\" *ngFor=\"let img of propertyDetails.imgUrl\">\r\n <img [src]=\"img\" class=\"d-block w-100 height-30 h-50\" alt=\"property-image\">\r\n </div>\r\n <!-- <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div>\r\n <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div> -->\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-between\">\r\n <div class=\"property-details\">\r\n <p class=\"pname\">{{propertyDetails.name}}</p>\r\n <span class=\"plocation d-flex align-items-center gap-5\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\"\r\n alt=\"location image\"> {{propertyDetails.location}}</span>\r\n </div>\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <!-- d-flex justify-content-end align-items-end -->\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <!-- additional-properties-1 -->\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" [attr.data-bs-slide-to]=\"i\"\r\n class=\"active additional-properties\" aria-current=\"true\" aria-label=\"Slide 1\"\r\n *ngFor=\"let slide of propertyDetails.imgUrl;let i = index\"></button>\r\n <!-- class=\"additional-properties\" -->\r\n <!-- <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\" class=\"additional-properties\"></button>\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\" class=\"additional-properties\"></button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"skelLoader\">\r\n <div class=\"col-12\" >\r\n <ng-container *ngTemplateOutlet=\"skeleton\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"property-numbers d-flex justify-content-between\" *ngIf=\"!skelLoader\">\r\n <ng-container>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.pricePerSqFeet || 0 }}</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Price/Sq.ft</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.indicativeMarketValue || 0 }}</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Indicative Market Value</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.irr || 0 }}%</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Internal Returns Rate</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.annualReturn || 0 }}%</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Annual Returns</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <ng-container>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/273918c1739173355725checked%201.png\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container>\r\n <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.annualReturn || 0}}%</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Guaranteed annual capital growth</p>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"about-section w-70 d-flex g-40\" *ngIf=\"!skelLoader\">\r\n <div class=\"right w-60 \">\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">About Property</div>\r\n <div class=\"about-property-text\">{{propertyDetails.description}}</div>\r\n <div class=\"about-property-details d-flex gap-10\">\r\n <ng-container>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Type: </div>\r\n <div class=\"left-text\">{{propertyDetails.propertyType}}</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Size:</div>\r\n <div class=\"left-text\">{{propertyDetails.totalAreaSqFeet}}</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">year:</div>\r\n <div class=\"left-text\">{{propertyDetails.year}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\" *ngIf=\"(propertyDetails?.benefits?.length || 0) > 0\">\r\n <div class=\"head-about-property\">Investment Benefit</div>\r\n <div class=\"card-container d-flex gap-10\">\r\n <ng-container *ngFor=\"let benefits of propertyDetails.benefits\">\r\n <div class=\"cards\">\r\n <div class=\"image-container w-100 d-flex justify-content-center\">\r\n <img [src]=\"benefits.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"card-head\">{{benefits.title}}</div>\r\n <div class=\"card-text\">{{benefits.description}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">Documents & Reports</div>\r\n <div class=\"file-container d-flex justify-content-between gap-10\">\r\n <div class=\"file d-flex justify-content-between\" *ngFor=\"let ele of pdfCards\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/678394c1739183726107image%209.png\"\r\n alt=\"pdf\">\r\n <div class=\"doc-text w-75 d-flex align-items-center\"> {{ele.length > 15 ?\r\n ele.substring(0,15)+'...' : ele }}</div>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/195414c1739183779845fi_3502477.png\"\r\n alt=\"download\" class=\"download-img\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"left w-40\">\r\n <div class=\"sqft\">\r\n <div class=\"head-about-property\">Buy SQFT</div>\r\n <div class=\"price justify-content-between d-flex\">\r\n <div class=\"left-price\">Price/Sq.ft</div>\r\n <div class=\"right-price\">\u20B9{{propertyDetails.financeDetails.pricePerSqFeet}}</div>\r\n </div>\r\n <div class=\"sqft-quantity d-flex justify-content-between w-100 align-items-center\">\r\n <div class=\"left-sqft\">SQFT Quantity</div>\r\n <div class=\"right-sqft d-flex align-items-center\">\r\n <mat-icon (click)=\"noOfSqft > 0 ? noOfSqft = noOfSqft - 1 : noOfSqft = 0\"\r\n class=\"d-flex align-items-center justify-content-center icon\">remove</mat-icon>\r\n <div class=\"sqft-number d-flex justify-content-center\"><input type=\"number\" [(ngModel)]=\"noOfSqft\"\r\n class=\"sqft-number additional-properties-2 text-center p-0 \"></div>\r\n <mat-icon (click)=\"noOfSqft = noOfSqft + 1\"\r\n class=\"d-flex align-items-center justify-content-center icon\">add</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"payable d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"payable-left\">\r\n <p class=\"pay-text\">Payable Amount</p><span class=\"pay-subtext\">(Incl. Fees & Other\r\n Levies)</span>\r\n </div>\r\n <div class=\"payable-right\">\r\n \u20B9{{ noOfSqft * propertyDetails.financeDetails.pricePerSqFeet}}\r\n </div>\r\n </div>\r\n <div class=\"buy\" (click)=\"purchaseProperty()\">\r\n Buy SQFT\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n<ng-template #skeleton>\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '72vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\" *ngFor=\"let item of skelArray\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '98%',\r\n 'border-radius': '5px',\r\n height: '23vh',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: ["*{font-family:DM Sans!important}.main-container{overflow-x:hidden}mat-icon{font-family:Material Icons!important}.property-numbers{padding:40px 60px 10px;background:#f2910b}.number-text{font-weight:700;font-size:35px;line-height:40px;color:#102031;font-family:DM Sans}.property-text{font-size:20px;font-weight:600;line-height:28px;color:#ffffffe6}.w-18{width:18%}.last-card{width:21%}.w-70{width:70%}.about-section{margin:30px auto}.about-property{background:#fff;border:1px solid rgba(0,0,0,.03);border-radius:10px;padding:10px;margin-bottom:15px}.head-about-property{font-weight:600;font-size:16px;line-height:26px;margin-bottom:10px}.about-property-text{font-weight:400;font-size:16px;line-height:29px;color:#01161eb3}.gap-10{gap:10px}.w-60{width:60%}.about-property-details{width:100%;justify-content:space-between;padding:13px 10px;background:#f6f5f5;border-radius:7px;margin-top:15px;margin-bottom:5px}.right-text{font-weight:500;font-size:16px;line-height:20px;color:#01161ecc}.left-text{font-weight:600;font-size:16px;line-height:20px;color:#01161e}.cards{width:30%;background:#f9fbff;border-radius:10px;padding:15px}.card-head{font-weight:600;font-size:16px;line-height:25px;text-align:center;overflow:hidden;text-overflow:ellipsis}.card-text{font-size:14px;font-weight:500;line-height:25px;text-align:center;overflow:hidden;text-overflow:ellipsis}.image-container img{height:8vh}.file{background:#f7f7f7;border-radius:5px;padding:12px;width:50%}.w-75{width:75%}.doc-text{font-size:16px;font-weight:500;line-height:26px;color:#000}.download-image{width:28px}.g-40{gap:40px}.w-40{width:40%}.sqft{background:linear-gradient(180deg,#0d1b2a,#172b40);color:#fff;width:85%;border-radius:8px;padding:15px}.right-price{width:50%;color:#fc9a11;font-size:28px;font-weight:700;line-height:32px;text-align:end}.left-price{width:50%;font-size:18px;font-weight:600;line-height:32px}.price{display:flex;background:#263f5a;border-radius:8px;padding:15px 10px}.buy{background:#36b37e;color:#fff;padding:15px;border-radius:8px;font-size:15px;font-weight:700;line-height:20px;text-align:center;cursor:pointer}.payable{padding:10px;background:#ffffffb3;border-radius:8px;margin-bottom:10px}.pay-text{font-size:14px;line-height:20px;font-weight:600;color:#000;margin-bottom:unset;border-radius:8px}.pay-subtext{font-size:10px;font-weight:500;color:#0006}.payable-right{font-weight:700;font-size:22px;line-height:32px;color:#fff}.card-container{overflow-x:scroll}.sqft-quantity{padding:15px 2px}.left-sqft{font-weight:600;font-size:16px;line-height:32px;color:#fff}.right-sqft{padding:4px;background:#f8a938;border-radius:4px;width:50%}.icon{font-size:16px;font-weight:700;color:#000;line-height:19px;width:30%;margin:0 2px}.sqft-number{background:#fff;width:70%;border-radius:4px;font-weight:700;font-size:20px;line-height:19px;color:#000;padding:10px;outline:unset}.tick-img{width:30px}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%;padding:30px}.pname{font-weight:600;font-size:34px;line-height:44px;color:#fff}.plocation{font-size:16px;font-weight:500;line-height:12px;color:#fff9}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.additional-properties-2{border:unset}.gap-5{gap:5px!important}.second-section-wrapper{display:flex;width:100%}.wrapper{width:30vw}.h-50{height:70vh!important}@media screen and (max-width : 475px){.property-numbers{flex-wrap:wrap;width:100%;padding:15px!important;margin-bottom:15px}.icon-text{width:50%}.last-card{width:100%!important}.right-text,.left-text{white-space:nowrap}.card-container{flex-direction:column;gap:10px;align-items:center}.cards{width:70%}.about-section{flex-direction:column;width:100%!important;margin:unset!important}.right{width:100%!important}.about-property{width:100%;border:none!important}.left{width:100%;margin:10px}.file-container{flex-direction:column}.file{width:100%!important}.sqft{width:95%}.height-30{height:30vh}.about-property-details{display:grid!important;width:100%}.propertyName{padding:10px!important}.pname{font-size:21px;line-height:10px}.additional-properties{height:1vh;width:8px!important}.number-text{font-size:26px}.property-text{font-size:18px}.head-about-property{text-align:center}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i3.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }] }); }
|
|
10383
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertyDetailComponent, isStandalone: true, selector: "simpo-property-detail", inputs: { data: "data" }, 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-container\">\r\n <div id=\"carouselExampleInterval\" *ngIf=\"!skelLoader\" class=\"carousel slide p-relative\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\" >\r\n <div class=\"carousel-item active\" data-bs-interval=\"2000\" *ngFor=\"let img of propertyDetails.imgUrl\">\r\n <img [src]=\"img\" class=\"d-block w-100 height-30 h-50\" alt=\"property-image\">\r\n </div>\r\n <!-- <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div>\r\n <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div> -->\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-between\">\r\n <div class=\"property-details\">\r\n <p class=\"pname\">{{propertyDetails.name}}</p>\r\n <span class=\"plocation d-flex align-items-center gap-5\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\"\r\n alt=\"location image\"> {{propertyDetails.location}}</span>\r\n </div>\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <!-- d-flex justify-content-end align-items-end -->\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <!-- additional-properties-1 -->\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" [attr.data-bs-slide-to]=\"i\"\r\n class=\"active additional-properties\" aria-current=\"true\" aria-label=\"Slide 1\"\r\n *ngFor=\"let slide of propertyDetails.imgUrl;let i = index\"></button>\r\n <!-- class=\"additional-properties\" -->\r\n <!-- <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\" class=\"additional-properties\"></button>\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\" class=\"additional-properties\"></button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"skelLoader\">\r\n <div class=\"col-12\" >\r\n <ng-container *ngTemplateOutlet=\"skeleton\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"property-numbers d-flex justify-content-between\" *ngIf=\"!skelLoader\">\r\n <ng-container>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.pricePerSqFeet || 0 }}</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Price/Sq.ft</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.indicativeMarketValue || 0 }}</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Indicative Market Value</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.irr || 0 }}%</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Internal Returns Rate</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.annualReturn || 0 }}%</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Annual Returns</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <ng-container>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/273918c1739173355725checked%201.png\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container>\r\n <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.annualReturn || 0}}%</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Guaranteed annual capital growth</p>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"about-section w-70 d-flex g-40\" *ngIf=\"!skelLoader\">\r\n <div class=\"right w-60 \">\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">About Property</div>\r\n <div class=\"about-property-text\">{{propertyDetails.description}}</div>\r\n <div class=\"about-property-details d-flex gap-10\">\r\n <ng-container>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Type: </div>\r\n <div class=\"left-text\">{{propertyDetails.propertyType}}</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Size:</div>\r\n <div class=\"left-text\">{{propertyDetails.totalAreaSqFeet}}sqft</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">year:</div>\r\n <div class=\"left-text\">{{propertyDetails.year}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\" *ngIf=\"(propertyDetails?.benefits?.length || 0) > 0\">\r\n <div class=\"head-about-property\">Investment Benefit</div>\r\n <div class=\"card-container d-flex gap-10\">\r\n <ng-container *ngFor=\"let benefits of propertyDetails.benefits\">\r\n <div class=\"cards\">\r\n <div class=\"image-container w-100 d-flex justify-content-center\">\r\n <img [src]=\"benefits.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"card-head\">{{benefits.title}}</div>\r\n <div class=\"card-text\">{{benefits.description}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">Documents & Reports</div>\r\n <div class=\"file-container d-flex justify-content-between gap-10\">\r\n <div class=\"file d-flex justify-content-between\" *ngFor=\"let ele of pdfCards\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/678394c1739183726107image%209.png\"\r\n alt=\"pdf\">\r\n <div class=\"doc-text w-75 d-flex align-items-center\"> {{ele.length > 15 ?\r\n ele.substring(0,15)+'...' : ele }}</div>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/195414c1739183779845fi_3502477.png\"\r\n alt=\"download\" class=\"download-img\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"left w-40\">\r\n <div class=\"sqft\">\r\n <div class=\"head-about-property\">Buy SQFT</div>\r\n <div class=\"price justify-content-between d-flex\">\r\n <div class=\"left-price\">Price/Sq.ft</div>\r\n <div class=\"right-price\">\u20B9{{propertyDetails.financeDetails.pricePerSqFeet}}</div>\r\n </div>\r\n <div class=\"sqft-quantity d-flex justify-content-between w-100 align-items-center\">\r\n <div class=\"left-sqft\">SQFT Quantity</div>\r\n <div class=\"right-sqft d-flex align-items-center\">\r\n <mat-icon (click)=\"noOfSqft > 0 ? noOfSqft = noOfSqft - 1 : noOfSqft = 0\"\r\n class=\"d-flex align-items-center justify-content-center icon\">remove</mat-icon>\r\n <div class=\"sqft-number d-flex justify-content-center\"><input type=\"number\" [(ngModel)]=\"noOfSqft\"\r\n class=\"sqft-number additional-properties-2 text-center p-0 \"></div>\r\n <mat-icon (click)=\"noOfSqft = noOfSqft + 1\"\r\n class=\"d-flex align-items-center justify-content-center icon\">add</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"payable d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"payable-left\">\r\n <p class=\"pay-text\">Payable Amount</p><span class=\"pay-subtext\">(Incl. Fees & Other\r\n Levies)</span>\r\n </div>\r\n <div class=\"payable-right\">\r\n \u20B9{{ noOfSqft * propertyDetails.financeDetails.pricePerSqFeet}}\r\n </div>\r\n </div>\r\n <div class=\"buy\" (click)=\"purchaseProperty()\">\r\n Buy SQFT\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n<ng-template #skeleton>\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '72vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\" *ngFor=\"let item of skelArray\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '98%',\r\n 'border-radius': '5px',\r\n height: '23vh',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: ["*{font-family:DM Sans!important}.main-container{overflow-x:hidden}mat-icon{font-family:Material Icons!important}.property-numbers{padding:40px 60px 10px;background:#f2910b}.number-text{font-weight:700;font-size:35px;line-height:40px;color:#102031;font-family:DM Sans}.property-text{font-size:20px;font-weight:600;line-height:28px;color:#ffffffe6}.w-18{width:18%}.last-card{width:21%}.w-70{width:70%}.about-section{margin:30px auto}.about-property{background:#fff;border:1px solid rgba(0,0,0,.03);border-radius:10px;padding:10px;margin-bottom:15px}.head-about-property{font-weight:600;font-size:16px;line-height:26px;margin-bottom:10px}.about-property-text{font-weight:400;font-size:16px;line-height:29px;color:#01161eb3}.gap-10{gap:10px}.w-60{width:60%}.about-property-details{width:100%;justify-content:space-between;padding:13px 10px;background:#f6f5f5;border-radius:7px;margin-top:15px;margin-bottom:5px}.right-text{font-weight:500;font-size:16px;line-height:20px;color:#01161ecc}.left-text{font-weight:600;font-size:16px;line-height:20px;color:#01161e}.cards{width:30%;background:#f9fbff;border-radius:10px;padding:15px}.card-head{font-weight:600;font-size:16px;line-height:25px;text-align:center;overflow:hidden;text-overflow:ellipsis}.card-text{font-size:14px;font-weight:500;line-height:25px;text-align:center;overflow:hidden;text-overflow:ellipsis}.image-container img{height:8vh}.file{background:#f7f7f7;border-radius:5px;padding:12px;width:50%}.w-75{width:75%}.doc-text{font-size:16px;font-weight:500;line-height:26px;color:#000}.download-image{width:28px}.g-40{gap:40px}.w-40{width:40%}.sqft{background:linear-gradient(180deg,#0d1b2a,#172b40);color:#fff;width:85%;border-radius:8px;padding:15px}.right-price{width:50%;color:#fc9a11;font-size:28px;font-weight:700;line-height:32px;text-align:end}.left-price{width:50%;font-size:18px;font-weight:600;line-height:32px}.price{display:flex;background:#263f5a;border-radius:8px;padding:15px 10px}.buy{background:#36b37e;color:#fff;padding:15px;border-radius:8px;font-size:15px;font-weight:700;line-height:20px;text-align:center;cursor:pointer}.payable{padding:10px;background:#ffffffb3;border-radius:8px;margin-bottom:10px}.pay-text{font-size:14px;line-height:20px;font-weight:600;color:#000;margin-bottom:unset;border-radius:8px}.pay-subtext{font-size:10px;font-weight:500;color:#0006}.payable-right{font-weight:700;font-size:22px;line-height:32px;color:#fff}.card-container{overflow-x:scroll}.sqft-quantity{padding:15px 2px}.left-sqft{font-weight:600;font-size:16px;line-height:32px;color:#fff}.right-sqft{padding:4px;background:#f8a938;border-radius:4px;width:50%}.icon{font-size:16px;font-weight:700;color:#000;line-height:19px;width:30%;margin:0 2px}.sqft-number{background:#fff;width:70%;border-radius:4px;font-weight:700;font-size:20px;line-height:19px;color:#000;padding:10px;outline:unset}.tick-img{width:30px}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%;padding:30px}.pname{font-weight:600;font-size:34px;line-height:44px;color:#fff}.plocation{font-size:16px;font-weight:500;line-height:12px;color:#fff9}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.additional-properties-2{border:unset}.gap-5{gap:5px!important}.second-section-wrapper{display:flex;width:100%}.wrapper{width:30vw}.h-50{height:70vh!important}@media screen and (max-width : 475px){.property-numbers{flex-wrap:wrap;width:100%;padding:15px!important;margin-bottom:15px}.icon-text{width:50%}.last-card{width:100%!important}.right-text,.left-text{white-space:nowrap}.card-container{flex-direction:column;gap:10px;align-items:center}.cards{width:70%}.about-section{flex-direction:column;width:100%!important;margin:unset!important}.right{width:100%!important}.about-property{width:100%;border:none!important}.left{width:100%;margin:10px}.file-container{flex-direction:column}.file{width:100%!important}.sqft{width:95%}.height-30{height:30vh}.about-property-details{display:grid!important;width:100%}.propertyName{padding:10px!important}.pname{font-size:21px;line-height:10px}.additional-properties{height:1vh;width:8px!important}.number-text{font-size:26px}.property-text{font-size:18px}.head-about-property{text-align:center}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i3.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }] }); }
|
|
10404
10384
|
}
|
|
10405
10385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyDetailComponent, decorators: [{
|
|
10406
10386
|
type: Component,
|
|
10407
|
-
args: [{ selector: 'simpo-property-detail', standalone: true, imports: [NgFor, MatIcon, NgIf, FormsModule, MatDialogModule, NgxSkeletonLoaderModule, CommonModule, 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-container\">\r\n <div id=\"carouselExampleInterval\" *ngIf=\"!skelLoader\" class=\"carousel slide p-relative\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\" >\r\n <div class=\"carousel-item active\" data-bs-interval=\"2000\" *ngFor=\"let img of propertyDetails.imgUrl\">\r\n <img [src]=\"img\" class=\"d-block w-100 height-30 h-50\" alt=\"property-image\">\r\n </div>\r\n <!-- <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div>\r\n <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div> -->\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-between\">\r\n <div class=\"property-details\">\r\n <p class=\"pname\">{{propertyDetails.name}}</p>\r\n <span class=\"plocation d-flex align-items-center gap-5\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\"\r\n alt=\"location image\"> {{propertyDetails.location}}</span>\r\n </div>\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <!-- d-flex justify-content-end align-items-end -->\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <!-- additional-properties-1 -->\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" [attr.data-bs-slide-to]=\"i\"\r\n class=\"active additional-properties\" aria-current=\"true\" aria-label=\"Slide 1\"\r\n *ngFor=\"let slide of propertyDetails.imgUrl;let i = index\"></button>\r\n <!-- class=\"additional-properties\" -->\r\n <!-- <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\" class=\"additional-properties\"></button>\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\" class=\"additional-properties\"></button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"skelLoader\">\r\n <div class=\"col-12\" >\r\n <ng-container *ngTemplateOutlet=\"skeleton\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"property-numbers d-flex justify-content-between\" *ngIf=\"!skelLoader\">\r\n <ng-container>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.pricePerSqFeet || 0 }}</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Price/Sq.ft</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.indicativeMarketValue || 0 }}</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Indicative Market Value</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.irr || 0 }}%</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Internal Returns Rate</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.annualReturn || 0 }}%</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Annual Returns</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <ng-container>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/273918c1739173355725checked%201.png\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container>\r\n <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.annualReturn || 0}}%</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Guaranteed annual capital growth</p>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"about-section w-70 d-flex g-40\" *ngIf=\"!skelLoader\">\r\n <div class=\"right w-60 \">\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">About Property</div>\r\n <div class=\"about-property-text\">{{propertyDetails.description}}</div>\r\n <div class=\"about-property-details d-flex gap-10\">\r\n <ng-container>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Type: </div>\r\n <div class=\"left-text\">{{propertyDetails.propertyType}}</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Size:</div>\r\n <div class=\"left-text\">{{propertyDetails.totalAreaSqFeet}}</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">year:</div>\r\n <div class=\"left-text\">{{propertyDetails.year}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\" *ngIf=\"(propertyDetails?.benefits?.length || 0) > 0\">\r\n <div class=\"head-about-property\">Investment Benefit</div>\r\n <div class=\"card-container d-flex gap-10\">\r\n <ng-container *ngFor=\"let benefits of propertyDetails.benefits\">\r\n <div class=\"cards\">\r\n <div class=\"image-container w-100 d-flex justify-content-center\">\r\n <img [src]=\"benefits.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"card-head\">{{benefits.title}}</div>\r\n <div class=\"card-text\">{{benefits.description}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">Documents & Reports</div>\r\n <div class=\"file-container d-flex justify-content-between gap-10\">\r\n <div class=\"file d-flex justify-content-between\" *ngFor=\"let ele of pdfCards\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/678394c1739183726107image%209.png\"\r\n alt=\"pdf\">\r\n <div class=\"doc-text w-75 d-flex align-items-center\"> {{ele.length > 15 ?\r\n ele.substring(0,15)+'...' : ele }}</div>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/195414c1739183779845fi_3502477.png\"\r\n alt=\"download\" class=\"download-img\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"left w-40\">\r\n <div class=\"sqft\">\r\n <div class=\"head-about-property\">Buy SQFT</div>\r\n <div class=\"price justify-content-between d-flex\">\r\n <div class=\"left-price\">Price/Sq.ft</div>\r\n <div class=\"right-price\">\u20B9{{propertyDetails.financeDetails.pricePerSqFeet}}</div>\r\n </div>\r\n <div class=\"sqft-quantity d-flex justify-content-between w-100 align-items-center\">\r\n <div class=\"left-sqft\">SQFT Quantity</div>\r\n <div class=\"right-sqft d-flex align-items-center\">\r\n <mat-icon (click)=\"noOfSqft > 0 ? noOfSqft = noOfSqft - 1 : noOfSqft = 0\"\r\n class=\"d-flex align-items-center justify-content-center icon\">remove</mat-icon>\r\n <div class=\"sqft-number d-flex justify-content-center\"><input type=\"number\" [(ngModel)]=\"noOfSqft\"\r\n class=\"sqft-number additional-properties-2 text-center p-0 \"></div>\r\n <mat-icon (click)=\"noOfSqft = noOfSqft + 1\"\r\n class=\"d-flex align-items-center justify-content-center icon\">add</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"payable d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"payable-left\">\r\n <p class=\"pay-text\">Payable Amount</p><span class=\"pay-subtext\">(Incl. Fees & Other\r\n Levies)</span>\r\n </div>\r\n <div class=\"payable-right\">\r\n \u20B9{{ noOfSqft * propertyDetails.financeDetails.pricePerSqFeet}}\r\n </div>\r\n </div>\r\n <div class=\"buy\" (click)=\"purchaseProperty()\">\r\n Buy SQFT\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n<ng-template #skeleton>\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '72vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\" *ngFor=\"let item of skelArray\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '98%',\r\n 'border-radius': '5px',\r\n height: '23vh',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: ["*{font-family:DM Sans!important}.main-container{overflow-x:hidden}mat-icon{font-family:Material Icons!important}.property-numbers{padding:40px 60px 10px;background:#f2910b}.number-text{font-weight:700;font-size:35px;line-height:40px;color:#102031;font-family:DM Sans}.property-text{font-size:20px;font-weight:600;line-height:28px;color:#ffffffe6}.w-18{width:18%}.last-card{width:21%}.w-70{width:70%}.about-section{margin:30px auto}.about-property{background:#fff;border:1px solid rgba(0,0,0,.03);border-radius:10px;padding:10px;margin-bottom:15px}.head-about-property{font-weight:600;font-size:16px;line-height:26px;margin-bottom:10px}.about-property-text{font-weight:400;font-size:16px;line-height:29px;color:#01161eb3}.gap-10{gap:10px}.w-60{width:60%}.about-property-details{width:100%;justify-content:space-between;padding:13px 10px;background:#f6f5f5;border-radius:7px;margin-top:15px;margin-bottom:5px}.right-text{font-weight:500;font-size:16px;line-height:20px;color:#01161ecc}.left-text{font-weight:600;font-size:16px;line-height:20px;color:#01161e}.cards{width:30%;background:#f9fbff;border-radius:10px;padding:15px}.card-head{font-weight:600;font-size:16px;line-height:25px;text-align:center;overflow:hidden;text-overflow:ellipsis}.card-text{font-size:14px;font-weight:500;line-height:25px;text-align:center;overflow:hidden;text-overflow:ellipsis}.image-container img{height:8vh}.file{background:#f7f7f7;border-radius:5px;padding:12px;width:50%}.w-75{width:75%}.doc-text{font-size:16px;font-weight:500;line-height:26px;color:#000}.download-image{width:28px}.g-40{gap:40px}.w-40{width:40%}.sqft{background:linear-gradient(180deg,#0d1b2a,#172b40);color:#fff;width:85%;border-radius:8px;padding:15px}.right-price{width:50%;color:#fc9a11;font-size:28px;font-weight:700;line-height:32px;text-align:end}.left-price{width:50%;font-size:18px;font-weight:600;line-height:32px}.price{display:flex;background:#263f5a;border-radius:8px;padding:15px 10px}.buy{background:#36b37e;color:#fff;padding:15px;border-radius:8px;font-size:15px;font-weight:700;line-height:20px;text-align:center;cursor:pointer}.payable{padding:10px;background:#ffffffb3;border-radius:8px;margin-bottom:10px}.pay-text{font-size:14px;line-height:20px;font-weight:600;color:#000;margin-bottom:unset;border-radius:8px}.pay-subtext{font-size:10px;font-weight:500;color:#0006}.payable-right{font-weight:700;font-size:22px;line-height:32px;color:#fff}.card-container{overflow-x:scroll}.sqft-quantity{padding:15px 2px}.left-sqft{font-weight:600;font-size:16px;line-height:32px;color:#fff}.right-sqft{padding:4px;background:#f8a938;border-radius:4px;width:50%}.icon{font-size:16px;font-weight:700;color:#000;line-height:19px;width:30%;margin:0 2px}.sqft-number{background:#fff;width:70%;border-radius:4px;font-weight:700;font-size:20px;line-height:19px;color:#000;padding:10px;outline:unset}.tick-img{width:30px}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%;padding:30px}.pname{font-weight:600;font-size:34px;line-height:44px;color:#fff}.plocation{font-size:16px;font-weight:500;line-height:12px;color:#fff9}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.additional-properties-2{border:unset}.gap-5{gap:5px!important}.second-section-wrapper{display:flex;width:100%}.wrapper{width:30vw}.h-50{height:70vh!important}@media screen and (max-width : 475px){.property-numbers{flex-wrap:wrap;width:100%;padding:15px!important;margin-bottom:15px}.icon-text{width:50%}.last-card{width:100%!important}.right-text,.left-text{white-space:nowrap}.card-container{flex-direction:column;gap:10px;align-items:center}.cards{width:70%}.about-section{flex-direction:column;width:100%!important;margin:unset!important}.right{width:100%!important}.about-property{width:100%;border:none!important}.left{width:100%;margin:10px}.file-container{flex-direction:column}.file{width:100%!important}.sqft{width:95%}.height-30{height:30vh}.about-property-details{display:grid!important;width:100%}.propertyName{padding:10px!important}.pname{font-size:21px;line-height:10px}.additional-properties{height:1vh;width:8px!important}.number-text{font-size:26px}.property-text{font-size:18px}.head-about-property{text-align:center}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
10387
|
+
args: [{ selector: 'simpo-property-detail', standalone: true, imports: [NgFor, MatIcon, NgIf, FormsModule, MatDialogModule, NgxSkeletonLoaderModule, CommonModule, 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-container\">\r\n <div id=\"carouselExampleInterval\" *ngIf=\"!skelLoader\" class=\"carousel slide p-relative\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\" >\r\n <div class=\"carousel-item active\" data-bs-interval=\"2000\" *ngFor=\"let img of propertyDetails.imgUrl\">\r\n <img [src]=\"img\" class=\"d-block w-100 height-30 h-50\" alt=\"property-image\">\r\n </div>\r\n <!-- <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div>\r\n <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div> -->\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-between\">\r\n <div class=\"property-details\">\r\n <p class=\"pname\">{{propertyDetails.name}}</p>\r\n <span class=\"plocation d-flex align-items-center gap-5\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\"\r\n alt=\"location image\"> {{propertyDetails.location}}</span>\r\n </div>\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <!-- d-flex justify-content-end align-items-end -->\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <!-- additional-properties-1 -->\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" [attr.data-bs-slide-to]=\"i\"\r\n class=\"active additional-properties\" aria-current=\"true\" aria-label=\"Slide 1\"\r\n *ngFor=\"let slide of propertyDetails.imgUrl;let i = index\"></button>\r\n <!-- class=\"additional-properties\" -->\r\n <!-- <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\" class=\"additional-properties\"></button>\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\" class=\"additional-properties\"></button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"skelLoader\">\r\n <div class=\"col-12\" >\r\n <ng-container *ngTemplateOutlet=\"skeleton\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"property-numbers d-flex justify-content-between\" *ngIf=\"!skelLoader\">\r\n <ng-container>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.pricePerSqFeet || 0 }}</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Price/Sq.ft</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.indicativeMarketValue || 0 }}</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Indicative Market Value</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.irr || 0 }}%</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Internal Returns Rate</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.annualReturn || 0 }}%</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Annual Returns</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <ng-container>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/273918c1739173355725checked%201.png\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container>\r\n <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.annualReturn || 0}}%</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Guaranteed annual capital growth</p>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"about-section w-70 d-flex g-40\" *ngIf=\"!skelLoader\">\r\n <div class=\"right w-60 \">\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">About Property</div>\r\n <div class=\"about-property-text\">{{propertyDetails.description}}</div>\r\n <div class=\"about-property-details d-flex gap-10\">\r\n <ng-container>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Type: </div>\r\n <div class=\"left-text\">{{propertyDetails.propertyType}}</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Size:</div>\r\n <div class=\"left-text\">{{propertyDetails.totalAreaSqFeet}}sqft</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">year:</div>\r\n <div class=\"left-text\">{{propertyDetails.year}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\" *ngIf=\"(propertyDetails?.benefits?.length || 0) > 0\">\r\n <div class=\"head-about-property\">Investment Benefit</div>\r\n <div class=\"card-container d-flex gap-10\">\r\n <ng-container *ngFor=\"let benefits of propertyDetails.benefits\">\r\n <div class=\"cards\">\r\n <div class=\"image-container w-100 d-flex justify-content-center\">\r\n <img [src]=\"benefits.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"card-head\">{{benefits.title}}</div>\r\n <div class=\"card-text\">{{benefits.description}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">Documents & Reports</div>\r\n <div class=\"file-container d-flex justify-content-between gap-10\">\r\n <div class=\"file d-flex justify-content-between\" *ngFor=\"let ele of pdfCards\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/678394c1739183726107image%209.png\"\r\n alt=\"pdf\">\r\n <div class=\"doc-text w-75 d-flex align-items-center\"> {{ele.length > 15 ?\r\n ele.substring(0,15)+'...' : ele }}</div>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/195414c1739183779845fi_3502477.png\"\r\n alt=\"download\" class=\"download-img\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"left w-40\">\r\n <div class=\"sqft\">\r\n <div class=\"head-about-property\">Buy SQFT</div>\r\n <div class=\"price justify-content-between d-flex\">\r\n <div class=\"left-price\">Price/Sq.ft</div>\r\n <div class=\"right-price\">\u20B9{{propertyDetails.financeDetails.pricePerSqFeet}}</div>\r\n </div>\r\n <div class=\"sqft-quantity d-flex justify-content-between w-100 align-items-center\">\r\n <div class=\"left-sqft\">SQFT Quantity</div>\r\n <div class=\"right-sqft d-flex align-items-center\">\r\n <mat-icon (click)=\"noOfSqft > 0 ? noOfSqft = noOfSqft - 1 : noOfSqft = 0\"\r\n class=\"d-flex align-items-center justify-content-center icon\">remove</mat-icon>\r\n <div class=\"sqft-number d-flex justify-content-center\"><input type=\"number\" [(ngModel)]=\"noOfSqft\"\r\n class=\"sqft-number additional-properties-2 text-center p-0 \"></div>\r\n <mat-icon (click)=\"noOfSqft = noOfSqft + 1\"\r\n class=\"d-flex align-items-center justify-content-center icon\">add</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"payable d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"payable-left\">\r\n <p class=\"pay-text\">Payable Amount</p><span class=\"pay-subtext\">(Incl. Fees & Other\r\n Levies)</span>\r\n </div>\r\n <div class=\"payable-right\">\r\n \u20B9{{ noOfSqft * propertyDetails.financeDetails.pricePerSqFeet}}\r\n </div>\r\n </div>\r\n <div class=\"buy\" (click)=\"purchaseProperty()\">\r\n Buy SQFT\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n<ng-template #skeleton>\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '72vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\" *ngFor=\"let item of skelArray\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '98%',\r\n 'border-radius': '5px',\r\n height: '23vh',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: ["*{font-family:DM Sans!important}.main-container{overflow-x:hidden}mat-icon{font-family:Material Icons!important}.property-numbers{padding:40px 60px 10px;background:#f2910b}.number-text{font-weight:700;font-size:35px;line-height:40px;color:#102031;font-family:DM Sans}.property-text{font-size:20px;font-weight:600;line-height:28px;color:#ffffffe6}.w-18{width:18%}.last-card{width:21%}.w-70{width:70%}.about-section{margin:30px auto}.about-property{background:#fff;border:1px solid rgba(0,0,0,.03);border-radius:10px;padding:10px;margin-bottom:15px}.head-about-property{font-weight:600;font-size:16px;line-height:26px;margin-bottom:10px}.about-property-text{font-weight:400;font-size:16px;line-height:29px;color:#01161eb3}.gap-10{gap:10px}.w-60{width:60%}.about-property-details{width:100%;justify-content:space-between;padding:13px 10px;background:#f6f5f5;border-radius:7px;margin-top:15px;margin-bottom:5px}.right-text{font-weight:500;font-size:16px;line-height:20px;color:#01161ecc}.left-text{font-weight:600;font-size:16px;line-height:20px;color:#01161e}.cards{width:30%;background:#f9fbff;border-radius:10px;padding:15px}.card-head{font-weight:600;font-size:16px;line-height:25px;text-align:center;overflow:hidden;text-overflow:ellipsis}.card-text{font-size:14px;font-weight:500;line-height:25px;text-align:center;overflow:hidden;text-overflow:ellipsis}.image-container img{height:8vh}.file{background:#f7f7f7;border-radius:5px;padding:12px;width:50%}.w-75{width:75%}.doc-text{font-size:16px;font-weight:500;line-height:26px;color:#000}.download-image{width:28px}.g-40{gap:40px}.w-40{width:40%}.sqft{background:linear-gradient(180deg,#0d1b2a,#172b40);color:#fff;width:85%;border-radius:8px;padding:15px}.right-price{width:50%;color:#fc9a11;font-size:28px;font-weight:700;line-height:32px;text-align:end}.left-price{width:50%;font-size:18px;font-weight:600;line-height:32px}.price{display:flex;background:#263f5a;border-radius:8px;padding:15px 10px}.buy{background:#36b37e;color:#fff;padding:15px;border-radius:8px;font-size:15px;font-weight:700;line-height:20px;text-align:center;cursor:pointer}.payable{padding:10px;background:#ffffffb3;border-radius:8px;margin-bottom:10px}.pay-text{font-size:14px;line-height:20px;font-weight:600;color:#000;margin-bottom:unset;border-radius:8px}.pay-subtext{font-size:10px;font-weight:500;color:#0006}.payable-right{font-weight:700;font-size:22px;line-height:32px;color:#fff}.card-container{overflow-x:scroll}.sqft-quantity{padding:15px 2px}.left-sqft{font-weight:600;font-size:16px;line-height:32px;color:#fff}.right-sqft{padding:4px;background:#f8a938;border-radius:4px;width:50%}.icon{font-size:16px;font-weight:700;color:#000;line-height:19px;width:30%;margin:0 2px}.sqft-number{background:#fff;width:70%;border-radius:4px;font-weight:700;font-size:20px;line-height:19px;color:#000;padding:10px;outline:unset}.tick-img{width:30px}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%;padding:30px}.pname{font-weight:600;font-size:34px;line-height:44px;color:#fff}.plocation{font-size:16px;font-weight:500;line-height:12px;color:#fff9}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.additional-properties-2{border:unset}.gap-5{gap:5px!important}.second-section-wrapper{display:flex;width:100%}.wrapper{width:30vw}.h-50{height:70vh!important}@media screen and (max-width : 475px){.property-numbers{flex-wrap:wrap;width:100%;padding:15px!important;margin-bottom:15px}.icon-text{width:50%}.last-card{width:100%!important}.right-text,.left-text{white-space:nowrap}.card-container{flex-direction:column;gap:10px;align-items:center}.cards{width:70%}.about-section{flex-direction:column;width:100%!important;margin:unset!important}.right{width:100%!important}.about-property{width:100%;border:none!important}.left{width:100%;margin:10px}.file-container{flex-direction:column}.file{width:100%!important}.sqft{width:95%}.height-30{height:30vh}.about-property-details{display:grid!important;width:100%}.propertyName{padding:10px!important}.pname{font-size:21px;line-height:10px}.additional-properties{height:1vh;width:8px!important}.number-text{font-size:26px}.property-text{font-size:18px}.head-about-property{text-align:center}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
10408
10388
|
}], ctorParameters: () => [{ type: RestService }, { type: i2$2.ActivatedRoute }, { type: i2$2.Router }, { type: i5.MatDialog }, { type: i4$1.MessageService }], propDecorators: { data: [{
|
|
10409
10389
|
type: Input
|
|
10410
10390
|
}] } });
|
|
@@ -10504,7 +10484,7 @@ class SignupSigninComponent extends BaseSection {
|
|
|
10504
10484
|
}
|
|
10505
10485
|
verifyPhoneEmail() {
|
|
10506
10486
|
this.showWarning = false;
|
|
10507
|
-
if (this.isValidEmail(this.investor.emailId) && this.investor.phoneNumber
|
|
10487
|
+
if (this.isValidEmail(this.investor.emailId) && this.isValidPhone(this.investor.phoneNumber)) {
|
|
10508
10488
|
this.restService.verifyEmailPhone(this.investor.phoneNumber, this.investor.emailId).subscribe({
|
|
10509
10489
|
next: (res) => {
|
|
10510
10490
|
this.showWarning = false;
|
|
@@ -10521,15 +10501,13 @@ class SignupSigninComponent extends BaseSection {
|
|
|
10521
10501
|
}
|
|
10522
10502
|
}
|
|
10523
10503
|
validEmail() {
|
|
10524
|
-
if (!this.isValidEmail(this.investor.emailId))
|
|
10504
|
+
if (!this.isValidEmail(this.investor.emailId))
|
|
10525
10505
|
this.invalidEmail = true;
|
|
10526
|
-
|
|
10527
|
-
else {
|
|
10506
|
+
else
|
|
10528
10507
|
this.invalidEmail = false;
|
|
10529
|
-
}
|
|
10530
10508
|
}
|
|
10531
10509
|
validPhone() {
|
|
10532
|
-
if (this.investor.phoneNumber
|
|
10510
|
+
if (!this.isValidPhone(this.investor.phoneNumber))
|
|
10533
10511
|
this.invalidPhone = true;
|
|
10534
10512
|
else
|
|
10535
10513
|
this.invalidPhone = false;
|
|
@@ -10548,6 +10526,7 @@ class SignupSigninComponent extends BaseSection {
|
|
|
10548
10526
|
detail: 'Sign up Successfully'
|
|
10549
10527
|
});
|
|
10550
10528
|
this.investor.password = "";
|
|
10529
|
+
this.otpArray = new Array(4).fill('');
|
|
10551
10530
|
this.currentPage = 'LOGIN';
|
|
10552
10531
|
this.buttonLoader = false;
|
|
10553
10532
|
},
|
|
@@ -10565,8 +10544,16 @@ class SignupSigninComponent extends BaseSection {
|
|
|
10565
10544
|
if (!this.isValidEmail(this.investor.emailId)) {
|
|
10566
10545
|
this.messageService.add({
|
|
10567
10546
|
severity: 'error',
|
|
10568
|
-
summary:
|
|
10569
|
-
detail: '
|
|
10547
|
+
summary: "Sign Up",
|
|
10548
|
+
detail: 'Please Enter Valid Email Address'
|
|
10549
|
+
});
|
|
10550
|
+
return;
|
|
10551
|
+
}
|
|
10552
|
+
if (!this.isValidPhone(this.investor.phoneNumber)) {
|
|
10553
|
+
this.messageService.add({
|
|
10554
|
+
severity: 'error',
|
|
10555
|
+
summary: "Sign Up",
|
|
10556
|
+
detail: 'Please Enter Valid Phone Number'
|
|
10570
10557
|
});
|
|
10571
10558
|
return;
|
|
10572
10559
|
}
|
|
@@ -10592,19 +10579,11 @@ class SignupSigninComponent extends BaseSection {
|
|
|
10592
10579
|
});
|
|
10593
10580
|
}
|
|
10594
10581
|
loginWithPassword() {
|
|
10595
|
-
if (this.loginEmail.length == 0) {
|
|
10596
|
-
this.messageService.add({
|
|
10597
|
-
severity: 'error',
|
|
10598
|
-
summary: 'Sign Up',
|
|
10599
|
-
detail: 'Please Enter Email Address or Phone Number'
|
|
10600
|
-
});
|
|
10601
|
-
return;
|
|
10602
|
-
}
|
|
10603
10582
|
if (!this.isValidEmail(this.loginEmail)) {
|
|
10604
10583
|
this.messageService.add({
|
|
10605
10584
|
severity: 'error',
|
|
10606
|
-
summary: 'Sign
|
|
10607
|
-
detail: '
|
|
10585
|
+
summary: 'Sign In',
|
|
10586
|
+
detail: 'Please enter valid email'
|
|
10608
10587
|
});
|
|
10609
10588
|
return;
|
|
10610
10589
|
}
|
|
@@ -10647,7 +10626,7 @@ class SignupSigninComponent extends BaseSection {
|
|
|
10647
10626
|
if (!this.isValidEmail(this.loginEmail)) {
|
|
10648
10627
|
this.messageService.add({
|
|
10649
10628
|
severity: 'error',
|
|
10650
|
-
summary: 'Sign
|
|
10629
|
+
summary: 'Sign In',
|
|
10651
10630
|
detail: 'Invaild Email Address'
|
|
10652
10631
|
});
|
|
10653
10632
|
return;
|
|
@@ -10677,6 +10656,14 @@ class SignupSigninComponent extends BaseSection {
|
|
|
10677
10656
|
});
|
|
10678
10657
|
}
|
|
10679
10658
|
verifyOtp() {
|
|
10659
|
+
if (!this.isValidEmail(this.loginEmail)) {
|
|
10660
|
+
this.messageService.add({
|
|
10661
|
+
severity: 'error',
|
|
10662
|
+
summary: 'Sign In',
|
|
10663
|
+
detail: 'Invaild Email Address'
|
|
10664
|
+
});
|
|
10665
|
+
return;
|
|
10666
|
+
}
|
|
10680
10667
|
this.buttonLoader = true;
|
|
10681
10668
|
this.logInOtp = '';
|
|
10682
10669
|
this.loginOtpArray.forEach((otp) => {
|
|
@@ -10701,6 +10688,7 @@ class SignupSigninComponent extends BaseSection {
|
|
|
10701
10688
|
summary: 'Log In',
|
|
10702
10689
|
detail: 'Logged in successfully'
|
|
10703
10690
|
});
|
|
10691
|
+
this.otpArray = new Array(4).fill('');
|
|
10704
10692
|
localStorage.setItem(StorageKeys.INVESTOR_ID, res.investorId);
|
|
10705
10693
|
if (this.propertyId) {
|
|
10706
10694
|
this.router.navigate(['details'], { queryParams: { id: this.propertyId } });
|
|
@@ -10724,6 +10712,10 @@ class SignupSigninComponent extends BaseSection {
|
|
|
10724
10712
|
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
|
10725
10713
|
return emailRegex.test(email.trim());
|
|
10726
10714
|
}
|
|
10715
|
+
isValidPhone(phno) {
|
|
10716
|
+
const phoneRegex = /^[6789]\d{9}/;
|
|
10717
|
+
return phoneRegex.test(phno.trim());
|
|
10718
|
+
}
|
|
10727
10719
|
getKycDetails() {
|
|
10728
10720
|
this.kycDetailsSubscripition = this.restService.getKycDetails().subscribe((res) => {
|
|
10729
10721
|
if (!(res?.message?.panVerified === 'VALID' && res?.message?.aadhaarVerified === 'VALID')) {
|
|
@@ -10743,7 +10735,6 @@ class SignupSigninComponent extends BaseSection {
|
|
|
10743
10735
|
this.buttonLoader = true;
|
|
10744
10736
|
let payload = {
|
|
10745
10737
|
"email": this.loginEmail,
|
|
10746
|
-
"otp": this.logInOtp,
|
|
10747
10738
|
"newPassword": this.newPassword,
|
|
10748
10739
|
"confirmPassword": this.reEnteredPassword
|
|
10749
10740
|
};
|
|
@@ -10781,7 +10772,7 @@ class SignupSigninComponent extends BaseSection {
|
|
|
10781
10772
|
});
|
|
10782
10773
|
}
|
|
10783
10774
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SignupSigninComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i4$1.MessageService }, { token: i5.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10784
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SignupSigninComponent, isStandalone: true, selector: "simpo-signup-signin", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"main-container h-85 d-flex align-items-center justify-content-center\"\r\n [ngStyle]=\"{'background-image': 'url(' + backgroundImage + ')'}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"middle-container w-40-85\" [id]=\"data?.id\" [simpoBackground]=\"data?.styles?.background\"\r\n [simpoAnimation]=\"data?.styles?.animation\" [simpoCorner]=\"data?.styles?.corners\">\r\n <div class=\"head\">{{ currentPage == 'LOGIN' || currentPage == 'OTP' ? \"Sign In\" : currentPage ==\r\n 'FORGOT_PASSWORD' ? \"Forgot Password\" : currentPage == 'OTP_VERIFY' ? \"OTP Verfication\" : \"Sign Up\"}}</div>\r\n <div class=\"field-container\">\r\n <div class=\"field mb-15\" *ngIf=\"(currentPage == 'LOGIN' || currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && !showForgotFields\">\r\n <div class=\"field-head\">Email</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Registered Email\" [(ngModel)]=\"loginEmail\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && otpSent && !showForgotFields\">\r\n <div class=\"field-head\">OTP</div>\r\n <div class=\"field-text-1\">\r\n <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n [(ngModel)]=\"loginOtpArray[idx]\" (keyup)=\"moveLoginOtpCursor($event, idx)\" [id]=\"'loginOtp_'+idx\" #otpInput />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP_VERIFY'\">\r\n <!-- <div class=\"field-head\" *ngIf=\"currentPage == 'OTP' \">OTP</div> -->\r\n <div class=\"field-text-1\">\r\n <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n [(ngModel)]=\"otpArray[idx]\" (keyup)=\"move($event, idx)\" [id]=\"'otp_'+idx\" #otpInput />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Name</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Name\" [(ngModel)]=\"investor.fullName\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Email</div>\r\n <div class=\"field-text\" [class.border-red]=\"showWarning || invalidEmail\">\r\n <input type=\"email\" placeholder=\"Please Enter Your Email\" [(ngModel)]=\"investor.emailId\" (ngModelChange)=\"verifyPhoneEmail()\" (input)=\"validEmail()\" >\r\n </div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"showWarning\">User Already Exist</div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"invalidEmail\">Invalid Email (Eg: johndoe@gmail.com)</div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Phone Number</div>\r\n <div class=\"field-text\" [class.border-red]=\"showWarning || invalidPhone\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Phone Number\" [(ngModel)]=\"investor.phoneNumber\" (ngModelChange)=\"verifyPhoneEmail()\" (input)=\"validPhone()\" >\r\n </div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"showWarning\">User Already Exist</div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"invalidPhone\">Invalid Phone number it's length should be 10</div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD' && showForgotFields\" >\r\n <div class=\"field-head\">New Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"newPassword\">\r\n <mat-icon (click)=\"textType = 'text'\" *ngIf=\"textType == 'password'\">visibility</mat-icon>\r\n <mat-icon (click)=\"textType = 'password'\" *ngIf=\"textType == 'text'\">visibility_off</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD' && showForgotFields\" >\r\n <div class=\"field-head\">Re-Enter Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType1\" placeholder=\"Please Re-Enter Your Password\" [(ngModel)]=\"reEnteredPassword\">\r\n <mat-icon (click)=\"textType1 = 'text'\" *ngIf=\"textType1 == 'password'\">visibility</mat-icon>\r\n <mat-icon (click)=\"textType1 = 'password'\" *ngIf=\"textType1 == 'text'\">visibility_off</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'SIGN_UP' \">\r\n <div class=\"field-head\">Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"investor.password\">\r\n <mat-icon (click)=\"textType = 'text'\" *ngIf=\"textType == 'password'\">visibility</mat-icon>\r\n <mat-icon (click)=\"textType = 'password'\" *ngIf=\"textType == 'text'\">visibility_off</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"currentPage == 'LOGIN'\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">Forgot Password?</div>\r\n <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"currentPage == 'OTP_VERIFY' || otpSent\" (click)=\"isSignUp ? sendOtp() : sendOtpForLogin();resend = true\">Resend OTP?</div>\r\n <div class=\"btn-container d-flex align-items-center justify-content-center\">\r\n <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage != 'OTP' && (currentPage !== 'FORGOT_PASSWORD' || showForgotFields)\"\r\n (click)=\"buttonClickedEvent()\" [disabled]=\"buttonLoader\" [class.btn-size]=\"currentPage == 'FORGOT_PASSWORD' || currentPage == 'SIGN_UP' || currentPage == 'OTP_VERIFY'\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\">{{ currentPage ==\r\n 'LOGIN' ? \"Login\" : currentPage == 'FORGOT_PASSWORD' ? \"Reset Password\" :\r\n currentPage == 'OTP_VERIFY' ? 'Verify OTP' : \"Create Account\"}}</span></button>\r\n\r\n <button class=\"login-btn cursor-pointer\" (click)=\"sendOtpForLogin()\" [disabled]=\"buttonLoader\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && !otpSent && !showForgotFields\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\">Send Otp</span>\r\n </button>\r\n\r\n <button class=\"login-btn cursor-pointer\" (click)=\"verifyOtp()\" [disabled]=\"buttonLoader\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && otpSent && !showForgotFields\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\" >{{currentPage == 'OTP' ? \"Login\" : \"Proceed to Change Password\"}}</span>\r\n </button>\r\n </div>\r\n <div class=\"another-page\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n <div class=\"signup-text\">Don\u2019t have an account? <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'SIGN_UP';loginEmail = '';investor.password = '';investor.phoneNumber = '';otpSent = false;investor.emailId = ''\">Sign\r\n Up</span></div>\r\n <div class=\"signup-text m-5\">or</div>\r\n <div class=\"signup-text\">Login with <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'LOGIN' \"\r\n (click)=\"currentPage = 'OTP'\">OTP</span><span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP'\"\r\n (click)=\"currentPage = 'LOGIN';loginEmail = '';otpSent = false\">Password</span></div>\r\n </div>\r\n <div class=\"another-page\" *ngIf=\"currentPage == 'SIGN_UP' || currentPage == 'FORGOT_PASSWORD'\">\r\n <div class=\"signup-text\">Already have an account? <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'LOGIN';loginEmail = '';investor.password = '';investor.phoneNumber = '';otpSent = false;showForgotFields = false\">Sign\r\n In</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.h-85{height:85vh;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.w-40-85{width:40%}.btn-size{width:40%!important}.head{font-size:36px;font-weight:600;line-height:52px;color:#112133;text-align:center;padding:15px;padding-bottom:unset}.field-container{padding:15px}.field-head{margin-bottom:10px;font-size:17px;font-weight:600;line-height:24px;color:#2c2c2c}.field-text{padding:10px;border-radius:20px;font-size:15px;font-weight:400;color:#ababab;background:#fff}.field-text input{width:100%;border:none;appearance:none;outline:unset;background:#fff;color:#000}.forgot-password{text-align:end;font-size:16px;font-weight:600;line-height:24px;margin-bottom:15px}.another-page{margin-top:15px;text-align:center}.signup-text{color:#6b6b6b;font-size:14px;font-weight:400;line-height:24px;margin-bottom:5px}.m-5{margin:5px 0!important}.mb-30{margin-bottom:30px!important}.mb-15{margin-bottom:15px!important}.login-btn{border:unset;padding:12px 18px;border-radius:6px;font-size:18px!important;font-weight:600;line-height:20px}.span-text{font-weight:700!important}.cursor-pointer{cursor:pointer}.additional-styles{padding:25px!important;width:10%!important;border:unset!important;border-radius:20px!important}.clr-red{color:red;font-size:12px}.border-red{border:1px solid red!important}@media screen and (max-width : 475px){.w-40-85{width:85%}.h-86{height:90vh!important}.btn-size{width:100%!important;white-space:nowrap}.additional-styles{width:15%!important;border-radius:10px!important}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
10775
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SignupSigninComponent, isStandalone: true, selector: "simpo-signup-signin", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"main-container h-85 d-flex align-items-center justify-content-center\"\r\n [ngStyle]=\"{'background-image': 'url(' + backgroundImage + ')'}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"middle-container w-40-85\" [id]=\"data?.id\" [simpoBackground]=\"data?.styles?.background\"\r\n [simpoAnimation]=\"data?.styles?.animation\" [simpoCorner]=\"data?.styles?.corners\">\r\n <div class=\"head\">{{ currentPage == 'LOGIN' || currentPage == 'OTP' ? \"Sign In\" : currentPage ==\r\n 'FORGOT_PASSWORD' ? \"Forgot Password\" : currentPage == 'OTP_VERIFY' ? \"OTP Verfication\" : \"Sign Up\"}}</div>\r\n <div class=\"field-container\">\r\n <div class=\"field mb-15\" *ngIf=\"(currentPage == 'LOGIN' || currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && !showForgotFields\">\r\n <div class=\"field-head\">Email</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Registered Email\" [(ngModel)]=\"loginEmail\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && otpSent && !showForgotFields\">\r\n <div class=\"field-head\">OTP</div>\r\n <div class=\"field-text-1\">\r\n <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n [(ngModel)]=\"loginOtpArray[idx]\" (keyup)=\"moveLoginOtpCursor($event, idx)\" [id]=\"'loginOtp_'+idx\" #otpInput />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP_VERIFY'\">\r\n <!-- <div class=\"field-head\" *ngIf=\"currentPage == 'OTP' \">OTP</div> -->\r\n <div class=\"field-text-1\">\r\n <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n [(ngModel)]=\"otpArray[idx]\" (keyup)=\"move($event, idx)\" [id]=\"'otp_'+idx\" #otpInput />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Name</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Name\" [(ngModel)]=\"investor.fullName\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Email</div>\r\n <div class=\"field-text\" [class.border-red]=\"showWarning || invalidEmail\">\r\n <input type=\"email\" placeholder=\"Please Enter Your Email\" [(ngModel)]=\"investor.emailId\" (ngModelChange)=\"verifyPhoneEmail()\" (blur)=\"validEmail()\" >\r\n </div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"showWarning\">User Already Exist</div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"invalidEmail\">Invalid Email (Eg: johndoe@gmail.com)</div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Phone Number</div>\r\n <div class=\"field-text\" [class.border-red]=\"showWarning || invalidPhone\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Phone Number\" [(ngModel)]=\"investor.phoneNumber\" (ngModelChange)=\"verifyPhoneEmail()\" (blur)=\"validPhone()\" >\r\n </div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"showWarning\">User Already Exist</div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"invalidPhone\">Invalid Phone number</div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD' && showForgotFields\" >\r\n <div class=\"field-head\">New Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"newPassword\">\r\n <mat-icon (click)=\"textType = 'text'\" *ngIf=\"textType == 'password'\">visibility</mat-icon>\r\n <mat-icon (click)=\"textType = 'password'\" *ngIf=\"textType == 'text'\">visibility_off</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD' && showForgotFields\" >\r\n <div class=\"field-head\">Re-Enter Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType1\" placeholder=\"Please Re-Enter Your Password\" [(ngModel)]=\"reEnteredPassword\">\r\n <mat-icon (click)=\"textType1 = 'text'\" *ngIf=\"textType1 == 'password'\">visibility</mat-icon>\r\n <mat-icon (click)=\"textType1 = 'password'\" *ngIf=\"textType1 == 'text'\">visibility_off</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'SIGN_UP' \">\r\n <div class=\"field-head\">Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"investor.password\">\r\n <mat-icon (click)=\"textType = 'text'\" *ngIf=\"textType == 'password'\">visibility</mat-icon>\r\n <mat-icon (click)=\"textType = 'password'\" *ngIf=\"textType == 'text'\">visibility_off</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"currentPage == 'LOGIN'\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">Forgot Password?</div>\r\n <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"currentPage == 'OTP_VERIFY' || otpSent\" (click)=\"isSignUp ? sendOtp() : sendOtpForLogin();resend = true\">Resend OTP?</div>\r\n <div class=\"btn-container d-flex align-items-center justify-content-center\">\r\n <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage != 'OTP' && (currentPage !== 'FORGOT_PASSWORD' || showForgotFields)\"\r\n (click)=\"buttonClickedEvent()\" [disabled]=\"buttonLoader\" [class.btn-size]=\"currentPage == 'FORGOT_PASSWORD' || currentPage == 'SIGN_UP' || currentPage == 'OTP_VERIFY'\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\">{{ currentPage ==\r\n 'LOGIN' ? \"Login\" : currentPage == 'FORGOT_PASSWORD' ? \"Reset Password\" :\r\n currentPage == 'OTP_VERIFY' ? 'Verify OTP' : \"Create Account\"}}</span></button>\r\n\r\n <button class=\"login-btn cursor-pointer\" (click)=\"sendOtpForLogin()\" [disabled]=\"buttonLoader\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && !otpSent && !showForgotFields\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\">Send Otp</span>\r\n </button>\r\n\r\n <button class=\"login-btn cursor-pointer\" (click)=\"verifyOtp()\" [disabled]=\"buttonLoader\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && otpSent && !showForgotFields\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\" >{{currentPage == 'OTP' ? \"Login\" : \"Proceed to Change Password\"}}</span>\r\n </button>\r\n </div>\r\n <div class=\"another-page\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n <div class=\"signup-text\">Don\u2019t have an account? <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'SIGN_UP';loginEmail = '';investor.password = '';investor.phoneNumber = '';otpSent = false;investor.emailId = ''\">Sign\r\n Up</span></div>\r\n <div class=\"signup-text m-5\">or</div>\r\n <div class=\"signup-text\">Login with <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'LOGIN' \"\r\n (click)=\"currentPage = 'OTP'\">OTP</span><span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP'\"\r\n (click)=\"currentPage = 'LOGIN';loginEmail = '';otpSent = false\">Password</span></div>\r\n </div>\r\n <div class=\"another-page\" *ngIf=\"currentPage == 'SIGN_UP' || currentPage == 'FORGOT_PASSWORD'\">\r\n <div class=\"signup-text\">Already have an account? <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'LOGIN';loginEmail = '';investor.password = '';investor.phoneNumber = '';otpSent = false;showForgotFields = false\">Sign\r\n In</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.h-85{height:85vh;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.w-40-85{width:40%}.btn-size{width:40%!important}.head{font-size:36px;font-weight:600;line-height:52px;color:#112133;text-align:center;padding:15px;padding-bottom:unset}.field-container{padding:15px}.field-head{margin-bottom:10px;font-size:17px;font-weight:600;line-height:24px;color:#2c2c2c}.field-text{padding:10px;border-radius:20px;font-size:15px;font-weight:400;color:#ababab;background:#fff}.field-text input{width:100%;border:none;appearance:none;outline:unset;background:#fff;color:#000}.forgot-password{text-align:end;font-size:16px;font-weight:600;line-height:24px;margin-bottom:15px}.another-page{margin-top:15px;text-align:center}.signup-text{color:#6b6b6b;font-size:14px;font-weight:400;line-height:24px;margin-bottom:5px}.m-5{margin:5px 0!important}.mb-30{margin-bottom:30px!important}.mb-15{margin-bottom:15px!important}.login-btn{border:unset;padding:12px 18px;border-radius:6px;font-size:18px!important;font-weight:600;line-height:20px}.span-text{font-weight:700!important}.cursor-pointer{cursor:pointer}.additional-styles{padding:25px!important;width:10%!important;border:unset!important;border-radius:20px!important}.clr-red{color:red;font-size:12px}.border-red{border:1px solid red!important}@media screen and (max-width : 475px){.w-40-85{width:85%}.h-86{height:90vh!important}.btn-size{width:100%!important;white-space:nowrap}.additional-styles{width:15%!important;border-radius:10px!important}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
10785
10776
|
//Directives
|
|
10786
10777
|
BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { 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"] }] }); }
|
|
10787
10778
|
}
|
|
@@ -10800,7 +10791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
10800
10791
|
AnimationDirective,
|
|
10801
10792
|
CornerDirective,
|
|
10802
10793
|
ToastModule
|
|
10803
|
-
], 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 [id]=\"data?.id\" class=\"main-container h-85 d-flex align-items-center justify-content-center\"\r\n [ngStyle]=\"{'background-image': 'url(' + backgroundImage + ')'}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"middle-container w-40-85\" [id]=\"data?.id\" [simpoBackground]=\"data?.styles?.background\"\r\n [simpoAnimation]=\"data?.styles?.animation\" [simpoCorner]=\"data?.styles?.corners\">\r\n <div class=\"head\">{{ currentPage == 'LOGIN' || currentPage == 'OTP' ? \"Sign In\" : currentPage ==\r\n 'FORGOT_PASSWORD' ? \"Forgot Password\" : currentPage == 'OTP_VERIFY' ? \"OTP Verfication\" : \"Sign Up\"}}</div>\r\n <div class=\"field-container\">\r\n <div class=\"field mb-15\" *ngIf=\"(currentPage == 'LOGIN' || currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && !showForgotFields\">\r\n <div class=\"field-head\">Email</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Registered Email\" [(ngModel)]=\"loginEmail\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && otpSent && !showForgotFields\">\r\n <div class=\"field-head\">OTP</div>\r\n <div class=\"field-text-1\">\r\n <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n [(ngModel)]=\"loginOtpArray[idx]\" (keyup)=\"moveLoginOtpCursor($event, idx)\" [id]=\"'loginOtp_'+idx\" #otpInput />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP_VERIFY'\">\r\n <!-- <div class=\"field-head\" *ngIf=\"currentPage == 'OTP' \">OTP</div> -->\r\n <div class=\"field-text-1\">\r\n <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n [(ngModel)]=\"otpArray[idx]\" (keyup)=\"move($event, idx)\" [id]=\"'otp_'+idx\" #otpInput />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Name</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Name\" [(ngModel)]=\"investor.fullName\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Email</div>\r\n <div class=\"field-text\" [class.border-red]=\"showWarning || invalidEmail\">\r\n <input type=\"email\" placeholder=\"Please Enter Your Email\" [(ngModel)]=\"investor.emailId\" (ngModelChange)=\"verifyPhoneEmail()\" (input)=\"validEmail()\" >\r\n </div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"showWarning\">User Already Exist</div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"invalidEmail\">Invalid Email (Eg: johndoe@gmail.com)</div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Phone Number</div>\r\n <div class=\"field-text\" [class.border-red]=\"showWarning || invalidPhone\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Phone Number\" [(ngModel)]=\"investor.phoneNumber\" (ngModelChange)=\"verifyPhoneEmail()\" (input)=\"validPhone()\" >\r\n </div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"showWarning\">User Already Exist</div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"invalidPhone\">Invalid Phone number it's length should be 10</div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD' && showForgotFields\" >\r\n <div class=\"field-head\">New Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"newPassword\">\r\n <mat-icon (click)=\"textType = 'text'\" *ngIf=\"textType == 'password'\">visibility</mat-icon>\r\n <mat-icon (click)=\"textType = 'password'\" *ngIf=\"textType == 'text'\">visibility_off</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD' && showForgotFields\" >\r\n <div class=\"field-head\">Re-Enter Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType1\" placeholder=\"Please Re-Enter Your Password\" [(ngModel)]=\"reEnteredPassword\">\r\n <mat-icon (click)=\"textType1 = 'text'\" *ngIf=\"textType1 == 'password'\">visibility</mat-icon>\r\n <mat-icon (click)=\"textType1 = 'password'\" *ngIf=\"textType1 == 'text'\">visibility_off</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'SIGN_UP' \">\r\n <div class=\"field-head\">Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"investor.password\">\r\n <mat-icon (click)=\"textType = 'text'\" *ngIf=\"textType == 'password'\">visibility</mat-icon>\r\n <mat-icon (click)=\"textType = 'password'\" *ngIf=\"textType == 'text'\">visibility_off</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"currentPage == 'LOGIN'\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">Forgot Password?</div>\r\n <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"currentPage == 'OTP_VERIFY' || otpSent\" (click)=\"isSignUp ? sendOtp() : sendOtpForLogin();resend = true\">Resend OTP?</div>\r\n <div class=\"btn-container d-flex align-items-center justify-content-center\">\r\n <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage != 'OTP' && (currentPage !== 'FORGOT_PASSWORD' || showForgotFields)\"\r\n (click)=\"buttonClickedEvent()\" [disabled]=\"buttonLoader\" [class.btn-size]=\"currentPage == 'FORGOT_PASSWORD' || currentPage == 'SIGN_UP' || currentPage == 'OTP_VERIFY'\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\">{{ currentPage ==\r\n 'LOGIN' ? \"Login\" : currentPage == 'FORGOT_PASSWORD' ? \"Reset Password\" :\r\n currentPage == 'OTP_VERIFY' ? 'Verify OTP' : \"Create Account\"}}</span></button>\r\n\r\n <button class=\"login-btn cursor-pointer\" (click)=\"sendOtpForLogin()\" [disabled]=\"buttonLoader\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && !otpSent && !showForgotFields\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\">Send Otp</span>\r\n </button>\r\n\r\n <button class=\"login-btn cursor-pointer\" (click)=\"verifyOtp()\" [disabled]=\"buttonLoader\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && otpSent && !showForgotFields\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\" >{{currentPage == 'OTP' ? \"Login\" : \"Proceed to Change Password\"}}</span>\r\n </button>\r\n </div>\r\n <div class=\"another-page\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n <div class=\"signup-text\">Don\u2019t have an account? <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'SIGN_UP';loginEmail = '';investor.password = '';investor.phoneNumber = '';otpSent = false;investor.emailId = ''\">Sign\r\n Up</span></div>\r\n <div class=\"signup-text m-5\">or</div>\r\n <div class=\"signup-text\">Login with <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'LOGIN' \"\r\n (click)=\"currentPage = 'OTP'\">OTP</span><span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP'\"\r\n (click)=\"currentPage = 'LOGIN';loginEmail = '';otpSent = false\">Password</span></div>\r\n </div>\r\n <div class=\"another-page\" *ngIf=\"currentPage == 'SIGN_UP' || currentPage == 'FORGOT_PASSWORD'\">\r\n <div class=\"signup-text\">Already have an account? <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'LOGIN';loginEmail = '';investor.password = '';investor.phoneNumber = '';otpSent = false;showForgotFields = false\">Sign\r\n In</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.h-85{height:85vh;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.w-40-85{width:40%}.btn-size{width:40%!important}.head{font-size:36px;font-weight:600;line-height:52px;color:#112133;text-align:center;padding:15px;padding-bottom:unset}.field-container{padding:15px}.field-head{margin-bottom:10px;font-size:17px;font-weight:600;line-height:24px;color:#2c2c2c}.field-text{padding:10px;border-radius:20px;font-size:15px;font-weight:400;color:#ababab;background:#fff}.field-text input{width:100%;border:none;appearance:none;outline:unset;background:#fff;color:#000}.forgot-password{text-align:end;font-size:16px;font-weight:600;line-height:24px;margin-bottom:15px}.another-page{margin-top:15px;text-align:center}.signup-text{color:#6b6b6b;font-size:14px;font-weight:400;line-height:24px;margin-bottom:5px}.m-5{margin:5px 0!important}.mb-30{margin-bottom:30px!important}.mb-15{margin-bottom:15px!important}.login-btn{border:unset;padding:12px 18px;border-radius:6px;font-size:18px!important;font-weight:600;line-height:20px}.span-text{font-weight:700!important}.cursor-pointer{cursor:pointer}.additional-styles{padding:25px!important;width:10%!important;border:unset!important;border-radius:20px!important}.clr-red{color:red;font-size:12px}.border-red{border:1px solid red!important}@media screen and (max-width : 475px){.w-40-85{width:85%}.h-86{height:90vh!important}.btn-size{width:100%!important;white-space:nowrap}.additional-styles{width:15%!important;border-radius:10px!important}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
10794
|
+
], 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 [id]=\"data?.id\" class=\"main-container h-85 d-flex align-items-center justify-content-center\"\r\n [ngStyle]=\"{'background-image': 'url(' + backgroundImage + ')'}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"middle-container w-40-85\" [id]=\"data?.id\" [simpoBackground]=\"data?.styles?.background\"\r\n [simpoAnimation]=\"data?.styles?.animation\" [simpoCorner]=\"data?.styles?.corners\">\r\n <div class=\"head\">{{ currentPage == 'LOGIN' || currentPage == 'OTP' ? \"Sign In\" : currentPage ==\r\n 'FORGOT_PASSWORD' ? \"Forgot Password\" : currentPage == 'OTP_VERIFY' ? \"OTP Verfication\" : \"Sign Up\"}}</div>\r\n <div class=\"field-container\">\r\n <div class=\"field mb-15\" *ngIf=\"(currentPage == 'LOGIN' || currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && !showForgotFields\">\r\n <div class=\"field-head\">Email</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Registered Email\" [(ngModel)]=\"loginEmail\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && otpSent && !showForgotFields\">\r\n <div class=\"field-head\">OTP</div>\r\n <div class=\"field-text-1\">\r\n <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n [(ngModel)]=\"loginOtpArray[idx]\" (keyup)=\"moveLoginOtpCursor($event, idx)\" [id]=\"'loginOtp_'+idx\" #otpInput />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP_VERIFY'\">\r\n <!-- <div class=\"field-head\" *ngIf=\"currentPage == 'OTP' \">OTP</div> -->\r\n <div class=\"field-text-1\">\r\n <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n [(ngModel)]=\"otpArray[idx]\" (keyup)=\"move($event, idx)\" [id]=\"'otp_'+idx\" #otpInput />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Name</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Name\" [(ngModel)]=\"investor.fullName\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Email</div>\r\n <div class=\"field-text\" [class.border-red]=\"showWarning || invalidEmail\">\r\n <input type=\"email\" placeholder=\"Please Enter Your Email\" [(ngModel)]=\"investor.emailId\" (ngModelChange)=\"verifyPhoneEmail()\" (blur)=\"validEmail()\" >\r\n </div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"showWarning\">User Already Exist</div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"invalidEmail\">Invalid Email (Eg: johndoe@gmail.com)</div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Phone Number</div>\r\n <div class=\"field-text\" [class.border-red]=\"showWarning || invalidPhone\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Phone Number\" [(ngModel)]=\"investor.phoneNumber\" (ngModelChange)=\"verifyPhoneEmail()\" (blur)=\"validPhone()\" >\r\n </div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"showWarning\">User Already Exist</div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"invalidPhone\">Invalid Phone number</div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD' && showForgotFields\" >\r\n <div class=\"field-head\">New Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"newPassword\">\r\n <mat-icon (click)=\"textType = 'text'\" *ngIf=\"textType == 'password'\">visibility</mat-icon>\r\n <mat-icon (click)=\"textType = 'password'\" *ngIf=\"textType == 'text'\">visibility_off</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD' && showForgotFields\" >\r\n <div class=\"field-head\">Re-Enter Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType1\" placeholder=\"Please Re-Enter Your Password\" [(ngModel)]=\"reEnteredPassword\">\r\n <mat-icon (click)=\"textType1 = 'text'\" *ngIf=\"textType1 == 'password'\">visibility</mat-icon>\r\n <mat-icon (click)=\"textType1 = 'password'\" *ngIf=\"textType1 == 'text'\">visibility_off</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'SIGN_UP' \">\r\n <div class=\"field-head\">Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"investor.password\">\r\n <mat-icon (click)=\"textType = 'text'\" *ngIf=\"textType == 'password'\">visibility</mat-icon>\r\n <mat-icon (click)=\"textType = 'password'\" *ngIf=\"textType == 'text'\">visibility_off</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"currentPage == 'LOGIN'\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">Forgot Password?</div>\r\n <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"currentPage == 'OTP_VERIFY' || otpSent\" (click)=\"isSignUp ? sendOtp() : sendOtpForLogin();resend = true\">Resend OTP?</div>\r\n <div class=\"btn-container d-flex align-items-center justify-content-center\">\r\n <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage != 'OTP' && (currentPage !== 'FORGOT_PASSWORD' || showForgotFields)\"\r\n (click)=\"buttonClickedEvent()\" [disabled]=\"buttonLoader\" [class.btn-size]=\"currentPage == 'FORGOT_PASSWORD' || currentPage == 'SIGN_UP' || currentPage == 'OTP_VERIFY'\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\">{{ currentPage ==\r\n 'LOGIN' ? \"Login\" : currentPage == 'FORGOT_PASSWORD' ? \"Reset Password\" :\r\n currentPage == 'OTP_VERIFY' ? 'Verify OTP' : \"Create Account\"}}</span></button>\r\n\r\n <button class=\"login-btn cursor-pointer\" (click)=\"sendOtpForLogin()\" [disabled]=\"buttonLoader\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && !otpSent && !showForgotFields\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\">Send Otp</span>\r\n </button>\r\n\r\n <button class=\"login-btn cursor-pointer\" (click)=\"verifyOtp()\" [disabled]=\"buttonLoader\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && otpSent && !showForgotFields\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\" >{{currentPage == 'OTP' ? \"Login\" : \"Proceed to Change Password\"}}</span>\r\n </button>\r\n </div>\r\n <div class=\"another-page\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n <div class=\"signup-text\">Don\u2019t have an account? <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'SIGN_UP';loginEmail = '';investor.password = '';investor.phoneNumber = '';otpSent = false;investor.emailId = ''\">Sign\r\n Up</span></div>\r\n <div class=\"signup-text m-5\">or</div>\r\n <div class=\"signup-text\">Login with <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'LOGIN' \"\r\n (click)=\"currentPage = 'OTP'\">OTP</span><span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP'\"\r\n (click)=\"currentPage = 'LOGIN';loginEmail = '';otpSent = false\">Password</span></div>\r\n </div>\r\n <div class=\"another-page\" *ngIf=\"currentPage == 'SIGN_UP' || currentPage == 'FORGOT_PASSWORD'\">\r\n <div class=\"signup-text\">Already have an account? <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'LOGIN';loginEmail = '';investor.password = '';investor.phoneNumber = '';otpSent = false;showForgotFields = false\">Sign\r\n In</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.h-85{height:85vh;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.w-40-85{width:40%}.btn-size{width:40%!important}.head{font-size:36px;font-weight:600;line-height:52px;color:#112133;text-align:center;padding:15px;padding-bottom:unset}.field-container{padding:15px}.field-head{margin-bottom:10px;font-size:17px;font-weight:600;line-height:24px;color:#2c2c2c}.field-text{padding:10px;border-radius:20px;font-size:15px;font-weight:400;color:#ababab;background:#fff}.field-text input{width:100%;border:none;appearance:none;outline:unset;background:#fff;color:#000}.forgot-password{text-align:end;font-size:16px;font-weight:600;line-height:24px;margin-bottom:15px}.another-page{margin-top:15px;text-align:center}.signup-text{color:#6b6b6b;font-size:14px;font-weight:400;line-height:24px;margin-bottom:5px}.m-5{margin:5px 0!important}.mb-30{margin-bottom:30px!important}.mb-15{margin-bottom:15px!important}.login-btn{border:unset;padding:12px 18px;border-radius:6px;font-size:18px!important;font-weight:600;line-height:20px}.span-text{font-weight:700!important}.cursor-pointer{cursor:pointer}.additional-styles{padding:25px!important;width:10%!important;border:unset!important;border-radius:20px!important}.clr-red{color:red;font-size:12px}.border-red{border:1px solid red!important}@media screen and (max-width : 475px){.w-40-85{width:85%}.h-86{height:90vh!important}.btn-size{width:100%!important;white-space:nowrap}.additional-styles{width:15%!important;border-radius:10px!important}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
10804
10795
|
}], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i4$1.MessageService }, { type: i5.MatDialog }], propDecorators: { data: [{
|
|
10805
10796
|
type: Input
|
|
10806
10797
|
}], index: [{
|