simpo-component-library 3.0.32 → 3.0.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/esm2022/lib/elements/portfolio/portfolio.component.mjs +4 -3
  2. package/esm2022/lib/elements/properties/properties.component.mjs +36 -3
  3. package/esm2022/lib/elements/property-view/property-view.component.mjs +3 -23
  4. package/esm2022/lib/pipes/amount.pipe.mjs +2 -2
  5. package/esm2022/lib/sections/profile-section/profile-section.component.mjs +10 -4
  6. package/esm2022/lib/sections/property-detail/property-detail.component.mjs +25 -12
  7. package/esm2022/lib/sections/signup-signin/signup-signin.component.mjs +35 -24
  8. package/fesm2022/simpo-component-library.mjs +136 -96
  9. package/fesm2022/simpo-component-library.mjs.map +1 -1
  10. package/lib/directive/background-directive.d.ts +1 -1
  11. package/lib/directive/button-directive.directive.d.ts +1 -1
  12. package/lib/directive/color.directive.d.ts +1 -1
  13. package/lib/elements/properties/properties.component.d.ts +1 -0
  14. package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
  15. package/lib/sections/profile-section/profile-section.component.d.ts +2 -0
  16. package/lib/sections/property-detail/property-detail.component.d.ts +1 -0
  17. package/lib/sections/signup-signin/signup-signin.component.d.ts +1 -0
  18. package/package.json +1 -1
  19. package/simpo-component-library-3.0.34.tgz +0 -0
  20. package/simpo-component-library-3.0.32.tgz +0 -0
package/fesm2022/simpo-component-library.mjs CHANGED
@@ -5908,6 +5908,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
5908
5908
  type: Input
5909
5909
  }] } });
5910
5910
 
5911
+ class FormateAmount {
5912
+ transform(value, system = "IND") {
5913
+ if (system == "IND") {
5914
+ if (Number(value) >= 10000000 /* AMOUNT.CRORE */) {
5915
+ return (Number(value) / 10000000 /* AMOUNT.CRORE */) + 'cr';
5916
+ }
5917
+ else if (Number(value) >= 100000 /* AMOUNT.LAKHS */) {
5918
+ return (Number(value) / 100000 /* AMOUNT.LAKHS */).toFixed(2) + 'L';
5919
+ }
5920
+ else {
5921
+ return value.toString();
5922
+ }
5923
+ }
5924
+ else {
5925
+ if (Number(value) >= 1000000 /* AMOUNT.MILLION */) {
5926
+ return (Number(value) / 1000000 /* AMOUNT.MILLION */) + 'mn';
5927
+ }
5928
+ else {
5929
+ return value.toString();
5930
+ }
5931
+ }
5932
+ }
5933
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FormateAmount, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
5934
+ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.4", ngImport: i0, type: FormateAmount, isStandalone: true, name: "formateAmount" }); }
5935
+ }
5936
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FormateAmount, decorators: [{
5937
+ type: Pipe,
5938
+ args: [{
5939
+ standalone: true,
5940
+ name: 'formateAmount',
5941
+ }]
5942
+ }] });
5943
+
5911
5944
  class PortfolioComponent {
5912
5945
  constructor(restService) {
5913
5946
  this.restService = restService;
@@ -5934,11 +5967,11 @@ class PortfolioComponent {
5934
5967
  });
5935
5968
  }
5936
5969
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PortfolioComponent, deps: [{ token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
5937
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PortfolioComponent, isStandalone: true, selector: "simpo-portfolio", ngImport: i0, template: "<section class=\"main-container\" *ngIf=\"!pageLoader\">\r\n <div class=\"head-container\">\r\n <div class=\"icon-div text-end\"><mat-icon class=\"clr-white\">remove_red_eye</mat-icon></div>\r\n <div class=\"top-text\">Current Portfolio Value</div>\r\n <div class=\"main-text\">{{portFolioData?.currentPortFolioValue ?? 0}}</div>\r\n <div class=\"bottom-text\">Investment increase by : &nbsp;<span class=\"amnt clr-white\">\r\n {{growthAmount ?? 0}}</span>&nbsp;&nbsp;<span class=\"percent-text\">{{growthPercentage ?? 0}} %</span></div>\r\n </div>\r\n <div class=\"content-area\">\r\n <div class=\"inside-header\">\r\n <div class=\"left-section\">Investor Overview</div>\r\n <div class=\"right-section d-flex\">\r\n <div class=\"input-box\">\r\n <div class=\"filter-container d-flex align-items-center\">\r\n <div class=\"filter-item\">\r\n <input type=\"date\" class=\"custom-date-picker\" />\r\n </div>\r\n <div class=\"filter-item\">\r\n <select class=\"custom-dropdown\">\r\n <option *ngFor=\"let ele of propertyDetails\">{{ele.name}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"inside-content\">\r\n <div class=\"row content1\" >\r\n <div class=\"col-md-4 col-12\">\r\n <div class=\"content-d1\" >\r\n <div class=\"d1_name\">Total Investment Value</div>\r\n <div class=\"card1 d-flex align-items-center g-10\">\r\n <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n <div class=\"d1_img\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/681867c1739529671422Group%201707483072%20%282%29.png\" alt=\"img1\">\r\n </div>\r\n </div>\r\n <div class=\"no_of\">{{portFolioData?.totalInvestedValue ?? 0}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 col-6 property-owned\">\r\n <div class=\"content-d2\">\r\n <div class=\"d1_name\">Properties Owned</div>\r\n <div class=\"card1 d-flex align-items-center g-10\">\r\n <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n <div class=\"d1_img\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/990718c1739529606489Group%201707483072%20%281%29.png\" alt=\"img1\">\r\n </div>\r\n </div>\r\n <div class=\"no_of\">{{portFolioData?.totalInvestedProperties ?? 0}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 col-6 property-totalSqft\">\r\n <div class=\"content-d3\">\r\n <div class=\"d1_name\">Total Sq.ft Owned</div>\r\n <div class=\"card1 d-flex align-items-center g-10\">\r\n <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n <div class=\"d1_img\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/776806c1739529625699Group%201707483072.png\" alt=\"img1\">\r\n </div>\r\n </div>\r\n <div class=\"no_of\">{{portFolioData?.totalSqFeetOwned ?? 0}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n <div class=\"row content2\">\r\n <div class=\"col-md-8 col-12\">\r\n <div class=\"d2 d-flex\">\r\n <div class=\"left_d2\">\r\n <div class=\"d2_value\" *ngFor=\"let ele of propertyDetails\">\r\n <div class=\"value_left\">\r\n <div class=\"value_color\"></div>\r\n <div class=\"property_name\">{{ele?.name ?? \"N/A\"}}</div>\r\n </div>\r\n <div class=\"value_right\">\r\n <div>{{ele?.totalSqFeetOwned ?? 0}}</div>\r\n <div class=\"constant_line\">|</div>\r\n <div>{{ele?.investedAmount ?? 0}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 col-12 \">\r\n <div class=\"row d3\">\r\n <div class=\"col-6 \">\r\n <div class=\"d3_card1 common-style-1\">\r\n <div class=\"d3_card1_name text-start common-style-name\">Internal Rate of Return</div>\r\n <div class=\"value_d3_card1_name\">{{portFolioData?.avgIRR ?? 0}}</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6 \">\r\n <div class=\"d3_card2 common-style-1\">\r\n <div class=\"d3_card2_name text-start common-style-name\">Annual Return</div>\r\n <div class=\"value_d3_card1_name\"> {{portFolioData?.avgAnnualReturn ?? 0}}%</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"content1 \">\r\n <div class=\"d1\" *ngFor=\"let ele of topCards\">\r\n <div class=\"d1_name\">{{ele.text}}</div>\r\n <div class=\"card1 d-flex align-items-center g-10\">\r\n <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n <div class=\"d1_img\">\r\n <img [src]=\"ele.icon\" alt=\"img1\">\r\n </div>\r\n </div>\r\n <div class=\"no_of\">{{ele.count}}</div>\r\n </div>\r\n </div>\r\n </div> -->\r\n <!-- <div class=\"content2 d-flex align-items-center\">\r\n <div class=\"d2 d-flex\">\r\n <div class=\"left_d2\">\r\n <div class=\"d2_value\" *ngFor=\"let value of property_list\">\r\n <div class=\"value_left\">\r\n <div class=\"value_color\" [ngStyle]=\"{'background-color': value.color}\"></div>\r\n <div class=\"property_name\">{{value.name}}</div>\r\n </div>\r\n <div class=\"value_right\">\r\n <div>{{value.sq_ft}}</div>\r\n <div class=\"constant_line\">|</div>\r\n <div>{{value.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d3\">\r\n <div class=\"d3_card1 common-style-1\">\r\n <div class=\"d3_card1_name text-start\">Internal Rate of Return</div>\r\n <div class=\"value_d3_card1_name\">{{portFolioData?.avgIRR ?? 0}}</div>\r\n </div>\r\n <div class=\"d3_card2 common-style-1\">\r\n <div class=\"d3_card2_name text-start\">Annual Return</div>\r\n <div class=\"value_d3_card1_name\">{{portFolioData?.avgAnnualReturn ?? 0}}</div>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n </div>\r\n </div>\r\n</section>\r\n<section class=\"pageLoader\" *ngIf=\"pageLoader\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '30vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"row\">\r\n <div class=\"col-md-4 col-12\" *ngFor=\"let skel of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '20vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-8 col-12\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '30vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"col-md-4 col-12\">\r\n <div class=\"row flex-column\">\r\n <div class=\"col-6 w-100\" *ngFor=\"let skel of [1,2]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '13vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.head-container{background:linear-gradient(180deg,#0d1b2a,#172b40);padding:15px;border-radius:10px}.clr-white{color:#fff!important}.top-text{font-size:14px;font-weight:600;line-height:24px;color:#fff9;margin-bottom:15px}.main-text{font-weight:700;font-size:40px;line-height:24px;color:#fff;margin-bottom:15px}.bottom-text{font-weight:500;font-size:14px;line-height:24px;color:#fff9}.percent-text{color:#36b37e}.content1{padding:15px 0}.d1_img img{width:40px;height:auto}.no_of{font-size:28px;font-weight:600;line-height:24px;color:#01161e}.top_navigation_section{width:100%;height:6vh;padding:4px 2px}.backToLeads{color:#000!important}.arrowLeft{position:relative;top:2px}.edit-icon,.delete-icon{border:1px solid #F1F1F1;padding:4px 8px;border-radius:8px}.mainSection_es{height:calc(100vh + -0px);z-index:2;position:absolute;top:0;background:#fff;width:100%;overflow-y:hidden}.top_navigation{height:calc(7vh + -0px)}.botton_rendering{height:calc(93vh + -0px)}.leadDetailsSection_es{width:20%;height:100%}.activityAndNotesSection_es{width:90%;padding:5px 23px;height:100%;margin-left:5%}.companyDetailsSection-es{width:15%;padding:10px;height:100%}.content-area{background:#f1f6ff;border-radius:8px;padding:10px 0;height:calc(65vh - 72px);gap:1px}.inside-header{height:7vh;display:flex;flex-direction:row;justify-content:space-between}.left-section{align-content:center;font-weight:600;font-size:16px;padding-left:25px;color:#000}.cal{width:30%}.inside-content{border-radius:8px;height:calc(60vh - 72px);display:flex;flex-direction:column;gap:2px}.content-d1,.content-d2,.content-d3{background-color:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.03);padding:15px}.d1_name{font-size:16px;font-weight:500;line-height:24px;color:#01161e;margin-bottom:15px}.card1{gap:8px}.content2{border-radius:8px;width:100%}.d2{background-color:#fff;border-radius:8px;padding:4px 5px;height:25vh;width:auto;flex-direction:row;gap:2px}.left_d2{width:auto;align-content:center;height:auto;overflow-y:scroll;padding:12px}.d2_img{width:36%;align-content:center;height:20vh}.d3{border-radius:8px;display:flex;flex-direction:column}.d3_card1{border-left:8px solid rgb(52,84,177)!important}.d3_card2{border-left:8px solid rgb(39,29,109)!important}.common-style-1{background-color:#fff;border-radius:8px;padding:8px;margin-bottom:15px;width:20vw}.d3_card1_name,.d3_card2_name{text-align:start;font-size:16px;line-height:24px;margin-bottom:10px;font-weight:500;color:#01161e}.value_d3_card1_name{text-align:start;font-size:28px;line-height:24px;font-weight:700;color:#01161e}.d2_value{display:flex;justify-content:space-between;padding:9px 2px}.value_left{display:flex;gap:8px;font-family:sans-serif;font-weight:500}.value_color{width:8px;height:21px;border-radius:3px}.value_right{display:flex;gap:2px;width:44%;justify-content:space-evenly}.filter-container{gap:10px}.filter-item{width:12vw}.custom-date-picker,.custom-dropdown{width:100%;padding:10px!important;border:1px solid rgba(0,0,0,.03);border-radius:8px;background-color:#fff;cursor:pointer;appearance:none;outline:none;font-size:14px;font-weight:500;line-height:24px;color:#000}.custom-dropdown{background-position:right 10px center;background-size:14px;padding-right:30px}.content-d2-01,.content-d3-01{width:20vw}@media only screen and (max-width: 475px){.filter-container{width:96vw;gap:6px}.filter-item{width:46vw}.left-section{align-content:center;font-weight:600;font-size:18px;padding-left:3px;color:#000}.inside-header{height:12vh;display:flex;flex-direction:column;justify-content:space-between;gap:9px}.content1{padding:15px 0}.content2{width:auto}.d2{background-color:#fff;border-radius:8px;padding:4px 5px;height:25vh;width:auto;flex-direction:row;gap:2px;justify-content:center}.d2_value{width:82vw;padding:15px 2px}.d3{display:flex;flex-direction:row;justify-content:space-between;width:auto;padding:10px}.property-owned{padding:8px 4px 0 11px}.property-totalSqft{padding:8px 11px 0 4px}.common-style-name{width:37vw;height:6vh}.common-style-1{width:auto}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i3.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
5970
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PortfolioComponent, isStandalone: true, selector: "simpo-portfolio", ngImport: i0, template: "<section class=\"main-container\" *ngIf=\"!pageLoader\">\r\n <div class=\"head-container\">\r\n <div class=\"icon-div text-end\"><mat-icon class=\"clr-white\">remove_red_eye</mat-icon></div>\r\n <div class=\"top-text\">Current Portfolio Value</div>\r\n <div class=\"main-text\">\u20B9{{portFolioData?.currentPortFolioValue ?? 0}}</div>\r\n <div class=\"bottom-text\">Investment increase by : &nbsp;<span class=\"amnt clr-white\">\r\n {{growthAmount ?? 0}}</span>&nbsp;&nbsp;<span class=\"percent-text\">{{growthPercentage ?? 0}} %</span></div>\r\n </div>\r\n <div class=\"content-area\">\r\n <div class=\"inside-header\">\r\n <div class=\"left-section\">Investor Overview</div>\r\n <div class=\"right-section d-flex\">\r\n <div class=\"input-box\">\r\n <div class=\"filter-container d-flex align-items-center\">\r\n <div class=\"filter-item\">\r\n <input type=\"date\" class=\"custom-date-picker\" />\r\n </div>\r\n <div class=\"filter-item\">\r\n <select class=\"custom-dropdown\">\r\n <option *ngFor=\"let ele of propertyDetails\">{{ele.name}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"inside-content\">\r\n <div class=\"row content1\" >\r\n <div class=\"col-md-4 col-12\">\r\n <div class=\"content-d1\" >\r\n <div class=\"d1_name\">Total Investment Value</div>\r\n <div class=\"card1 d-flex align-items-center g-10\">\r\n <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n <div class=\"d1_img\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/681867c1739529671422Group%201707483072%20%282%29.png\" alt=\"img1\">\r\n </div>\r\n </div>\r\n <div class=\"no_of\">\u20B9{{portFolioData?.totalInvestedValue ?? 0}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 col-6 property-owned\">\r\n <div class=\"content-d2\">\r\n <div class=\"d1_name\">Properties Owned</div>\r\n <div class=\"card1 d-flex align-items-center g-10\">\r\n <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n <div class=\"d1_img\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/990718c1739529606489Group%201707483072%20%281%29.png\" alt=\"img1\">\r\n </div>\r\n </div>\r\n <div class=\"no_of\">{{portFolioData?.totalInvestedProperties ?? 0}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 col-6 property-totalSqft\">\r\n <div class=\"content-d3\">\r\n <div class=\"d1_name\">Total Sq.ft Owned</div>\r\n <div class=\"card1 d-flex align-items-center g-10\">\r\n <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n <div class=\"d1_img\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/776806c1739529625699Group%201707483072.png\" alt=\"img1\">\r\n </div>\r\n </div>\r\n <div class=\"no_of\">{{portFolioData?.totalSqFeetOwned ?? 0}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n <div class=\"row content2\">\r\n <div class=\"col-md-8 col-12\">\r\n <div class=\"d2 d-flex\">\r\n <div class=\"left_d2\">\r\n <div class=\"d2_value\" *ngFor=\"let ele of propertyDetails\">\r\n <div class=\"value_left\">\r\n <div class=\"value_color\"></div>\r\n <div class=\"property_name\">{{ele?.name ?? \"N/A\"}}</div>\r\n </div>\r\n <div class=\"value_right\">\r\n <div>{{ele?.totalSqFeetOwned ?? 0}} Sqft</div>\r\n <div class=\"constant_line\">|</div>\r\n <div>\u20B9{{ele?.investedAmount ?? 0 | formateAmount:'IND' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 col-12 \">\r\n <div class=\"row d3\">\r\n <div class=\"col-6 \">\r\n <div class=\"d3_card1 common-style-1\">\r\n <div class=\"d3_card1_name text-start common-style-name\">Internal Rate of Return</div>\r\n <div class=\"value_d3_card1_name\">{{portFolioData?.avgIRR ?? 0}}%</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6 \">\r\n <div class=\"d3_card2 common-style-1\">\r\n <div class=\"d3_card2_name text-start common-style-name\">Annual Return</div>\r\n <div class=\"value_d3_card1_name\">{{portFolioData?.avgAnnualReturn ?? 0}}%</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"content1 \">\r\n <div class=\"d1\" *ngFor=\"let ele of topCards\">\r\n <div class=\"d1_name\">{{ele.text}}</div>\r\n <div class=\"card1 d-flex align-items-center g-10\">\r\n <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n <div class=\"d1_img\">\r\n <img [src]=\"ele.icon\" alt=\"img1\">\r\n </div>\r\n </div>\r\n <div class=\"no_of\">{{ele.count}}</div>\r\n </div>\r\n </div>\r\n </div> -->\r\n <!-- <div class=\"content2 d-flex align-items-center\">\r\n <div class=\"d2 d-flex\">\r\n <div class=\"left_d2\">\r\n <div class=\"d2_value\" *ngFor=\"let value of property_list\">\r\n <div class=\"value_left\">\r\n <div class=\"value_color\" [ngStyle]=\"{'background-color': value.color}\"></div>\r\n <div class=\"property_name\">{{value.name}}</div>\r\n </div>\r\n <div class=\"value_right\">\r\n <div>{{value.sq_ft}}</div>\r\n <div class=\"constant_line\">|</div>\r\n <div>{{value.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d3\">\r\n <div class=\"d3_card1 common-style-1\">\r\n <div class=\"d3_card1_name text-start\">Internal Rate of Return</div>\r\n <div class=\"value_d3_card1_name\">{{portFolioData?.avgIRR ?? 0}}</div>\r\n </div>\r\n <div class=\"d3_card2 common-style-1\">\r\n <div class=\"d3_card2_name text-start\">Annual Return</div>\r\n <div class=\"value_d3_card1_name\">{{portFolioData?.avgAnnualReturn ?? 0}}</div>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n </div>\r\n </div>\r\n</section>\r\n<section class=\"pageLoader\" *ngIf=\"pageLoader\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '30vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"row\">\r\n <div class=\"col-md-4 col-12\" *ngFor=\"let skel of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '20vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-8 col-12\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '30vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"col-md-4 col-12\">\r\n <div class=\"row flex-column\">\r\n <div class=\"col-6 w-100\" *ngFor=\"let skel of [1,2]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '13vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.head-container{background:linear-gradient(180deg,#0d1b2a,#172b40);padding:15px;border-radius:10px}.clr-white{color:#fff!important}.top-text{font-size:14px;font-weight:600;line-height:24px;color:#fff9;margin-bottom:15px}.main-text{font-weight:700;font-size:40px;line-height:24px;color:#fff;margin-bottom:15px}.bottom-text{font-weight:500;font-size:14px;line-height:24px;color:#fff9}.percent-text{color:#36b37e}.content1{padding:15px 0}.d1_img img{width:40px;height:auto}.no_of{font-size:28px;font-weight:600;line-height:24px;color:#01161e}.top_navigation_section{width:100%;height:6vh;padding:4px 2px}.backToLeads{color:#000!important}.arrowLeft{position:relative;top:2px}.edit-icon,.delete-icon{border:1px solid #F1F1F1;padding:4px 8px;border-radius:8px}.mainSection_es{height:calc(100vh + -0px);z-index:2;position:absolute;top:0;background:#fff;width:100%;overflow-y:hidden}.top_navigation{height:calc(7vh + -0px)}.botton_rendering{height:calc(93vh + -0px)}.leadDetailsSection_es{width:20%;height:100%}.activityAndNotesSection_es{width:90%;padding:5px 23px;height:100%;margin-left:5%}.companyDetailsSection-es{width:15%;padding:10px;height:100%}.content-area{background:#f1f6ff;border-radius:8px;padding:10px 0;height:calc(65vh - 72px);gap:1px}.inside-header{height:7vh;display:flex;flex-direction:row;justify-content:space-between}.left-section{align-content:center;font-weight:600;font-size:16px;padding-left:25px;color:#000}.cal{width:30%}.inside-content{border-radius:8px;height:calc(60vh - 72px);display:flex;flex-direction:column;gap:2px}.content-d1,.content-d2,.content-d3{background-color:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.03);padding:15px}.d1_name{font-size:16px;font-weight:500;line-height:24px;color:#01161e;margin-bottom:15px}.card1{gap:8px}.content2{border-radius:8px;width:100%}.d2{background-color:#fff;border-radius:8px;padding:4px 5px;height:25vh;width:auto;flex-direction:row;gap:2px}.left_d2{width:auto;align-content:center;height:auto;overflow-y:scroll;padding:12px}.d2_img{width:36%;align-content:center;height:20vh}.d3{border-radius:8px;display:flex;flex-direction:column}.d3_card1{border-left:8px solid rgb(52,84,177)!important}.d3_card2{border-left:8px solid rgb(39,29,109)!important}.common-style-1{background-color:#fff;border-radius:8px;padding:8px;margin-bottom:15px;width:20vw}.d3_card1_name,.d3_card2_name{text-align:start;font-size:16px;line-height:24px;margin-bottom:10px;font-weight:500;color:#01161e}.value_d3_card1_name{text-align:start;font-size:28px;line-height:24px;font-weight:700;color:#01161e}.d2_value{display:flex;justify-content:space-between;padding:9px 2px}.value_left{display:flex;gap:8px;font-family:sans-serif;font-weight:500}.value_color{width:8px;height:21px;border-radius:3px}.value_right{display:flex;gap:2px;width:44%;justify-content:space-evenly}.filter-container{gap:10px}.filter-item{width:12vw}.custom-date-picker,.custom-dropdown{width:100%;padding:10px!important;border:1px solid rgba(0,0,0,.03);border-radius:8px;background-color:#fff;cursor:pointer;appearance:none;outline:none;font-size:14px;font-weight:500;line-height:24px;color:#000}.custom-dropdown{background-position:right 10px center;background-size:14px;padding-right:30px}.content-d2-01,.content-d3-01{width:20vw}@media only screen and (max-width: 475px){.filter-container{width:96vw;gap:6px}.filter-item{width:46vw}.left-section{align-content:center;font-weight:600;font-size:18px;padding-left:3px;color:#000}.inside-header{height:12vh;display:flex;flex-direction:column;justify-content:space-between;gap:9px}.content1{padding:15px 0}.content2{width:auto}.d2{background-color:#fff;border-radius:8px;padding:4px 5px;height:25vh;width:auto;flex-direction:row;gap:2px;justify-content:center}.d2_value{width:82vw;padding:15px 2px}.d3{display:flex;flex-direction:row;justify-content:space-between;width:auto;padding:10px}.property-owned{padding:8px 4px 0 11px}.property-totalSqft{padding:8px 11px 0 4px}.common-style-name{width:37vw;height:6vh}.common-style-1{width:auto}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: FormateAmount, name: "formateAmount" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i3.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
5938
5971
  }
5939
5972
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PortfolioComponent, decorators: [{
5940
5973
  type: Component,
5941
- args: [{ selector: 'simpo-portfolio', standalone: true, imports: [MatIcon, CommonModule, NgxSkeletonLoaderModule], template: "<section class=\"main-container\" *ngIf=\"!pageLoader\">\r\n <div class=\"head-container\">\r\n <div class=\"icon-div text-end\"><mat-icon class=\"clr-white\">remove_red_eye</mat-icon></div>\r\n <div class=\"top-text\">Current Portfolio Value</div>\r\n <div class=\"main-text\">{{portFolioData?.currentPortFolioValue ?? 0}}</div>\r\n <div class=\"bottom-text\">Investment increase by : &nbsp;<span class=\"amnt clr-white\">\r\n {{growthAmount ?? 0}}</span>&nbsp;&nbsp;<span class=\"percent-text\">{{growthPercentage ?? 0}} %</span></div>\r\n </div>\r\n <div class=\"content-area\">\r\n <div class=\"inside-header\">\r\n <div class=\"left-section\">Investor Overview</div>\r\n <div class=\"right-section d-flex\">\r\n <div class=\"input-box\">\r\n <div class=\"filter-container d-flex align-items-center\">\r\n <div class=\"filter-item\">\r\n <input type=\"date\" class=\"custom-date-picker\" />\r\n </div>\r\n <div class=\"filter-item\">\r\n <select class=\"custom-dropdown\">\r\n <option *ngFor=\"let ele of propertyDetails\">{{ele.name}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"inside-content\">\r\n <div class=\"row content1\" >\r\n <div class=\"col-md-4 col-12\">\r\n <div class=\"content-d1\" >\r\n <div class=\"d1_name\">Total Investment Value</div>\r\n <div class=\"card1 d-flex align-items-center g-10\">\r\n <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n <div class=\"d1_img\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/681867c1739529671422Group%201707483072%20%282%29.png\" alt=\"img1\">\r\n </div>\r\n </div>\r\n <div class=\"no_of\">{{portFolioData?.totalInvestedValue ?? 0}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 col-6 property-owned\">\r\n <div class=\"content-d2\">\r\n <div class=\"d1_name\">Properties Owned</div>\r\n <div class=\"card1 d-flex align-items-center g-10\">\r\n <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n <div class=\"d1_img\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/990718c1739529606489Group%201707483072%20%281%29.png\" alt=\"img1\">\r\n </div>\r\n </div>\r\n <div class=\"no_of\">{{portFolioData?.totalInvestedProperties ?? 0}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 col-6 property-totalSqft\">\r\n <div class=\"content-d3\">\r\n <div class=\"d1_name\">Total Sq.ft Owned</div>\r\n <div class=\"card1 d-flex align-items-center g-10\">\r\n <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n <div class=\"d1_img\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/776806c1739529625699Group%201707483072.png\" alt=\"img1\">\r\n </div>\r\n </div>\r\n <div class=\"no_of\">{{portFolioData?.totalSqFeetOwned ?? 0}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n <div class=\"row content2\">\r\n <div class=\"col-md-8 col-12\">\r\n <div class=\"d2 d-flex\">\r\n <div class=\"left_d2\">\r\n <div class=\"d2_value\" *ngFor=\"let ele of propertyDetails\">\r\n <div class=\"value_left\">\r\n <div class=\"value_color\"></div>\r\n <div class=\"property_name\">{{ele?.name ?? \"N/A\"}}</div>\r\n </div>\r\n <div class=\"value_right\">\r\n <div>{{ele?.totalSqFeetOwned ?? 0}}</div>\r\n <div class=\"constant_line\">|</div>\r\n <div>{{ele?.investedAmount ?? 0}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 col-12 \">\r\n <div class=\"row d3\">\r\n <div class=\"col-6 \">\r\n <div class=\"d3_card1 common-style-1\">\r\n <div class=\"d3_card1_name text-start common-style-name\">Internal Rate of Return</div>\r\n <div class=\"value_d3_card1_name\">{{portFolioData?.avgIRR ?? 0}}</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6 \">\r\n <div class=\"d3_card2 common-style-1\">\r\n <div class=\"d3_card2_name text-start common-style-name\">Annual Return</div>\r\n <div class=\"value_d3_card1_name\"> {{portFolioData?.avgAnnualReturn ?? 0}}%</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"content1 \">\r\n <div class=\"d1\" *ngFor=\"let ele of topCards\">\r\n <div class=\"d1_name\">{{ele.text}}</div>\r\n <div class=\"card1 d-flex align-items-center g-10\">\r\n <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n <div class=\"d1_img\">\r\n <img [src]=\"ele.icon\" alt=\"img1\">\r\n </div>\r\n </div>\r\n <div class=\"no_of\">{{ele.count}}</div>\r\n </div>\r\n </div>\r\n </div> -->\r\n <!-- <div class=\"content2 d-flex align-items-center\">\r\n <div class=\"d2 d-flex\">\r\n <div class=\"left_d2\">\r\n <div class=\"d2_value\" *ngFor=\"let value of property_list\">\r\n <div class=\"value_left\">\r\n <div class=\"value_color\" [ngStyle]=\"{'background-color': value.color}\"></div>\r\n <div class=\"property_name\">{{value.name}}</div>\r\n </div>\r\n <div class=\"value_right\">\r\n <div>{{value.sq_ft}}</div>\r\n <div class=\"constant_line\">|</div>\r\n <div>{{value.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d3\">\r\n <div class=\"d3_card1 common-style-1\">\r\n <div class=\"d3_card1_name text-start\">Internal Rate of Return</div>\r\n <div class=\"value_d3_card1_name\">{{portFolioData?.avgIRR ?? 0}}</div>\r\n </div>\r\n <div class=\"d3_card2 common-style-1\">\r\n <div class=\"d3_card2_name text-start\">Annual Return</div>\r\n <div class=\"value_d3_card1_name\">{{portFolioData?.avgAnnualReturn ?? 0}}</div>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n </div>\r\n </div>\r\n</section>\r\n<section class=\"pageLoader\" *ngIf=\"pageLoader\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '30vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"row\">\r\n <div class=\"col-md-4 col-12\" *ngFor=\"let skel of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '20vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-8 col-12\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '30vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"col-md-4 col-12\">\r\n <div class=\"row flex-column\">\r\n <div class=\"col-6 w-100\" *ngFor=\"let skel of [1,2]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '13vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.head-container{background:linear-gradient(180deg,#0d1b2a,#172b40);padding:15px;border-radius:10px}.clr-white{color:#fff!important}.top-text{font-size:14px;font-weight:600;line-height:24px;color:#fff9;margin-bottom:15px}.main-text{font-weight:700;font-size:40px;line-height:24px;color:#fff;margin-bottom:15px}.bottom-text{font-weight:500;font-size:14px;line-height:24px;color:#fff9}.percent-text{color:#36b37e}.content1{padding:15px 0}.d1_img img{width:40px;height:auto}.no_of{font-size:28px;font-weight:600;line-height:24px;color:#01161e}.top_navigation_section{width:100%;height:6vh;padding:4px 2px}.backToLeads{color:#000!important}.arrowLeft{position:relative;top:2px}.edit-icon,.delete-icon{border:1px solid #F1F1F1;padding:4px 8px;border-radius:8px}.mainSection_es{height:calc(100vh + -0px);z-index:2;position:absolute;top:0;background:#fff;width:100%;overflow-y:hidden}.top_navigation{height:calc(7vh + -0px)}.botton_rendering{height:calc(93vh + -0px)}.leadDetailsSection_es{width:20%;height:100%}.activityAndNotesSection_es{width:90%;padding:5px 23px;height:100%;margin-left:5%}.companyDetailsSection-es{width:15%;padding:10px;height:100%}.content-area{background:#f1f6ff;border-radius:8px;padding:10px 0;height:calc(65vh - 72px);gap:1px}.inside-header{height:7vh;display:flex;flex-direction:row;justify-content:space-between}.left-section{align-content:center;font-weight:600;font-size:16px;padding-left:25px;color:#000}.cal{width:30%}.inside-content{border-radius:8px;height:calc(60vh - 72px);display:flex;flex-direction:column;gap:2px}.content-d1,.content-d2,.content-d3{background-color:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.03);padding:15px}.d1_name{font-size:16px;font-weight:500;line-height:24px;color:#01161e;margin-bottom:15px}.card1{gap:8px}.content2{border-radius:8px;width:100%}.d2{background-color:#fff;border-radius:8px;padding:4px 5px;height:25vh;width:auto;flex-direction:row;gap:2px}.left_d2{width:auto;align-content:center;height:auto;overflow-y:scroll;padding:12px}.d2_img{width:36%;align-content:center;height:20vh}.d3{border-radius:8px;display:flex;flex-direction:column}.d3_card1{border-left:8px solid rgb(52,84,177)!important}.d3_card2{border-left:8px solid rgb(39,29,109)!important}.common-style-1{background-color:#fff;border-radius:8px;padding:8px;margin-bottom:15px;width:20vw}.d3_card1_name,.d3_card2_name{text-align:start;font-size:16px;line-height:24px;margin-bottom:10px;font-weight:500;color:#01161e}.value_d3_card1_name{text-align:start;font-size:28px;line-height:24px;font-weight:700;color:#01161e}.d2_value{display:flex;justify-content:space-between;padding:9px 2px}.value_left{display:flex;gap:8px;font-family:sans-serif;font-weight:500}.value_color{width:8px;height:21px;border-radius:3px}.value_right{display:flex;gap:2px;width:44%;justify-content:space-evenly}.filter-container{gap:10px}.filter-item{width:12vw}.custom-date-picker,.custom-dropdown{width:100%;padding:10px!important;border:1px solid rgba(0,0,0,.03);border-radius:8px;background-color:#fff;cursor:pointer;appearance:none;outline:none;font-size:14px;font-weight:500;line-height:24px;color:#000}.custom-dropdown{background-position:right 10px center;background-size:14px;padding-right:30px}.content-d2-01,.content-d3-01{width:20vw}@media only screen and (max-width: 475px){.filter-container{width:96vw;gap:6px}.filter-item{width:46vw}.left-section{align-content:center;font-weight:600;font-size:18px;padding-left:3px;color:#000}.inside-header{height:12vh;display:flex;flex-direction:column;justify-content:space-between;gap:9px}.content1{padding:15px 0}.content2{width:auto}.d2{background-color:#fff;border-radius:8px;padding:4px 5px;height:25vh;width:auto;flex-direction:row;gap:2px;justify-content:center}.d2_value{width:82vw;padding:15px 2px}.d3{display:flex;flex-direction:row;justify-content:space-between;width:auto;padding:10px}.property-owned{padding:8px 4px 0 11px}.property-totalSqft{padding:8px 11px 0 4px}.common-style-name{width:37vw;height:6vh}.common-style-1{width:auto}}\n"] }]
5974
+ args: [{ selector: 'simpo-portfolio', standalone: true, imports: [MatIcon, CommonModule, FormateAmount, NgxSkeletonLoaderModule], template: "<section class=\"main-container\" *ngIf=\"!pageLoader\">\r\n <div class=\"head-container\">\r\n <div class=\"icon-div text-end\"><mat-icon class=\"clr-white\">remove_red_eye</mat-icon></div>\r\n <div class=\"top-text\">Current Portfolio Value</div>\r\n <div class=\"main-text\">\u20B9{{portFolioData?.currentPortFolioValue ?? 0}}</div>\r\n <div class=\"bottom-text\">Investment increase by : &nbsp;<span class=\"amnt clr-white\">\r\n {{growthAmount ?? 0}}</span>&nbsp;&nbsp;<span class=\"percent-text\">{{growthPercentage ?? 0}} %</span></div>\r\n </div>\r\n <div class=\"content-area\">\r\n <div class=\"inside-header\">\r\n <div class=\"left-section\">Investor Overview</div>\r\n <div class=\"right-section d-flex\">\r\n <div class=\"input-box\">\r\n <div class=\"filter-container d-flex align-items-center\">\r\n <div class=\"filter-item\">\r\n <input type=\"date\" class=\"custom-date-picker\" />\r\n </div>\r\n <div class=\"filter-item\">\r\n <select class=\"custom-dropdown\">\r\n <option *ngFor=\"let ele of propertyDetails\">{{ele.name}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"inside-content\">\r\n <div class=\"row content1\" >\r\n <div class=\"col-md-4 col-12\">\r\n <div class=\"content-d1\" >\r\n <div class=\"d1_name\">Total Investment Value</div>\r\n <div class=\"card1 d-flex align-items-center g-10\">\r\n <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n <div class=\"d1_img\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/681867c1739529671422Group%201707483072%20%282%29.png\" alt=\"img1\">\r\n </div>\r\n </div>\r\n <div class=\"no_of\">\u20B9{{portFolioData?.totalInvestedValue ?? 0}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 col-6 property-owned\">\r\n <div class=\"content-d2\">\r\n <div class=\"d1_name\">Properties Owned</div>\r\n <div class=\"card1 d-flex align-items-center g-10\">\r\n <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n <div class=\"d1_img\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/990718c1739529606489Group%201707483072%20%281%29.png\" alt=\"img1\">\r\n </div>\r\n </div>\r\n <div class=\"no_of\">{{portFolioData?.totalInvestedProperties ?? 0}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 col-6 property-totalSqft\">\r\n <div class=\"content-d3\">\r\n <div class=\"d1_name\">Total Sq.ft Owned</div>\r\n <div class=\"card1 d-flex align-items-center g-10\">\r\n <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n <div class=\"d1_img\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/776806c1739529625699Group%201707483072.png\" alt=\"img1\">\r\n </div>\r\n </div>\r\n <div class=\"no_of\">{{portFolioData?.totalSqFeetOwned ?? 0}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n </div>\r\n <div class=\"row content2\">\r\n <div class=\"col-md-8 col-12\">\r\n <div class=\"d2 d-flex\">\r\n <div class=\"left_d2\">\r\n <div class=\"d2_value\" *ngFor=\"let ele of propertyDetails\">\r\n <div class=\"value_left\">\r\n <div class=\"value_color\"></div>\r\n <div class=\"property_name\">{{ele?.name ?? \"N/A\"}}</div>\r\n </div>\r\n <div class=\"value_right\">\r\n <div>{{ele?.totalSqFeetOwned ?? 0}} Sqft</div>\r\n <div class=\"constant_line\">|</div>\r\n <div>\u20B9{{ele?.investedAmount ?? 0 | formateAmount:'IND' }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 col-12 \">\r\n <div class=\"row d3\">\r\n <div class=\"col-6 \">\r\n <div class=\"d3_card1 common-style-1\">\r\n <div class=\"d3_card1_name text-start common-style-name\">Internal Rate of Return</div>\r\n <div class=\"value_d3_card1_name\">{{portFolioData?.avgIRR ?? 0}}%</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6 \">\r\n <div class=\"d3_card2 common-style-1\">\r\n <div class=\"d3_card2_name text-start common-style-name\">Annual Return</div>\r\n <div class=\"value_d3_card1_name\">{{portFolioData?.avgAnnualReturn ?? 0}}%</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"content1 \">\r\n <div class=\"d1\" *ngFor=\"let ele of topCards\">\r\n <div class=\"d1_name\">{{ele.text}}</div>\r\n <div class=\"card1 d-flex align-items-center g-10\">\r\n <div class=\"card1_img d-flex align-items-center justify-content-center\">\r\n <div class=\"d1_img\">\r\n <img [src]=\"ele.icon\" alt=\"img1\">\r\n </div>\r\n </div>\r\n <div class=\"no_of\">{{ele.count}}</div>\r\n </div>\r\n </div>\r\n </div> -->\r\n <!-- <div class=\"content2 d-flex align-items-center\">\r\n <div class=\"d2 d-flex\">\r\n <div class=\"left_d2\">\r\n <div class=\"d2_value\" *ngFor=\"let value of property_list\">\r\n <div class=\"value_left\">\r\n <div class=\"value_color\" [ngStyle]=\"{'background-color': value.color}\"></div>\r\n <div class=\"property_name\">{{value.name}}</div>\r\n </div>\r\n <div class=\"value_right\">\r\n <div>{{value.sq_ft}}</div>\r\n <div class=\"constant_line\">|</div>\r\n <div>{{value.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d3\">\r\n <div class=\"d3_card1 common-style-1\">\r\n <div class=\"d3_card1_name text-start\">Internal Rate of Return</div>\r\n <div class=\"value_d3_card1_name\">{{portFolioData?.avgIRR ?? 0}}</div>\r\n </div>\r\n <div class=\"d3_card2 common-style-1\">\r\n <div class=\"d3_card2_name text-start\">Annual Return</div>\r\n <div class=\"value_d3_card1_name\">{{portFolioData?.avgAnnualReturn ?? 0}}</div>\r\n </div>\r\n </div>\r\n </div> -->\r\n\r\n </div>\r\n </div>\r\n</section>\r\n<section class=\"pageLoader\" *ngIf=\"pageLoader\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '30vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"row\">\r\n <div class=\"col-md-4 col-12\" *ngFor=\"let skel of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '20vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-8 col-12\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '30vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"col-md-4 col-12\">\r\n <div class=\"row flex-column\">\r\n <div class=\"col-6 w-100\" *ngFor=\"let skel of [1,2]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '13vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.head-container{background:linear-gradient(180deg,#0d1b2a,#172b40);padding:15px;border-radius:10px}.clr-white{color:#fff!important}.top-text{font-size:14px;font-weight:600;line-height:24px;color:#fff9;margin-bottom:15px}.main-text{font-weight:700;font-size:40px;line-height:24px;color:#fff;margin-bottom:15px}.bottom-text{font-weight:500;font-size:14px;line-height:24px;color:#fff9}.percent-text{color:#36b37e}.content1{padding:15px 0}.d1_img img{width:40px;height:auto}.no_of{font-size:28px;font-weight:600;line-height:24px;color:#01161e}.top_navigation_section{width:100%;height:6vh;padding:4px 2px}.backToLeads{color:#000!important}.arrowLeft{position:relative;top:2px}.edit-icon,.delete-icon{border:1px solid #F1F1F1;padding:4px 8px;border-radius:8px}.mainSection_es{height:calc(100vh + -0px);z-index:2;position:absolute;top:0;background:#fff;width:100%;overflow-y:hidden}.top_navigation{height:calc(7vh + -0px)}.botton_rendering{height:calc(93vh + -0px)}.leadDetailsSection_es{width:20%;height:100%}.activityAndNotesSection_es{width:90%;padding:5px 23px;height:100%;margin-left:5%}.companyDetailsSection-es{width:15%;padding:10px;height:100%}.content-area{background:#f1f6ff;border-radius:8px;padding:10px 0;height:calc(65vh - 72px);gap:1px}.inside-header{height:7vh;display:flex;flex-direction:row;justify-content:space-between}.left-section{align-content:center;font-weight:600;font-size:16px;padding-left:25px;color:#000}.cal{width:30%}.inside-content{border-radius:8px;height:calc(60vh - 72px);display:flex;flex-direction:column;gap:2px}.content-d1,.content-d2,.content-d3{background-color:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.03);padding:15px}.d1_name{font-size:16px;font-weight:500;line-height:24px;color:#01161e;margin-bottom:15px}.card1{gap:8px}.content2{border-radius:8px;width:100%}.d2{background-color:#fff;border-radius:8px;padding:4px 5px;height:25vh;width:auto;flex-direction:row;gap:2px}.left_d2{width:auto;align-content:center;height:auto;overflow-y:scroll;padding:12px}.d2_img{width:36%;align-content:center;height:20vh}.d3{border-radius:8px;display:flex;flex-direction:column}.d3_card1{border-left:8px solid rgb(52,84,177)!important}.d3_card2{border-left:8px solid rgb(39,29,109)!important}.common-style-1{background-color:#fff;border-radius:8px;padding:8px;margin-bottom:15px;width:20vw}.d3_card1_name,.d3_card2_name{text-align:start;font-size:16px;line-height:24px;margin-bottom:10px;font-weight:500;color:#01161e}.value_d3_card1_name{text-align:start;font-size:28px;line-height:24px;font-weight:700;color:#01161e}.d2_value{display:flex;justify-content:space-between;padding:9px 2px}.value_left{display:flex;gap:8px;font-family:sans-serif;font-weight:500}.value_color{width:8px;height:21px;border-radius:3px}.value_right{display:flex;gap:2px;width:44%;justify-content:space-evenly}.filter-container{gap:10px}.filter-item{width:12vw}.custom-date-picker,.custom-dropdown{width:100%;padding:10px!important;border:1px solid rgba(0,0,0,.03);border-radius:8px;background-color:#fff;cursor:pointer;appearance:none;outline:none;font-size:14px;font-weight:500;line-height:24px;color:#000}.custom-dropdown{background-position:right 10px center;background-size:14px;padding-right:30px}.content-d2-01,.content-d3-01{width:20vw}@media only screen and (max-width: 475px){.filter-container{width:96vw;gap:6px}.filter-item{width:46vw}.left-section{align-content:center;font-weight:600;font-size:18px;padding-left:3px;color:#000}.inside-header{height:12vh;display:flex;flex-direction:column;justify-content:space-between;gap:9px}.content1{padding:15px 0}.content2{width:auto}.d2{background-color:#fff;border-radius:8px;padding:4px 5px;height:25vh;width:auto;flex-direction:row;gap:2px;justify-content:center}.d2_value{width:82vw;padding:15px 2px}.d3{display:flex;flex-direction:row;justify-content:space-between;width:auto;padding:10px}.property-owned{padding:8px 4px 0 11px}.property-totalSqft{padding:8px 11px 0 4px}.common-style-name{width:37vw;height:6vh}.common-style-1{width:auto}}\n"] }]
5942
5975
  }], ctorParameters: () => [{ type: RestService }] });
5943
5976
 
5944
5977
  class PropertyViewComponent {
@@ -5964,26 +5997,6 @@ class PropertyViewComponent {
5964
5997
  guaranteedGrowth: "5%",
5965
5998
  marketMovement: "High"
5966
5999
  };
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
6000
  this.pageLoader = false;
5988
6001
  }
5989
6002
  ngOnInit() {
@@ -6004,11 +6017,11 @@ class PropertyViewComponent {
6004
6017
  });
6005
6018
  }
6006
6019
  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"] }] }); }
6020
+ 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%;gap:5px}.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
6021
  }
6009
6022
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyViewComponent, decorators: [{
6010
6023
  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"] }]
6024
+ 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%;gap:5px}.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
6025
  }], ctorParameters: () => [{ type: RestService }], propDecorators: { id: [{
6013
6026
  type: Input
6014
6027
  }], getScreenSize: [{
@@ -6026,6 +6039,38 @@ class PropertiesComponent {
6026
6039
  this.getPropertyDetails();
6027
6040
  this.getScreenSize();
6028
6041
  }
6042
+ // investments: any = [
6043
+ // {
6044
+ // name: "SQFT Investment",
6045
+ // details: [
6046
+ // { name: "Total Sq.ft Owned", value: "43" },
6047
+ // { name: "Amount Invested", value: "₹5.73 L" },
6048
+ // { name: "Indicative Market Value", value: "₹6.21 L", spanValue: "+2.1%" },
6049
+ // { name: "IRR", value: "14%" },
6050
+ // ]
6051
+ // },
6052
+ // {
6053
+ // name: "Private Investment ",
6054
+ // details: [
6055
+ // { name: "Properties Owned", value: "2" },
6056
+ // { name: "Properties Sq.ft", value: "3092" },
6057
+ // { name: "Invested Value", value: "₹32.41 L", spanValue: "+2.1%" },
6058
+ // { name: "Indicative Market Value", value: "₹38.59 L" },
6059
+ // ]
6060
+ // }
6061
+ // ]
6062
+ // activeTab: any = "ALL_PROPERTIES"
6063
+ // tabs: any = [
6064
+ // { viewValue: "All Properties", value: "ALL_PROPERTIES" },
6065
+ // { viewValue: "My SQFT", value: "SQFT" },
6066
+ // { viewValue: "Private Investments", value: "PRIVATE" },
6067
+ // ]
6068
+ formatAmount(amount) {
6069
+ if (amount >= 100000) {
6070
+ return (amount / 100000).toFixed(2) + 'L';
6071
+ }
6072
+ return amount.toString();
6073
+ }
6029
6074
  getPropertyDetails() {
6030
6075
  this.pageLoader = true;
6031
6076
  this.restService.getMyPropertyDetails().subscribe((res) => {
@@ -6037,11 +6082,11 @@ class PropertiesComponent {
6037
6082
  this.screenWidth = window.innerWidth;
6038
6083
  }
6039
6084
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertiesComponent, deps: [{ token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
6040
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertiesComponent, isStandalone: true, selector: "simpo-properties", host: { listeners: { "window: resize": "getScreenSize($event)" } }, ngImport: i0, template: "<section class=\"main-container\" *ngIf=\"!viewTab && !pageLoader\">\r\n <!-- <div class=\"card-section d-flex gap-2\">\r\n <div class=\"cards\" *ngFor=\"let ele of investments\">\r\n <div class=\"head\">{{ele.name}}</div>\r\n <div class=\"mini-cards\">\r\n <div class=\"mini-card\" *ngFor=\"let ele of ele.details\">\r\n <div class=\"text\">{{ele.name}}</div>\r\n <div class=\"number d-flex\">{{ele.value}}&nbsp;&nbsp;<span *ngIf=\"ele?.spanValue\"\r\n class=\"span-text d-flex\"><mat-icon>arrow_drop_up</mat-icon>\r\n {{ele.spanValue}}</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"property-tabs d-flex gap-10 mt-3\">\r\n <div class=\"tab\" *ngFor=\"let ele of tabs\" (click)=\"activeTab = ele.value\"\r\n [class.tabActive]=\"activeTab == ele.value\">{{ele.viewValue}}</div>\r\n </div> -->\r\n <div class=\"property-cards\">\r\n <ng-container *ngFor=\"let ele of propertyDetails\">\r\n <div class=\"property-card w-100 d-flex gap-10\" (click)=\"viewTab = true;selectedId = ele.propertyId\">\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide p-relative w-35 h-34\" data-bs-ride=\"carousel\" *ngIf=\"ele?.propertyImage\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let ele of ele?.propertyImage;let i = index\">\r\n <div class=\"carousel-item active\" [class.active]=\"i\" data-bs-interval=\"3000\">\r\n <img [src]=\"ele\" class=\"d-block w-100 height-30 br-10\" alt=\"property-image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-center p-15\">\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <ng-container *ngFor=\"let ele of ele.propertyImage;let i = index\">\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\"\r\n [attr.data-bs-slide-to]=\"i\" class=\"active additional-properties\"\r\n aria-current=\"true\" aria-label=\"Slide 1\"></button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"property-card w-35 d-flex gap-10\" *ngIf=\"!ele?.propertyImage\">\r\n <img src=\"https://upload.wikimedia.org/wikipedia/commons/1/14/No_Image_Available.jpg\" class=\"d-block w-100 height-30 br-10\" alt=\"property-image\">\r\n </div>\r\n <div class=\"right-section\">\r\n <div class=\"right-top d-flex justify-content-between\">\r\n <div class=\"head-left\">\r\n <div class=\"propertyname\">{{ele?.name ?? \"N/A\"}}</div>\r\n <div class=\"property-location\"><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\">{{ele?.propertyLocation ?? \"N/A\"}}</div>\r\n </div>\r\n </div>\r\n <!-- <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/637983c1739855715188Vector%2012%20%281%29.png\" class=\"curve-img\"> -->\r\n <div class=\"right-bottom d-flex gap-10 width\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-md-3 col-6 details\">\r\n <div class=\"top-detail text-center\">{{ele?.investedAmount ?? 0}}</div>\r\n <div class=\"bottom-detail text-center\">Invested Amount</div>\r\n </div>\r\n <div class=\"col-md-3 col-6 details\" [class.lst-div]=\"screenWidth < 475\">\r\n <div class=\"top-detail text-center\">{{ele?.totalSqFeetOwned ?? 0}}</div>\r\n <div class=\"bottom-detail text-center\">Sq.ft</div>\r\n </div>\r\n <div class=\"col-md-3 col-6 details\">\r\n <div class=\"top-detail text-center\">{{ele?.indicativeMarketValue ?? 0}}</div>\r\n <div class=\"bottom-detail text-center\">Current Value</div>\r\n </div>\r\n <div class=\"col-md-3 col-6 details lst-div\">\r\n <div class=\"top-detail text-center\">{{ele?.currentAmount ?? 0}}</div>\r\n <div class=\"bottom-detail text-center\">Profit/Loss</div>\r\n </div>\r\n <!-- lst-div -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</section>\r\n<section class=\"view-container\" *ngIf=\"viewTab\">\r\n <div class=\"back\">\r\n <div class=\"back-text d-flex align-items-center\">\r\n <p class=\"my-text mb-0 common-style\" (click)=\"viewTab = false\">My Properties</p><mat-icon\r\n class=\"my-text\">keyboard_arrow_right</mat-icon>\r\n <p class=\"prty-text mb-0 common-style\">Property Details</p>\r\n </div>\r\n </div>\r\n <simpo-property-view [id]=\"selectedId\"></simpo-property-view>\r\n</section>\r\n<section class=\"pageloader\" *ngIf=\"pageLoader\">\r\n <div class=\"property-cards\">\r\n <div *ngFor=\"let skel of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '30vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n\r\n</section>", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.gap-2{gap:2%!important}.cards{background:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.03);width:49%;padding:10px}.head{font-size:18px;font-weight:600;line-height:24px;color:#000;margin-bottom:10px}.mini-cards{display:grid;grid-template-columns:48% 48%;gap:3%}.mini-card{background:#fafafa;border-radius:7px;padding:10px 15px;margin-bottom:10px}.text{font-size:14px;line-height:24px;font-weight:500;color:#01161ecc;margin-bottom:10px}.number{font-size:24px;line-height:24px;font-weight:700;color:#01161e}.span-text{font-size:13px;line-height:24px;font-weight:700;color:#36b37e}.property-tab{display:flex;gap:10px;margin-top:15px}.gap-10{gap:10px}.tab{padding:10px;background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:8px;font-size:16px;line-height:24px;font-weight:500;color:#01161e;cursor:pointer}.tabActive{color:#f8a938!important;border:1px solid rgba(248,169,56,1)!important}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%}.height-30{height:35vh}.w-35{width:35%!important}.property-cards{overflow-y:scroll;height:81vh}.property-card{border-radius:10px!important;background:#fff;border:1px solid rgba(0,0,0,.04);margin-bottom:15px;position:relative;overflow:hidden;cursor:pointer}.br-10{border-radius:10px 0 0 10px}.right-section{width:65%}.property-name{font-size:16px;font-weight:600;line-height:21px;color:#000}.property-location{font-size:14px;font-weight:500;line-height:44px;color:#0000004d}.type{font-size:14px;font-weight:600;line-height:24px;color:#f8a938;background:#ffebcb;border-radius:8px 0 0 9px;padding:6px}.right-bottom{background:#219ebc}.details{border-right:1px solid rgba(255,255,255,.2);padding:8px;margin:8px 0}.top-detail{font-size:20px;font-weight:700;line-height:24px;color:#fff}.bottom-detail{font-size:13px;font-weight:500;line-height:24px;color:#ffffffb3}.head-left{padding:10px}.head-right{padding:10px 0}.lst-div{border:unset!important}.width{width:90%!important}.curve-img{position:absolute;width:33px;top:33%;left:31%}.p-15{padding:15px}.my-text{color:#00000080;cursor:pointer}.prty-text{color:#000}.common-style{font-size:14px;line-height:24px;font-weight:500}.grey-icon{filter:grayscale(100%) brightness(50%)}@media only screen and (max-width: 475px){.property-card{width:100%;display:flex;flex-direction:column;gap:10px}.carousel{position:unset;width:100%!important;padding:10px}.right-section{width:100%}.head-right{display:none}.propertyName{position:relative;bottom:50px}.h-34{height:32vh}.right-bottom{border-radius:10px}.propertyname{font-size:19px;font-weight:600}.property-location{font-size:20px}.property-cards{height:100%}.width{width:95%!important}.br-10{border-radius:10px}.height-30{height:32vh}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PropertyViewComponent, selector: "simpo-property-view", inputs: ["id"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i3.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
6085
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertiesComponent, isStandalone: true, selector: "simpo-properties", host: { listeners: { "window: resize": "getScreenSize($event)" } }, ngImport: i0, template: "<section class=\"main-container\" *ngIf=\"!viewTab && !pageLoader\">\r\n <!-- <div class=\"card-section d-flex gap-2\">\r\n <div class=\"cards\" *ngFor=\"let ele of investments\">\r\n <div class=\"head\">{{ele.name}}</div>\r\n <div class=\"mini-cards\">\r\n <div class=\"mini-card\" *ngFor=\"let ele of ele.details\">\r\n <div class=\"text\">{{ele.name}}</div>\r\n <div class=\"number d-flex\">{{ele.value}}&nbsp;&nbsp;<span *ngIf=\"ele?.spanValue\"\r\n class=\"span-text d-flex\"><mat-icon>arrow_drop_up</mat-icon>\r\n {{ele.spanValue}}</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"property-tabs d-flex gap-10 mt-3\">\r\n <div class=\"tab\" *ngFor=\"let ele of tabs\" (click)=\"activeTab = ele.value\"\r\n [class.tabActive]=\"activeTab == ele.value\">{{ele.viewValue}}</div>\r\n </div> -->\r\n <div class=\"property-cards\">\r\n <ng-container *ngFor=\"let ele of propertyDetails\">\r\n <div class=\"property-card w-100 d-flex gap-10\" (click)=\"viewTab = true;selectedId = ele.propertyId\">\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide p-relative w-35 h-34\" data-bs-ride=\"carousel\" *ngIf=\"ele?.propertyImage\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let ele of ele?.propertyImage;let i = index\">\r\n <div class=\"carousel-item active\" [class.active]=\"i\" data-bs-interval=\"3000\">\r\n <img [src]=\"ele\" class=\"d-block w-100 height-30 br-10\" alt=\"property-image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-center p-15\">\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <ng-container *ngFor=\"let ele of ele.propertyImage;let i = index\">\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\"\r\n [attr.data-bs-slide-to]=\"i\" class=\"active additional-properties\"\r\n aria-current=\"true\" aria-label=\"Slide 1\"></button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"property-card w-35 d-flex gap-10\" *ngIf=\"!ele?.propertyImage\">\r\n <img src=\"https://upload.wikimedia.org/wikipedia/commons/1/14/No_Image_Available.jpg\" class=\"d-block w-100 height-30 br-10\" alt=\"property-image\">\r\n </div>\r\n <div class=\"right-section\">\r\n <div class=\"right-top d-flex justify-content-between\">\r\n <div class=\"head-left\">\r\n <div class=\"propertyname\">{{ele?.name ?? \"N/A\"}}</div>\r\n <div class=\"property-location\"><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\">{{ele?.propertyLocation ?? \"N/A\"}}</div>\r\n </div>\r\n </div>\r\n <!-- <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/637983c1739855715188Vector%2012%20%281%29.png\" class=\"curve-img\"> -->\r\n <div class=\"row right-bottom width\">\r\n <!-- <div class=\"row w-100\"> -->\r\n <div class=\"col-md-3 col-6 details\">\r\n <div class=\"top-detail text-center\">\u20B9 {{ele?.investedAmount ?? 0}}</div>\r\n <div class=\"bottom-detail text-center\">Invested Amount</div>\r\n </div>\r\n <div class=\"col-md-3 col-6 details\" [class.lst-div]=\"screenWidth < 475\">\r\n <div class=\"top-detail text-center\">{{ele?.totalSqFeetOwned ?? 0}}</div>\r\n <div class=\"bottom-detail text-center\">Sq.ft</div>\r\n </div>\r\n <div class=\"col-md-3 col-6 details\">\r\n <div class=\"top-detail text-center\">\u20B9 {{ele?.indicativeMarketValue ?? 0}}</div>\r\n <div class=\"bottom-detail text-center\">Current Value</div>\r\n </div>\r\n <div class=\"col-md-3 col-6 details lst-div\">\r\n <div class=\"top-detail text-center\" [ngClass]=\"{'text-profit': (ele?.currentAmount - ele?.investedAmount) > 0,\r\n 'text-loss': (ele?.currentAmount - ele?.investedAmount) < 0}\">\r\n \u20B9 {{formatAmount(ele?.currentAmount - ele?.investedAmount) ?? 0 }}</div>\r\n <div class=\"bottom-detail text-center\" [ngClass]=\"{'text-profit': (ele?.currentAmount - ele?.investedAmount) > 0,\r\n 'text-loss': (ele?.currentAmount - ele?.investedAmount) < 0}\">Profit/Loss</div>\r\n </div>\r\n <!-- lst-div -->\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</section>\r\n<section class=\"view-container\" *ngIf=\"viewTab\">\r\n <div class=\"back\">\r\n <div class=\"back-text d-flex align-items-center\">\r\n <p class=\"my-text mb-0 common-style\" (click)=\"viewTab = false\">My Properties</p><mat-icon\r\n class=\"my-text\">keyboard_arrow_right</mat-icon>\r\n <p class=\"prty-text mb-0 common-style\">Property Details</p>\r\n </div>\r\n </div>\r\n <simpo-property-view [id]=\"selectedId\"></simpo-property-view>\r\n</section>\r\n<section class=\"pageloader\" *ngIf=\"pageLoader\">\r\n <div class=\"property-cards\">\r\n <div *ngFor=\"let skel of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '30vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n\r\n</section>", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.gap-2{gap:2%!important}.cards{background:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.03);width:49%;padding:10px}.head{font-size:18px;font-weight:600;line-height:24px;color:#000;margin-bottom:10px}.mini-cards{display:grid;grid-template-columns:48% 48%;gap:3%}.mini-card{background:#fafafa;border-radius:7px;padding:10px 15px;margin-bottom:10px}.text{font-size:14px;line-height:24px;font-weight:500;color:#01161ecc;margin-bottom:10px}.number{font-size:24px;line-height:24px;font-weight:700;color:#01161e}.span-text{font-size:13px;line-height:24px;font-weight:700;color:#36b37e}.property-tab{display:flex;gap:10px;margin-top:15px}.gap-10{gap:10px}.tab{padding:10px;background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:8px;font-size:16px;line-height:24px;font-weight:500;color:#01161e;cursor:pointer}.tabActive{color:#f8a938!important;border:1px solid rgba(248,169,56,1)!important}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%}.height-30{height:35vh}.w-35{width:35%!important}.property-cards{overflow-y:scroll;height:81vh}.property-card{border-radius:10px!important;background:#fff;border:1px solid rgba(0,0,0,.04);margin-bottom:15px;position:relative;overflow:hidden;cursor:pointer}.br-10{border-radius:10px 0 0 10px}.right-section{width:65%}.property-name{font-size:16px;font-weight:600;line-height:21px;color:#000}.property-location{font-size:14px;font-weight:500;line-height:44px;color:#0000004d}.type{font-size:14px;font-weight:600;line-height:24px;color:#f8a938;background:#ffebcb;border-radius:8px 0 0 9px;padding:6px}.right-bottom{background:#219ebc;margin-left:5px}.details{border-right:1px solid rgba(255,255,255,.2);padding:8px;margin:8px 0}.top-detail{font-size:20px;font-weight:700;line-height:24px;color:#fff}.bottom-detail{font-size:13px;font-weight:500;line-height:24px;color:#ffffffb3}.head-left{padding:10px}.head-right{padding:10px 0}.lst-div{border:unset!important}.width{width:90%!important}.curve-img{position:absolute;width:33px;top:33%;left:31%}.p-15{padding:15px}.my-text{color:#00000080;cursor:pointer}.prty-text{color:#000}.common-style{font-size:14px;line-height:24px;font-weight:500}.grey-icon{filter:grayscale(100%) brightness(50%)}.text-profit{color:#4eeeaa}.text-loss{color:#f36f56}@media only screen and (max-width: 475px){.property-card{width:100%;display:flex;flex-direction:column;gap:10px}.carousel{position:unset;width:100%!important;padding:10px}.right-section{width:100%}.head-right{display:none}.propertyName{position:relative;bottom:50px}.h-34{height:32vh}.right-bottom{border-radius:10px}.propertyname{font-size:19px;font-weight:600}.property-location{font-size:20px}.property-cards{height:100%}.width{width:95%!important}.br-10{border-radius:10px}.height-30{height:32vh}}\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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PropertyViewComponent, selector: "simpo-property-view", inputs: ["id"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i3.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
6041
6086
  }
6042
6087
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertiesComponent, decorators: [{
6043
6088
  type: Component,
6044
- args: [{ selector: 'simpo-properties', standalone: true, imports: [CommonModule, MatIcon, PropertyViewComponent, NgxSkeletonLoaderModule], template: "<section class=\"main-container\" *ngIf=\"!viewTab && !pageLoader\">\r\n <!-- <div class=\"card-section d-flex gap-2\">\r\n <div class=\"cards\" *ngFor=\"let ele of investments\">\r\n <div class=\"head\">{{ele.name}}</div>\r\n <div class=\"mini-cards\">\r\n <div class=\"mini-card\" *ngFor=\"let ele of ele.details\">\r\n <div class=\"text\">{{ele.name}}</div>\r\n <div class=\"number d-flex\">{{ele.value}}&nbsp;&nbsp;<span *ngIf=\"ele?.spanValue\"\r\n class=\"span-text d-flex\"><mat-icon>arrow_drop_up</mat-icon>\r\n {{ele.spanValue}}</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"property-tabs d-flex gap-10 mt-3\">\r\n <div class=\"tab\" *ngFor=\"let ele of tabs\" (click)=\"activeTab = ele.value\"\r\n [class.tabActive]=\"activeTab == ele.value\">{{ele.viewValue}}</div>\r\n </div> -->\r\n <div class=\"property-cards\">\r\n <ng-container *ngFor=\"let ele of propertyDetails\">\r\n <div class=\"property-card w-100 d-flex gap-10\" (click)=\"viewTab = true;selectedId = ele.propertyId\">\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide p-relative w-35 h-34\" data-bs-ride=\"carousel\" *ngIf=\"ele?.propertyImage\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let ele of ele?.propertyImage;let i = index\">\r\n <div class=\"carousel-item active\" [class.active]=\"i\" data-bs-interval=\"3000\">\r\n <img [src]=\"ele\" class=\"d-block w-100 height-30 br-10\" alt=\"property-image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-center p-15\">\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <ng-container *ngFor=\"let ele of ele.propertyImage;let i = index\">\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\"\r\n [attr.data-bs-slide-to]=\"i\" class=\"active additional-properties\"\r\n aria-current=\"true\" aria-label=\"Slide 1\"></button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"property-card w-35 d-flex gap-10\" *ngIf=\"!ele?.propertyImage\">\r\n <img src=\"https://upload.wikimedia.org/wikipedia/commons/1/14/No_Image_Available.jpg\" class=\"d-block w-100 height-30 br-10\" alt=\"property-image\">\r\n </div>\r\n <div class=\"right-section\">\r\n <div class=\"right-top d-flex justify-content-between\">\r\n <div class=\"head-left\">\r\n <div class=\"propertyname\">{{ele?.name ?? \"N/A\"}}</div>\r\n <div class=\"property-location\"><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\">{{ele?.propertyLocation ?? \"N/A\"}}</div>\r\n </div>\r\n </div>\r\n <!-- <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/637983c1739855715188Vector%2012%20%281%29.png\" class=\"curve-img\"> -->\r\n <div class=\"right-bottom d-flex gap-10 width\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-md-3 col-6 details\">\r\n <div class=\"top-detail text-center\">{{ele?.investedAmount ?? 0}}</div>\r\n <div class=\"bottom-detail text-center\">Invested Amount</div>\r\n </div>\r\n <div class=\"col-md-3 col-6 details\" [class.lst-div]=\"screenWidth < 475\">\r\n <div class=\"top-detail text-center\">{{ele?.totalSqFeetOwned ?? 0}}</div>\r\n <div class=\"bottom-detail text-center\">Sq.ft</div>\r\n </div>\r\n <div class=\"col-md-3 col-6 details\">\r\n <div class=\"top-detail text-center\">{{ele?.indicativeMarketValue ?? 0}}</div>\r\n <div class=\"bottom-detail text-center\">Current Value</div>\r\n </div>\r\n <div class=\"col-md-3 col-6 details lst-div\">\r\n <div class=\"top-detail text-center\">{{ele?.currentAmount ?? 0}}</div>\r\n <div class=\"bottom-detail text-center\">Profit/Loss</div>\r\n </div>\r\n <!-- lst-div -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</section>\r\n<section class=\"view-container\" *ngIf=\"viewTab\">\r\n <div class=\"back\">\r\n <div class=\"back-text d-flex align-items-center\">\r\n <p class=\"my-text mb-0 common-style\" (click)=\"viewTab = false\">My Properties</p><mat-icon\r\n class=\"my-text\">keyboard_arrow_right</mat-icon>\r\n <p class=\"prty-text mb-0 common-style\">Property Details</p>\r\n </div>\r\n </div>\r\n <simpo-property-view [id]=\"selectedId\"></simpo-property-view>\r\n</section>\r\n<section class=\"pageloader\" *ngIf=\"pageLoader\">\r\n <div class=\"property-cards\">\r\n <div *ngFor=\"let skel of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '30vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n\r\n</section>", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.gap-2{gap:2%!important}.cards{background:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.03);width:49%;padding:10px}.head{font-size:18px;font-weight:600;line-height:24px;color:#000;margin-bottom:10px}.mini-cards{display:grid;grid-template-columns:48% 48%;gap:3%}.mini-card{background:#fafafa;border-radius:7px;padding:10px 15px;margin-bottom:10px}.text{font-size:14px;line-height:24px;font-weight:500;color:#01161ecc;margin-bottom:10px}.number{font-size:24px;line-height:24px;font-weight:700;color:#01161e}.span-text{font-size:13px;line-height:24px;font-weight:700;color:#36b37e}.property-tab{display:flex;gap:10px;margin-top:15px}.gap-10{gap:10px}.tab{padding:10px;background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:8px;font-size:16px;line-height:24px;font-weight:500;color:#01161e;cursor:pointer}.tabActive{color:#f8a938!important;border:1px solid rgba(248,169,56,1)!important}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%}.height-30{height:35vh}.w-35{width:35%!important}.property-cards{overflow-y:scroll;height:81vh}.property-card{border-radius:10px!important;background:#fff;border:1px solid rgba(0,0,0,.04);margin-bottom:15px;position:relative;overflow:hidden;cursor:pointer}.br-10{border-radius:10px 0 0 10px}.right-section{width:65%}.property-name{font-size:16px;font-weight:600;line-height:21px;color:#000}.property-location{font-size:14px;font-weight:500;line-height:44px;color:#0000004d}.type{font-size:14px;font-weight:600;line-height:24px;color:#f8a938;background:#ffebcb;border-radius:8px 0 0 9px;padding:6px}.right-bottom{background:#219ebc}.details{border-right:1px solid rgba(255,255,255,.2);padding:8px;margin:8px 0}.top-detail{font-size:20px;font-weight:700;line-height:24px;color:#fff}.bottom-detail{font-size:13px;font-weight:500;line-height:24px;color:#ffffffb3}.head-left{padding:10px}.head-right{padding:10px 0}.lst-div{border:unset!important}.width{width:90%!important}.curve-img{position:absolute;width:33px;top:33%;left:31%}.p-15{padding:15px}.my-text{color:#00000080;cursor:pointer}.prty-text{color:#000}.common-style{font-size:14px;line-height:24px;font-weight:500}.grey-icon{filter:grayscale(100%) brightness(50%)}@media only screen and (max-width: 475px){.property-card{width:100%;display:flex;flex-direction:column;gap:10px}.carousel{position:unset;width:100%!important;padding:10px}.right-section{width:100%}.head-right{display:none}.propertyName{position:relative;bottom:50px}.h-34{height:32vh}.right-bottom{border-radius:10px}.propertyname{font-size:19px;font-weight:600}.property-location{font-size:20px}.property-cards{height:100%}.width{width:95%!important}.br-10{border-radius:10px}.height-30{height:32vh}}\n"] }]
6089
+ args: [{ selector: 'simpo-properties', standalone: true, imports: [CommonModule, MatIcon, PropertyViewComponent, FormateAmount, NgxSkeletonLoaderModule], template: "<section class=\"main-container\" *ngIf=\"!viewTab && !pageLoader\">\r\n <!-- <div class=\"card-section d-flex gap-2\">\r\n <div class=\"cards\" *ngFor=\"let ele of investments\">\r\n <div class=\"head\">{{ele.name}}</div>\r\n <div class=\"mini-cards\">\r\n <div class=\"mini-card\" *ngFor=\"let ele of ele.details\">\r\n <div class=\"text\">{{ele.name}}</div>\r\n <div class=\"number d-flex\">{{ele.value}}&nbsp;&nbsp;<span *ngIf=\"ele?.spanValue\"\r\n class=\"span-text d-flex\"><mat-icon>arrow_drop_up</mat-icon>\r\n {{ele.spanValue}}</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"property-tabs d-flex gap-10 mt-3\">\r\n <div class=\"tab\" *ngFor=\"let ele of tabs\" (click)=\"activeTab = ele.value\"\r\n [class.tabActive]=\"activeTab == ele.value\">{{ele.viewValue}}</div>\r\n </div> -->\r\n <div class=\"property-cards\">\r\n <ng-container *ngFor=\"let ele of propertyDetails\">\r\n <div class=\"property-card w-100 d-flex gap-10\" (click)=\"viewTab = true;selectedId = ele.propertyId\">\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide p-relative w-35 h-34\" data-bs-ride=\"carousel\" *ngIf=\"ele?.propertyImage\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let ele of ele?.propertyImage;let i = index\">\r\n <div class=\"carousel-item active\" [class.active]=\"i\" data-bs-interval=\"3000\">\r\n <img [src]=\"ele\" class=\"d-block w-100 height-30 br-10\" alt=\"property-image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-center p-15\">\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <ng-container *ngFor=\"let ele of ele.propertyImage;let i = index\">\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\"\r\n [attr.data-bs-slide-to]=\"i\" class=\"active additional-properties\"\r\n aria-current=\"true\" aria-label=\"Slide 1\"></button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"property-card w-35 d-flex gap-10\" *ngIf=\"!ele?.propertyImage\">\r\n <img src=\"https://upload.wikimedia.org/wikipedia/commons/1/14/No_Image_Available.jpg\" class=\"d-block w-100 height-30 br-10\" alt=\"property-image\">\r\n </div>\r\n <div class=\"right-section\">\r\n <div class=\"right-top d-flex justify-content-between\">\r\n <div class=\"head-left\">\r\n <div class=\"propertyname\">{{ele?.name ?? \"N/A\"}}</div>\r\n <div class=\"property-location\"><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\">{{ele?.propertyLocation ?? \"N/A\"}}</div>\r\n </div>\r\n </div>\r\n <!-- <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/637983c1739855715188Vector%2012%20%281%29.png\" class=\"curve-img\"> -->\r\n <div class=\"row right-bottom width\">\r\n <!-- <div class=\"row w-100\"> -->\r\n <div class=\"col-md-3 col-6 details\">\r\n <div class=\"top-detail text-center\">\u20B9 {{ele?.investedAmount ?? 0}}</div>\r\n <div class=\"bottom-detail text-center\">Invested Amount</div>\r\n </div>\r\n <div class=\"col-md-3 col-6 details\" [class.lst-div]=\"screenWidth < 475\">\r\n <div class=\"top-detail text-center\">{{ele?.totalSqFeetOwned ?? 0}}</div>\r\n <div class=\"bottom-detail text-center\">Sq.ft</div>\r\n </div>\r\n <div class=\"col-md-3 col-6 details\">\r\n <div class=\"top-detail text-center\">\u20B9 {{ele?.indicativeMarketValue ?? 0}}</div>\r\n <div class=\"bottom-detail text-center\">Current Value</div>\r\n </div>\r\n <div class=\"col-md-3 col-6 details lst-div\">\r\n <div class=\"top-detail text-center\" [ngClass]=\"{'text-profit': (ele?.currentAmount - ele?.investedAmount) > 0,\r\n 'text-loss': (ele?.currentAmount - ele?.investedAmount) < 0}\">\r\n \u20B9 {{formatAmount(ele?.currentAmount - ele?.investedAmount) ?? 0 }}</div>\r\n <div class=\"bottom-detail text-center\" [ngClass]=\"{'text-profit': (ele?.currentAmount - ele?.investedAmount) > 0,\r\n 'text-loss': (ele?.currentAmount - ele?.investedAmount) < 0}\">Profit/Loss</div>\r\n </div>\r\n <!-- lst-div -->\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</section>\r\n<section class=\"view-container\" *ngIf=\"viewTab\">\r\n <div class=\"back\">\r\n <div class=\"back-text d-flex align-items-center\">\r\n <p class=\"my-text mb-0 common-style\" (click)=\"viewTab = false\">My Properties</p><mat-icon\r\n class=\"my-text\">keyboard_arrow_right</mat-icon>\r\n <p class=\"prty-text mb-0 common-style\">Property Details</p>\r\n </div>\r\n </div>\r\n <simpo-property-view [id]=\"selectedId\"></simpo-property-view>\r\n</section>\r\n<section class=\"pageloader\" *ngIf=\"pageLoader\">\r\n <div class=\"property-cards\">\r\n <div *ngFor=\"let skel of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '30vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n\r\n</section>", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.gap-2{gap:2%!important}.cards{background:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.03);width:49%;padding:10px}.head{font-size:18px;font-weight:600;line-height:24px;color:#000;margin-bottom:10px}.mini-cards{display:grid;grid-template-columns:48% 48%;gap:3%}.mini-card{background:#fafafa;border-radius:7px;padding:10px 15px;margin-bottom:10px}.text{font-size:14px;line-height:24px;font-weight:500;color:#01161ecc;margin-bottom:10px}.number{font-size:24px;line-height:24px;font-weight:700;color:#01161e}.span-text{font-size:13px;line-height:24px;font-weight:700;color:#36b37e}.property-tab{display:flex;gap:10px;margin-top:15px}.gap-10{gap:10px}.tab{padding:10px;background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:8px;font-size:16px;line-height:24px;font-weight:500;color:#01161e;cursor:pointer}.tabActive{color:#f8a938!important;border:1px solid rgba(248,169,56,1)!important}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%}.height-30{height:35vh}.w-35{width:35%!important}.property-cards{overflow-y:scroll;height:81vh}.property-card{border-radius:10px!important;background:#fff;border:1px solid rgba(0,0,0,.04);margin-bottom:15px;position:relative;overflow:hidden;cursor:pointer}.br-10{border-radius:10px 0 0 10px}.right-section{width:65%}.property-name{font-size:16px;font-weight:600;line-height:21px;color:#000}.property-location{font-size:14px;font-weight:500;line-height:44px;color:#0000004d}.type{font-size:14px;font-weight:600;line-height:24px;color:#f8a938;background:#ffebcb;border-radius:8px 0 0 9px;padding:6px}.right-bottom{background:#219ebc;margin-left:5px}.details{border-right:1px solid rgba(255,255,255,.2);padding:8px;margin:8px 0}.top-detail{font-size:20px;font-weight:700;line-height:24px;color:#fff}.bottom-detail{font-size:13px;font-weight:500;line-height:24px;color:#ffffffb3}.head-left{padding:10px}.head-right{padding:10px 0}.lst-div{border:unset!important}.width{width:90%!important}.curve-img{position:absolute;width:33px;top:33%;left:31%}.p-15{padding:15px}.my-text{color:#00000080;cursor:pointer}.prty-text{color:#000}.common-style{font-size:14px;line-height:24px;font-weight:500}.grey-icon{filter:grayscale(100%) brightness(50%)}.text-profit{color:#4eeeaa}.text-loss{color:#f36f56}@media only screen and (max-width: 475px){.property-card{width:100%;display:flex;flex-direction:column;gap:10px}.carousel{position:unset;width:100%!important;padding:10px}.right-section{width:100%}.head-right{display:none}.propertyName{position:relative;bottom:50px}.h-34{height:32vh}.right-bottom{border-radius:10px}.propertyname{font-size:19px;font-weight:600}.property-location{font-size:20px}.property-cards{height:100%}.width{width:95%!important}.br-10{border-radius:10px}.height-30{height:32vh}}\n"] }]
6045
6090
  }], ctorParameters: () => [{ type: RestService }], propDecorators: { getScreenSize: [{
6046
6091
  type: HostListener,
6047
6092
  args: ["window: resize", ["$event"]]
@@ -6296,6 +6341,8 @@ class ProfileSectionComponent {
6296
6341
  constructor(restService) {
6297
6342
  this.restService = restService;
6298
6343
  this.selectedPanel = "PORTFOLIO";
6344
+ this.skelLoader = true;
6345
+ this.skelArray = Array(2);
6299
6346
  this.sidePanelTabs = [
6300
6347
  { value: "PORTFOLIO", viewValue: "My Portfolio" },
6301
6348
  { value: "PROPERTIES", viewValue: "My Properties" },
@@ -6310,8 +6357,10 @@ class ProfileSectionComponent {
6310
6357
  this.getInvestorDetails();
6311
6358
  }
6312
6359
  getInvestorDetails() {
6360
+ this.skelLoader = true;
6313
6361
  this.restService.getInvesterById().subscribe((res) => {
6314
6362
  this.investorDetails = res.message;
6363
+ this.skelLoader = false;
6315
6364
  });
6316
6365
  }
6317
6366
  getInitials() {
@@ -6320,13 +6369,13 @@ class ProfileSectionComponent {
6320
6369
  return initials;
6321
6370
  }
6322
6371
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProfileSectionComponent, deps: [{ token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
6323
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProfileSectionComponent, isStandalone: true, selector: "simpo-profile-section", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"main-container d-flex justify-content-center\">\r\n <div class=\"side-panel\">\r\n <div class=\"details\">\r\n <div class=\"left-right d-flex align-items-center gap-10\">\r\n <div class=\"logo left w-15\">{{ getInitials() }}</div><div class=\"right name w-85\">{{investorDetails?.fullName || 'N/A'}}</div>\r\n </div>\r\n <div class=\"left-right d-flex align-items-center gap-10\">\r\n <div class=\"left w-15\"><mat-icon class=\"d-flex align-items-center justify-content-center f-18\"> phone</mat-icon>\r\n </div><div class=\"right w-80\">{{investorDetails?.phoneNumber || 'N/A'}}</div>\r\n </div>\r\n <div class=\"left-right d-flex align-items-center gap-10\">\r\n <div class=\"left w-15\"><mat-icon class=\" d-flex align-items-center justify-content-center f-18\"> email</mat-icon>\r\n </div><div class=\"right w-80\">{{investorDetails?.emailId || 'N/A'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"tab-section\">\r\n <div class=\"tabs cursor-pointer\" *ngFor=\"let ele of sidePanelTabs\" (click)=\"selectedPanel = ele.value\" [class.activeTab]=\"selectedPanel == ele.value\">\r\n {{ele.viewValue}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"display-section\">\r\n <ng-container *ngIf=\"selectedPanel == 'KYC'\">\r\n <simpo-kyc-details></simpo-kyc-details>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'PORTFOLIO'\">\r\n <simpo-portfolio></simpo-portfolio>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'PROPERTIES'\">\r\n <simpo-properties></simpo-properties>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'ORDERS'\">\r\n <simpo-my-orders></simpo-my-orders>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'DOCUMENTS'\">\r\n <simpo-my-documents></simpo-my-documents>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'STATEMENT'\">\r\n <simpo-my-statement></simpo-my-statement>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'HELP'\">\r\n <simpo-need-help></simpo-need-help>\r\n </ng-container>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.main-container{height:100vh;width:100%;padding:10px 0;gap:15px;background:#f9fbff}.side-panel{width:18%;background:#fff;border:2px solid rgba(241,246,255,1);border-radius:10px}.display-section{width:60%}.w-15{width:15%}.w-85{width:85%}.cursor-pointer{cursor:pointer}.details{background:#19a6c6;border-radius:10px;padding:10px;margin:15px}.left-right{gap:10px;margin-bottom:10px}.logo{background:#e6f0ff;border-radius:50%;font-size:14px;text-align:center;font-weight:600;line-height:24px;padding:3px;color:#405071!important}.name{font-size:14px;font-weight:600;line-height:24px;color:#fff!important}.f-18{font-size:18px}.gap-10{gap:10px}.left{color:#fffc}.right{font-weight:500;font-size:14px;line-height:24px;color:#fffc}.tab-section{margin-top:15px}.tabs{margin-bottom:25px;font-weight:500;font-size:16px;line-height:24px;color:#01161e;margin-left:8px}.activeTab{border-left:8px solid rgba(248,169,56,1);font-weight:700!important;color:#219ebc;margin-right:15px;background:#f1f3f7;padding:10px;border-radius:0 6px 6px 0;margin-left:unset}@media only screen and (max-width: 475px){.display-section{width:95%}}\n"], dependencies: [{ kind: "component", type: PortfolioComponent, selector: "simpo-portfolio" }, { kind: "component", type: PropertiesComponent, selector: "simpo-properties" }, { kind: "component", type: MyDocumentsComponent, selector: "simpo-my-documents" }, { kind: "component", type: MyOrdersComponent, selector: "simpo-my-orders" }, { kind: "component", type: MyStatementComponent, selector: "simpo-my-statement" }, { kind: "component", type: NeedHelpComponent, selector: "simpo-need-help" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: KycDetailsComponent, selector: "simpo-kyc-details" }] }); }
6372
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProfileSectionComponent, isStandalone: true, selector: "simpo-profile-section", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"main-container d-flex justify-content-center\">\r\n <div class=\"side-panel\">\r\n <div class=\"details\">\r\n <div class=\"left-right d-flex align-items-center gap-10\" *ngIf=\"!skelLoader\">\r\n <div class=\"logo left w-15\">{{ getInitials() }}</div><div class=\"right name w-85\">{{investorDetails?.fullName || 'N/A'}}</div>\r\n </div>\r\n <div class=\"left-right d-flex align-items-center gap-10\" *ngIf=\"!skelLoader\">\r\n <div class=\"left w-15\"><mat-icon class=\"d-flex align-items-center justify-content-center f-18\"> phone</mat-icon>\r\n </div><div class=\"right w-80\">{{investorDetails?.phoneNumber || 'N/A'}}</div>\r\n </div>\r\n <div class=\"left-right d-flex align-items-center gap-10\" *ngIf=\"!skelLoader\">\r\n <div class=\"left w-15\"><mat-icon class=\" d-flex align-items-center justify-content-center f-18\"> email</mat-icon>\r\n </div><div class=\"right w-80\">{{investorDetails?.emailId || 'N/A'}}</div>\r\n </div>\r\n <div 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>\r\n \r\n <div class=\"tab-section\">\r\n <div class=\"tabs cursor-pointer\" *ngFor=\"let ele of sidePanelTabs\" (click)=\"selectedPanel = ele.value\" [class.activeTab]=\"selectedPanel == ele.value\">\r\n {{ele.viewValue}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"display-section\">\r\n <ng-container *ngIf=\"selectedPanel == 'KYC'\">\r\n <simpo-kyc-details></simpo-kyc-details>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'PORTFOLIO'\">\r\n <simpo-portfolio></simpo-portfolio>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'PROPERTIES'\">\r\n <simpo-properties></simpo-properties>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'ORDERS'\">\r\n <simpo-my-orders></simpo-my-orders>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'DOCUMENTS'\">\r\n <simpo-my-documents></simpo-my-documents>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'STATEMENT'\">\r\n <simpo-my-statement></simpo-my-statement>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'HELP'\">\r\n <simpo-need-help></simpo-need-help>\r\n </ng-container>\r\n </div>\r\n</section>\r\n<ng-template #skeleton>\r\n <div class=\"wrapper-1\" >\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '15%',\r\n 'border-radius': '50%',\r\n height: '4vh',\r\n 'margin-bottom': '5px',\r\n 'margin-right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '5px',\r\n height: '3vh',\r\n 'margin-bottom': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n </div> \r\n <div class=\"wrapper\" *ngFor=\"let item of skelArray\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n 'border-radius': '5px',\r\n height: '3vh',\r\n 'margin-bottom': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div> \r\n</ng-template>\r\n", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.main-container{height:100vh;width:100%;padding:10px 0;gap:15px;background:#f9fbff}.side-panel{width:18%;background:#fff;border:2px solid rgba(241,246,255,1);border-radius:10px}.display-section{width:60%}.w-15{width:15%}.w-85{width:85%}.cursor-pointer{cursor:pointer}.details{background:#19a6c6;border-radius:10px;padding:10px;margin:15px}.left-right{gap:10px;margin-bottom:10px}.logo{background:#e6f0ff;border-radius:50%;font-size:14px;text-align:center;font-weight:600;line-height:24px;padding:3px;color:#405071!important}.name{font-size:14px;font-weight:600;line-height:24px;color:#fff!important}.f-18{font-size:18px}.gap-10{gap:10px}.left{color:#fffc}.right{font-weight:500;font-size:14px;line-height:24px;color:#fffc}.tab-section{margin-top:15px}.tabs{margin-bottom:25px;font-weight:500;font-size:16px;line-height:24px;color:#01161e;margin-left:8px}.activeTab{border-left:8px solid rgba(248,169,56,1);font-weight:700!important;color:#219ebc;margin-right:15px;background:#f1f3f7;padding:10px;border-radius:0 6px 6px 0;margin-left:unset}@media only screen and (max-width: 475px){.display-section{width:95%}}\n"], dependencies: [{ kind: "component", type: PortfolioComponent, selector: "simpo-portfolio" }, { kind: "component", type: PropertiesComponent, selector: "simpo-properties" }, { kind: "component", type: MyDocumentsComponent, selector: "simpo-my-documents" }, { kind: "component", type: MyOrdersComponent, selector: "simpo-my-orders" }, { kind: "component", type: MyStatementComponent, selector: "simpo-my-statement" }, { kind: "component", type: NeedHelpComponent, selector: "simpo-need-help" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: KycDetailsComponent, selector: "simpo-kyc-details" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i3.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
6324
6373
  }
6325
6374
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProfileSectionComponent, decorators: [{
6326
6375
  type: Component,
6327
6376
  args: [{ selector: 'simpo-profile-section', standalone: true, imports: [PortfolioComponent, PropertiesComponent, MyDocumentsComponent, MyOrdersComponent, MyStatementComponent, NeedHelpComponent, MatIcon, CommonModule,
6328
- KycDetailsComponent
6329
- ], template: "<section class=\"main-container d-flex justify-content-center\">\r\n <div class=\"side-panel\">\r\n <div class=\"details\">\r\n <div class=\"left-right d-flex align-items-center gap-10\">\r\n <div class=\"logo left w-15\">{{ getInitials() }}</div><div class=\"right name w-85\">{{investorDetails?.fullName || 'N/A'}}</div>\r\n </div>\r\n <div class=\"left-right d-flex align-items-center gap-10\">\r\n <div class=\"left w-15\"><mat-icon class=\"d-flex align-items-center justify-content-center f-18\"> phone</mat-icon>\r\n </div><div class=\"right w-80\">{{investorDetails?.phoneNumber || 'N/A'}}</div>\r\n </div>\r\n <div class=\"left-right d-flex align-items-center gap-10\">\r\n <div class=\"left w-15\"><mat-icon class=\" d-flex align-items-center justify-content-center f-18\"> email</mat-icon>\r\n </div><div class=\"right w-80\">{{investorDetails?.emailId || 'N/A'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"tab-section\">\r\n <div class=\"tabs cursor-pointer\" *ngFor=\"let ele of sidePanelTabs\" (click)=\"selectedPanel = ele.value\" [class.activeTab]=\"selectedPanel == ele.value\">\r\n {{ele.viewValue}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"display-section\">\r\n <ng-container *ngIf=\"selectedPanel == 'KYC'\">\r\n <simpo-kyc-details></simpo-kyc-details>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'PORTFOLIO'\">\r\n <simpo-portfolio></simpo-portfolio>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'PROPERTIES'\">\r\n <simpo-properties></simpo-properties>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'ORDERS'\">\r\n <simpo-my-orders></simpo-my-orders>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'DOCUMENTS'\">\r\n <simpo-my-documents></simpo-my-documents>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'STATEMENT'\">\r\n <simpo-my-statement></simpo-my-statement>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'HELP'\">\r\n <simpo-need-help></simpo-need-help>\r\n </ng-container>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.main-container{height:100vh;width:100%;padding:10px 0;gap:15px;background:#f9fbff}.side-panel{width:18%;background:#fff;border:2px solid rgba(241,246,255,1);border-radius:10px}.display-section{width:60%}.w-15{width:15%}.w-85{width:85%}.cursor-pointer{cursor:pointer}.details{background:#19a6c6;border-radius:10px;padding:10px;margin:15px}.left-right{gap:10px;margin-bottom:10px}.logo{background:#e6f0ff;border-radius:50%;font-size:14px;text-align:center;font-weight:600;line-height:24px;padding:3px;color:#405071!important}.name{font-size:14px;font-weight:600;line-height:24px;color:#fff!important}.f-18{font-size:18px}.gap-10{gap:10px}.left{color:#fffc}.right{font-weight:500;font-size:14px;line-height:24px;color:#fffc}.tab-section{margin-top:15px}.tabs{margin-bottom:25px;font-weight:500;font-size:16px;line-height:24px;color:#01161e;margin-left:8px}.activeTab{border-left:8px solid rgba(248,169,56,1);font-weight:700!important;color:#219ebc;margin-right:15px;background:#f1f3f7;padding:10px;border-radius:0 6px 6px 0;margin-left:unset}@media only screen and (max-width: 475px){.display-section{width:95%}}\n"] }]
6377
+ KycDetailsComponent, NgxSkeletonLoaderModule
6378
+ ], template: "<section class=\"main-container d-flex justify-content-center\">\r\n <div class=\"side-panel\">\r\n <div class=\"details\">\r\n <div class=\"left-right d-flex align-items-center gap-10\" *ngIf=\"!skelLoader\">\r\n <div class=\"logo left w-15\">{{ getInitials() }}</div><div class=\"right name w-85\">{{investorDetails?.fullName || 'N/A'}}</div>\r\n </div>\r\n <div class=\"left-right d-flex align-items-center gap-10\" *ngIf=\"!skelLoader\">\r\n <div class=\"left w-15\"><mat-icon class=\"d-flex align-items-center justify-content-center f-18\"> phone</mat-icon>\r\n </div><div class=\"right w-80\">{{investorDetails?.phoneNumber || 'N/A'}}</div>\r\n </div>\r\n <div class=\"left-right d-flex align-items-center gap-10\" *ngIf=\"!skelLoader\">\r\n <div class=\"left w-15\"><mat-icon class=\" d-flex align-items-center justify-content-center f-18\"> email</mat-icon>\r\n </div><div class=\"right w-80\">{{investorDetails?.emailId || 'N/A'}}</div>\r\n </div>\r\n <div 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>\r\n \r\n <div class=\"tab-section\">\r\n <div class=\"tabs cursor-pointer\" *ngFor=\"let ele of sidePanelTabs\" (click)=\"selectedPanel = ele.value\" [class.activeTab]=\"selectedPanel == ele.value\">\r\n {{ele.viewValue}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"display-section\">\r\n <ng-container *ngIf=\"selectedPanel == 'KYC'\">\r\n <simpo-kyc-details></simpo-kyc-details>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'PORTFOLIO'\">\r\n <simpo-portfolio></simpo-portfolio>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'PROPERTIES'\">\r\n <simpo-properties></simpo-properties>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'ORDERS'\">\r\n <simpo-my-orders></simpo-my-orders>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'DOCUMENTS'\">\r\n <simpo-my-documents></simpo-my-documents>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'STATEMENT'\">\r\n <simpo-my-statement></simpo-my-statement>\r\n </ng-container>\r\n <ng-container *ngIf=\"selectedPanel == 'HELP'\">\r\n <simpo-need-help></simpo-need-help>\r\n </ng-container>\r\n </div>\r\n</section>\r\n<ng-template #skeleton>\r\n <div class=\"wrapper-1\" >\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '15%',\r\n 'border-radius': '50%',\r\n height: '4vh',\r\n 'margin-bottom': '5px',\r\n 'margin-right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '5px',\r\n height: '3vh',\r\n 'margin-bottom': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n \r\n </div> \r\n <div class=\"wrapper\" *ngFor=\"let item of skelArray\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n 'border-radius': '5px',\r\n height: '3vh',\r\n 'margin-bottom': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div> \r\n</ng-template>\r\n", styles: ["*{font-family:DM Sans}mat-icon{font-family:Material Icons!important}.main-container{height:100vh;width:100%;padding:10px 0;gap:15px;background:#f9fbff}.side-panel{width:18%;background:#fff;border:2px solid rgba(241,246,255,1);border-radius:10px}.display-section{width:60%}.w-15{width:15%}.w-85{width:85%}.cursor-pointer{cursor:pointer}.details{background:#19a6c6;border-radius:10px;padding:10px;margin:15px}.left-right{gap:10px;margin-bottom:10px}.logo{background:#e6f0ff;border-radius:50%;font-size:14px;text-align:center;font-weight:600;line-height:24px;padding:3px;color:#405071!important}.name{font-size:14px;font-weight:600;line-height:24px;color:#fff!important}.f-18{font-size:18px}.gap-10{gap:10px}.left{color:#fffc}.right{font-weight:500;font-size:14px;line-height:24px;color:#fffc}.tab-section{margin-top:15px}.tabs{margin-bottom:25px;font-weight:500;font-size:16px;line-height:24px;color:#01161e;margin-left:8px}.activeTab{border-left:8px solid rgba(248,169,56,1);font-weight:700!important;color:#219ebc;margin-right:15px;background:#f1f3f7;padding:10px;border-radius:0 6px 6px 0;margin-left:unset}@media only screen and (max-width: 475px){.display-section{width:95%}}\n"] }]
6330
6379
  }], ctorParameters: () => [{ type: RestService }], propDecorators: { data: [{
6331
6380
  type: Input
6332
6381
  }] } });
@@ -10285,6 +10334,7 @@ class PropertyDetailComponent {
10285
10334
  this.router = router;
10286
10335
  this.matDialog = matDialog;
10287
10336
  this.messageService = messageService;
10337
+ this.buttonLoader = false;
10288
10338
  this.propertyId = '';
10289
10339
  this.propertyDetails = {
10290
10340
  "propertyId": 10,
@@ -10383,28 +10433,40 @@ class PropertyDetailComponent {
10383
10433
  return true;
10384
10434
  }
10385
10435
  getKycDetails() {
10386
- this.kycDetailsSubscription = this.restService.getKycDetails().subscribe((res) => {
10387
- if (res?.message?.panVerified === 'VALID' && res?.message?.aadhaarVerified === 'VALID') {
10388
- if (!this.checkMinInvestment())
10389
- return;
10390
- this.matDialog.open(PaymentConfirmationComponent, { panelClass: 'payment-confirmation', data: { details: this.propertyDetails, totalArea: this.noOfSqft } });
10391
- }
10392
- else {
10436
+ this.buttonLoader = true;
10437
+ this.kycDetailsSubscription = this.restService.getKycDetails().subscribe({
10438
+ next: (res) => {
10439
+ if (res?.message?.panVerified === 'VALID' && res?.message?.aadhaarVerified === 'VALID') {
10440
+ if (!this.checkMinInvestment()) {
10441
+ this.buttonLoader = false;
10442
+ return;
10443
+ }
10444
+ this.matDialog.open(PaymentConfirmationComponent, {
10445
+ panelClass: 'payment-confirmation',
10446
+ data: { details: this.propertyDetails, totalArea: this.noOfSqft }
10447
+ });
10448
+ this.buttonLoader = false;
10449
+ }
10450
+ else {
10451
+ this.matDialog.open(KycDetailsComponent, { panelClass: "login-signup" });
10452
+ this.buttonLoader = false;
10453
+ }
10454
+ },
10455
+ error: (err) => {
10456
+ this.buttonLoader = false;
10393
10457
  this.matDialog.open(KycDetailsComponent, { panelClass: "login-signup" });
10394
10458
  }
10395
- }, () => {
10396
- this.matDialog.open(KycDetailsComponent, { panelClass: "login-signup" });
10397
10459
  });
10398
10460
  }
10399
10461
  get isMobile() {
10400
10462
  return window.innerWidth <= 475;
10401
10463
  }
10402
10464
  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"] }] }); }
10465
+ 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 <button class=\"buy\" (click)=\"purchaseProperty()\" [disabled]=\"buttonLoader\">\r\n <span *ngIf=\"buttonLoader\">\r\n <i class=\"fas fa-circle-notch fa-spin\"></i>&nbsp;Loading\r\n </span>\r\n <span *ngIf=\"!buttonLoader\">Buy SQFT</span>\r\n </button>\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
10466
  }
10405
10467
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyDetailComponent, decorators: [{
10406
10468
  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"] }]
10469
+ 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 <button class=\"buy\" (click)=\"purchaseProperty()\" [disabled]=\"buttonLoader\">\r\n <span *ngIf=\"buttonLoader\">\r\n <i class=\"fas fa-circle-notch fa-spin\"></i>&nbsp;Loading\r\n </span>\r\n <span *ngIf=\"!buttonLoader\">Buy SQFT</span>\r\n </button>\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
10470
  }], ctorParameters: () => [{ type: RestService }, { type: i2$2.ActivatedRoute }, { type: i2$2.Router }, { type: i5.MatDialog }, { type: i4$1.MessageService }], propDecorators: { data: [{
10409
10471
  type: Input
10410
10472
  }] } });
@@ -10504,7 +10566,7 @@ class SignupSigninComponent extends BaseSection {
10504
10566
  }
10505
10567
  verifyPhoneEmail() {
10506
10568
  this.showWarning = false;
10507
- if (this.isValidEmail(this.investor.emailId) && this.investor.phoneNumber.length == 10) {
10569
+ if (this.isValidEmail(this.investor.emailId) && this.isValidPhone(this.investor.phoneNumber)) {
10508
10570
  this.restService.verifyEmailPhone(this.investor.phoneNumber, this.investor.emailId).subscribe({
10509
10571
  next: (res) => {
10510
10572
  this.showWarning = false;
@@ -10521,15 +10583,13 @@ class SignupSigninComponent extends BaseSection {
10521
10583
  }
10522
10584
  }
10523
10585
  validEmail() {
10524
- if (!this.isValidEmail(this.investor.emailId)) {
10586
+ if (!this.isValidEmail(this.investor.emailId))
10525
10587
  this.invalidEmail = true;
10526
- }
10527
- else {
10588
+ else
10528
10589
  this.invalidEmail = false;
10529
- }
10530
10590
  }
10531
10591
  validPhone() {
10532
- if (this.investor.phoneNumber.length != 10)
10592
+ if (!this.isValidPhone(this.investor.phoneNumber))
10533
10593
  this.invalidPhone = true;
10534
10594
  else
10535
10595
  this.invalidPhone = false;
@@ -10548,6 +10608,7 @@ class SignupSigninComponent extends BaseSection {
10548
10608
  detail: 'Sign up Successfully'
10549
10609
  });
10550
10610
  this.investor.password = "";
10611
+ this.otpArray = new Array(4).fill('');
10551
10612
  this.currentPage = 'LOGIN';
10552
10613
  this.buttonLoader = false;
10553
10614
  },
@@ -10565,8 +10626,16 @@ class SignupSigninComponent extends BaseSection {
10565
10626
  if (!this.isValidEmail(this.investor.emailId)) {
10566
10627
  this.messageService.add({
10567
10628
  severity: 'error',
10568
- summary: this.currentPage == 'SIGN_UP' ? "Sign Up" : this.currentPage == 'FORGOT_PASSWORD' ? "Forgot Password" : "Login",
10569
- detail: 'Invaild Email'
10629
+ summary: "Sign Up",
10630
+ detail: 'Please Enter Valid Email Address'
10631
+ });
10632
+ return;
10633
+ }
10634
+ if (!this.isValidPhone(this.investor.phoneNumber)) {
10635
+ this.messageService.add({
10636
+ severity: 'error',
10637
+ summary: "Sign Up",
10638
+ detail: 'Please Enter Valid Phone Number'
10570
10639
  });
10571
10640
  return;
10572
10641
  }
@@ -10576,7 +10645,7 @@ class SignupSigninComponent extends BaseSection {
10576
10645
  this.messageService.add({
10577
10646
  severity: 'success',
10578
10647
  summary: 'OTP',
10579
- detail: 'OTP Sent Successfully'
10648
+ detail: `OTP Sent to this ${this.investor.emailId}`
10580
10649
  });
10581
10650
  this.currentPage = 'OTP_VERIFY';
10582
10651
  this.buttonLoader = false;
@@ -10592,19 +10661,11 @@ class SignupSigninComponent extends BaseSection {
10592
10661
  });
10593
10662
  }
10594
10663
  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
10664
  if (!this.isValidEmail(this.loginEmail)) {
10604
10665
  this.messageService.add({
10605
10666
  severity: 'error',
10606
- summary: 'Sign Up',
10607
- detail: 'Invaild Credentials'
10667
+ summary: 'Sign In',
10668
+ detail: 'Please enter valid email'
10608
10669
  });
10609
10670
  return;
10610
10671
  }
@@ -10647,7 +10708,7 @@ class SignupSigninComponent extends BaseSection {
10647
10708
  if (!this.isValidEmail(this.loginEmail)) {
10648
10709
  this.messageService.add({
10649
10710
  severity: 'error',
10650
- summary: 'Sign Up',
10711
+ summary: 'Sign In',
10651
10712
  detail: 'Invaild Email Address'
10652
10713
  });
10653
10714
  return;
@@ -10677,6 +10738,14 @@ class SignupSigninComponent extends BaseSection {
10677
10738
  });
10678
10739
  }
10679
10740
  verifyOtp() {
10741
+ if (!this.isValidEmail(this.loginEmail)) {
10742
+ this.messageService.add({
10743
+ severity: 'error',
10744
+ summary: 'Sign In',
10745
+ detail: 'Invaild Email Address'
10746
+ });
10747
+ return;
10748
+ }
10680
10749
  this.buttonLoader = true;
10681
10750
  this.logInOtp = '';
10682
10751
  this.loginOtpArray.forEach((otp) => {
@@ -10701,6 +10770,7 @@ class SignupSigninComponent extends BaseSection {
10701
10770
  summary: 'Log In',
10702
10771
  detail: 'Logged in successfully'
10703
10772
  });
10773
+ this.otpArray = new Array(4).fill('');
10704
10774
  localStorage.setItem(StorageKeys.INVESTOR_ID, res.investorId);
10705
10775
  if (this.propertyId) {
10706
10776
  this.router.navigate(['details'], { queryParams: { id: this.propertyId } });
@@ -10724,6 +10794,10 @@ class SignupSigninComponent extends BaseSection {
10724
10794
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
10725
10795
  return emailRegex.test(email.trim());
10726
10796
  }
10797
+ isValidPhone(phno) {
10798
+ const phoneRegex = /^[6789]\d{9}/;
10799
+ return phoneRegex.test(phno.trim());
10800
+ }
10727
10801
  getKycDetails() {
10728
10802
  this.kycDetailsSubscripition = this.restService.getKycDetails().subscribe((res) => {
10729
10803
  if (!(res?.message?.panVerified === 'VALID' && res?.message?.aadhaarVerified === 'VALID')) {
@@ -10743,7 +10817,6 @@ class SignupSigninComponent extends BaseSection {
10743
10817
  this.buttonLoader = true;
10744
10818
  let payload = {
10745
10819
  "email": this.loginEmail,
10746
- "otp": this.logInOtp,
10747
10820
  "newPassword": this.newPassword,
10748
10821
  "confirmPassword": this.reEnteredPassword
10749
10822
  };
@@ -10781,7 +10854,7 @@ class SignupSigninComponent extends BaseSection {
10781
10854
  });
10782
10855
  }
10783
10856
  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&#64;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>&nbsp;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>&nbsp;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>&nbsp;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:
10857
+ 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&#64;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>&nbsp;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>&nbsp;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>&nbsp;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
10858
  //Directives
10786
10859
  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
10860
  }
@@ -10800,7 +10873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
10800
10873
  AnimationDirective,
10801
10874
  CornerDirective,
10802
10875
  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&#64;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>&nbsp;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>&nbsp;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>&nbsp;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"] }]
10876
+ ], 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&#64;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>&nbsp;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>&nbsp;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>&nbsp;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
10877
  }], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i4$1.MessageService }, { type: i5.MatDialog }], propDecorators: { data: [{
10805
10878
  type: Input
10806
10879
  }], index: [{
@@ -12005,39 +12078,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
12005
12078
  type: Output
12006
12079
  }] } });
12007
12080
 
12008
- class FormateAmount {
12009
- transform(value, system = "IND") {
12010
- if (system == "IND") {
12011
- if (Number(value) >= 10000000 /* AMOUNT.CRORE */) {
12012
- return (Number(value) / 10000000 /* AMOUNT.CRORE */) + 'cr';
12013
- }
12014
- else if (Number(value) >= 100000 /* AMOUNT.LAKHS */) {
12015
- return (Number(value) / 100000 /* AMOUNT.LAKHS */) + 'lk';
12016
- }
12017
- else {
12018
- return value.toString();
12019
- }
12020
- }
12021
- else {
12022
- if (Number(value) >= 1000000 /* AMOUNT.MILLION */) {
12023
- return (Number(value) / 1000000 /* AMOUNT.MILLION */) + 'mn';
12024
- }
12025
- else {
12026
- return value.toString();
12027
- }
12028
- }
12029
- }
12030
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FormateAmount, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
12031
- static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.4", ngImport: i0, type: FormateAmount, isStandalone: true, name: "formateAmount" }); }
12032
- }
12033
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FormateAmount, decorators: [{
12034
- type: Pipe,
12035
- args: [{
12036
- standalone: true,
12037
- name: 'formateAmount',
12038
- }]
12039
- }] });
12040
-
12041
12081
  class ProductListComponent extends BaseSection {
12042
12082
  onWindowScroll(event) {
12043
12083
  this.scrollingValue = window.pageYOffset || document.documentElement.scrollTop;