simpo-component-library 3.0.33 → 3.0.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/elements/payment-confirmation/payment-confirmation.component.mjs +14 -6
- package/esm2022/lib/elements/portfolio/portfolio.component.mjs +8 -3
- package/esm2022/lib/elements/properties/properties.component.mjs +4 -3
- package/esm2022/lib/elements/property-view/property-view.component.mjs +3 -3
- package/esm2022/lib/pipes/amount.pipe.mjs +2 -2
- package/esm2022/lib/sections/kyc-details/kyc-details.component.mjs +2 -2
- package/esm2022/lib/sections/profile-section/profile-section.component.mjs +10 -4
- package/esm2022/lib/sections/property-detail/property-detail.component.mjs +30 -12
- package/esm2022/lib/sections/signup-signin/signup-signin.component.mjs +10 -9
- package/fesm2022/simpo-component-library.mjs +102 -67
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/directive/background-directive.d.ts +1 -1
- package/lib/directive/button-directive.directive.d.ts +1 -1
- package/lib/directive/color.directive.d.ts +1 -1
- package/lib/elements/payment-confirmation/payment-confirmation.component.d.ts +1 -0
- package/lib/elements/portfolio/portfolio.component.d.ts +2 -0
- package/lib/sections/banner-carousel/banner-carousel.component.d.ts +2 -2
- package/lib/sections/carousel-banner/carousel-banner.component.d.ts +1 -1
- package/lib/sections/image-section/image-section.component.d.ts +2 -2
- package/lib/sections/logo-showcase/logo-showcase.component.d.ts +1 -1
- package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
- package/lib/sections/profile-section/profile-section.component.d.ts +2 -0
- package/lib/sections/property-detail/property-detail.component.d.ts +2 -0
- package/package.json +1 -1
- package/simpo-component-library-3.0.35.tgz +0 -0
- package/simpo-component-library-3.0.33.tgz +0 -0
|
@@ -1997,7 +1997,7 @@ class PaymentConfirmationComponent {
|
|
|
1997
1997
|
investorProperty: {
|
|
1998
1998
|
investorId: localStorage.getItem(StorageKeys.INVESTOR_ID),
|
|
1999
1999
|
propertyId: 0,
|
|
2000
|
-
sqFeetArea:
|
|
2000
|
+
sqFeetArea: 1,
|
|
2001
2001
|
totalSqFeetAmount: 0,
|
|
2002
2002
|
totalGstApplied: 0,
|
|
2003
2003
|
buyingPrice: 0,
|
|
@@ -2029,8 +2029,10 @@ class PaymentConfirmationComponent {
|
|
|
2029
2029
|
this.addOrRemoveProperty();
|
|
2030
2030
|
}
|
|
2031
2031
|
removeSqFeet() {
|
|
2032
|
-
this.tokenRequest.investorProperty.sqFeetArea
|
|
2033
|
-
|
|
2032
|
+
if (this.tokenRequest.investorProperty.sqFeetArea > 1) {
|
|
2033
|
+
this.tokenRequest.investorProperty.sqFeetArea--;
|
|
2034
|
+
this.addOrRemoveProperty();
|
|
2035
|
+
}
|
|
2034
2036
|
}
|
|
2035
2037
|
purchaseProperty() {
|
|
2036
2038
|
this.tokenRequest.investorProperty.buyingPrice = Number(Number(this.tokenRequest.investorProperty.totalSqFeetAmount + this.tokenRequest.investorProperty.totalGstApplied).toFixed(2));
|
|
@@ -2046,15 +2048,21 @@ class PaymentConfirmationComponent {
|
|
|
2046
2048
|
this.tokenRequest.mobile = this.investorDetails.phoneNumber;
|
|
2047
2049
|
});
|
|
2048
2050
|
}
|
|
2051
|
+
preventMinus(event) {
|
|
2052
|
+
if (event.key === '-') {
|
|
2053
|
+
event.preventDefault();
|
|
2054
|
+
this.tokenRequest.investorProperty.sqFeetArea = 1;
|
|
2055
|
+
}
|
|
2056
|
+
}
|
|
2049
2057
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PaymentConfirmationComponent, deps: [{ token: i5.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2050
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PaymentConfirmationComponent, isStandalone: true, selector: "simpo-payment-confirmation", ngImport: i0, template: "<section>\r\n <div class=\"header\">\r\n <p>Payment Confirmation</p>\r\n <mat-icon (click)=\"close()\">close</mat-icon>\r\n </div>\r\n\r\n <div class=\"body\">\r\n <div class=\"property\">\r\n <div class=\"left-side\">\r\n <img [src]=\"propertyDetails
|
|
2058
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PaymentConfirmationComponent, isStandalone: true, selector: "simpo-payment-confirmation", ngImport: i0, template: "<section>\r\n <div class=\"header\">\r\n <p>Payment Confirmation</p>\r\n <mat-icon (click)=\"close()\">close</mat-icon>\r\n </div>\r\n\r\n <div class=\"body\">\r\n <div class=\"property\">\r\n <div class=\"left-side\">\r\n <img [src]=\"propertyDetails?.imgUrl[0]\"\r\n alt=\"No Image Available\">\r\n <div>\r\n <p class=\"property-name\">{{propertyDetails?.name ?? \"N/A\"}}</p>\r\n <p class=\"location\">{{propertyDetails?.location ?? \"N/A\"}}</p>\r\n </div>\r\n </div>\r\n <div class=\"right-side\">\r\n <p class=\"Price-text\">Price/Sq.ft</p>\r\n <p class=\"perSqFtAmount\">\u20B9 {{propertyDetails?.financeDetails?.pricePerSqFeet ?? 0}}/Sq.ft</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"price-detail\">\r\n <div class=\"d-flex justify-space mb-30\">\r\n <div class=\"price-left-side\">\r\n Quantity\r\n </div>\r\n <div class=\"price-right-side\">\r\n <div class=\"quantity\">\r\n <div class=\"remove\" (click)=\"removeSqFeet()\"><mat-icon>remove</mat-icon></div>\r\n <input type=\"number\" [(ngModel)]=\"tokenRequest.investorProperty.sqFeetArea\" (ngModelChange)=\"addOrRemoveProperty()\" (keyup)=\"preventMinus($event)\">\r\n <div class=\"add\" (click)=\"addSqFeet()\"><mat-icon>add</mat-icon></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-space mb-15\">\r\n <div class=\"price-left-side\">\r\n Total Price\r\n </div>\r\n <div class=\"price-right-side\">\r\n \u20B9{{tokenRequest?.investorProperty?.totalSqFeetAmount ?? \"N/A\"}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-space mb-15\">\r\n <div class=\"price-left-side\">\r\n Property Tax\r\n </div>\r\n <div class=\"price-text\">\r\n \u20B9 0\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-space mb-15\">\r\n <div class=\"price-left-side\">\r\n GST(28%)\r\n </div>\r\n <div class=\"price-text\">\r\n \u20B9 {{tokenRequest?.investorProperty?.totalGstApplied ?? \"0\"}}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"footer\">\r\n <div class=\"d-flex justify-space mb-15\">\r\n <div class=\"price-left-side\">\r\n Total Payable\r\n </div>\r\n <div class=\"price-text\">\r\n \u20B9 {{tokenRequest.investorProperty.totalSqFeetAmount + tokenRequest.investorProperty.totalGstApplied}}\r\n </div>\r\n </div>\r\n <button class=\"buy-btn\" (click)=\"purchaseProperty()\">Buy Now</button>\r\n </div>\r\n </div>\r\n\r\n</section>\r\n", styles: [".header{display:flex;height:60px;justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px;border-bottom:1px solid rgba(14,35,60,.16)}.header P{font-size:20px;font-weight:700;font-family:DM SANS}.body{padding:20px;background:#fcfcfc;border:10px}.property{display:flex;justify-content:space-between;background:#fff;padding:15px}.left-side{display:flex;gap:15px;width:70%}.left-side img{height:77px;width:97px;border-radius:8px}.property-name{margin-bottom:10px!important;font-size:16px;font-weight:600;color:#0009;font-family:DM SANS}.location{font-size:14px;color:#0000004d;font-family:DM SANS;font-weight:600}.perSqFtAmount{font-size:20px;color:#494949;font-weight:700;font-family:DM SANS}.Price-text{font-size:13px;font-weight:600;font-family:DM SANS;margin-bottom:10px!important;color:#393838}p{margin-bottom:0!important}.price-detail{margin-top:15px;background:#fff;padding:15px;border-radius:10px}.mb-15{margin-bottom:15px}.justify-space{justify-content:space-between}.price-left-side{font-size:16px;font-weight:700;font-family:DM SANS}.price-right-side{font-size:18px;font-weight:700;font-family:DM SANS}.price-text{font-size:17px;font-weight:600;font-family:DM SANS}.footer{margin-top:20px}.buy-btn{background:#122335;border:1px solid rgba(18,35,53,1);border-radius:7px;color:#fff;padding:5px;font-size:17px!important;font-family:DM SANS}.quantity{display:flex;gap:10px;justify-content:end}.quantity .add{background:#122335;color:#fff;display:flex;display:display;align-items:center;justify-content:center;border-radius:7px;cursor:pointer}.quantity input{background:#f8a938;border:1px solid rgba(248,169,56,1);border-radius:7px;outline:none;width:30%;padding-left:10px;color:#fff;text-align:center}.quantity .remove{background:#122335;color:#fff;display:flex;display:display;align-items:center;justify-content:center;border-radius:7px;cursor:pointer}.mb-30{margin-bottom:30px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: 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: CommonModule }] }); }
|
|
2051
2059
|
}
|
|
2052
2060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PaymentConfirmationComponent, decorators: [{
|
|
2053
2061
|
type: Component,
|
|
2054
2062
|
args: [{ selector: 'simpo-payment-confirmation', standalone: true, imports: [MatIconModule,
|
|
2055
2063
|
FormsModule,
|
|
2056
2064
|
CommonModule
|
|
2057
|
-
], template: "<section>\r\n <div class=\"header\">\r\n <p>Payment Confirmation</p>\r\n <mat-icon (click)=\"close()\">close</mat-icon>\r\n </div>\r\n\r\n <div class=\"body\">\r\n <div class=\"property\">\r\n <div class=\"left-side\">\r\n <img [src]=\"propertyDetails
|
|
2065
|
+
], template: "<section>\r\n <div class=\"header\">\r\n <p>Payment Confirmation</p>\r\n <mat-icon (click)=\"close()\">close</mat-icon>\r\n </div>\r\n\r\n <div class=\"body\">\r\n <div class=\"property\">\r\n <div class=\"left-side\">\r\n <img [src]=\"propertyDetails?.imgUrl[0]\"\r\n alt=\"No Image Available\">\r\n <div>\r\n <p class=\"property-name\">{{propertyDetails?.name ?? \"N/A\"}}</p>\r\n <p class=\"location\">{{propertyDetails?.location ?? \"N/A\"}}</p>\r\n </div>\r\n </div>\r\n <div class=\"right-side\">\r\n <p class=\"Price-text\">Price/Sq.ft</p>\r\n <p class=\"perSqFtAmount\">\u20B9 {{propertyDetails?.financeDetails?.pricePerSqFeet ?? 0}}/Sq.ft</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"price-detail\">\r\n <div class=\"d-flex justify-space mb-30\">\r\n <div class=\"price-left-side\">\r\n Quantity\r\n </div>\r\n <div class=\"price-right-side\">\r\n <div class=\"quantity\">\r\n <div class=\"remove\" (click)=\"removeSqFeet()\"><mat-icon>remove</mat-icon></div>\r\n <input type=\"number\" [(ngModel)]=\"tokenRequest.investorProperty.sqFeetArea\" (ngModelChange)=\"addOrRemoveProperty()\" (keyup)=\"preventMinus($event)\">\r\n <div class=\"add\" (click)=\"addSqFeet()\"><mat-icon>add</mat-icon></div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-space mb-15\">\r\n <div class=\"price-left-side\">\r\n Total Price\r\n </div>\r\n <div class=\"price-right-side\">\r\n \u20B9{{tokenRequest?.investorProperty?.totalSqFeetAmount ?? \"N/A\"}}\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-space mb-15\">\r\n <div class=\"price-left-side\">\r\n Property Tax\r\n </div>\r\n <div class=\"price-text\">\r\n \u20B9 0\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-space mb-15\">\r\n <div class=\"price-left-side\">\r\n GST(28%)\r\n </div>\r\n <div class=\"price-text\">\r\n \u20B9 {{tokenRequest?.investorProperty?.totalGstApplied ?? \"0\"}}\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div class=\"footer\">\r\n <div class=\"d-flex justify-space mb-15\">\r\n <div class=\"price-left-side\">\r\n Total Payable\r\n </div>\r\n <div class=\"price-text\">\r\n \u20B9 {{tokenRequest.investorProperty.totalSqFeetAmount + tokenRequest.investorProperty.totalGstApplied}}\r\n </div>\r\n </div>\r\n <button class=\"buy-btn\" (click)=\"purchaseProperty()\">Buy Now</button>\r\n </div>\r\n </div>\r\n\r\n</section>\r\n", styles: [".header{display:flex;height:60px;justify-content:space-between;align-items:center;padding-left:20px;padding-right:20px;border-bottom:1px solid rgba(14,35,60,.16)}.header P{font-size:20px;font-weight:700;font-family:DM SANS}.body{padding:20px;background:#fcfcfc;border:10px}.property{display:flex;justify-content:space-between;background:#fff;padding:15px}.left-side{display:flex;gap:15px;width:70%}.left-side img{height:77px;width:97px;border-radius:8px}.property-name{margin-bottom:10px!important;font-size:16px;font-weight:600;color:#0009;font-family:DM SANS}.location{font-size:14px;color:#0000004d;font-family:DM SANS;font-weight:600}.perSqFtAmount{font-size:20px;color:#494949;font-weight:700;font-family:DM SANS}.Price-text{font-size:13px;font-weight:600;font-family:DM SANS;margin-bottom:10px!important;color:#393838}p{margin-bottom:0!important}.price-detail{margin-top:15px;background:#fff;padding:15px;border-radius:10px}.mb-15{margin-bottom:15px}.justify-space{justify-content:space-between}.price-left-side{font-size:16px;font-weight:700;font-family:DM SANS}.price-right-side{font-size:18px;font-weight:700;font-family:DM SANS}.price-text{font-size:17px;font-weight:600;font-family:DM SANS}.footer{margin-top:20px}.buy-btn{background:#122335;border:1px solid rgba(18,35,53,1);border-radius:7px;color:#fff;padding:5px;font-size:17px!important;font-family:DM SANS}.quantity{display:flex;gap:10px;justify-content:end}.quantity .add{background:#122335;color:#fff;display:flex;display:display;align-items:center;justify-content:center;border-radius:7px;cursor:pointer}.quantity input{background:#f8a938;border:1px solid rgba(248,169,56,1);border-radius:7px;outline:none;width:30%;padding-left:10px;color:#fff;text-align:center}.quantity .remove{background:#122335;color:#fff;display:flex;display:display;align-items:center;justify-content:center;border-radius:7px;cursor:pointer}.mb-30{margin-bottom:30px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}\n"] }]
|
|
2058
2066
|
}], ctorParameters: () => [{ type: i5.MatDialogRef }, { type: undefined, decorators: [{
|
|
2059
2067
|
type: Inject,
|
|
2060
2068
|
args: [MAT_DIALOG_DATA]
|
|
@@ -5908,17 +5916,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
5908
5916
|
type: Input
|
|
5909
5917
|
}] } });
|
|
5910
5918
|
|
|
5919
|
+
class FormateAmount {
|
|
5920
|
+
transform(value, system = "IND") {
|
|
5921
|
+
if (system == "IND") {
|
|
5922
|
+
if (Number(value) >= 10000000 /* AMOUNT.CRORE */) {
|
|
5923
|
+
return (Number(value) / 10000000 /* AMOUNT.CRORE */) + 'cr';
|
|
5924
|
+
}
|
|
5925
|
+
else if (Number(value) >= 100000 /* AMOUNT.LAKHS */) {
|
|
5926
|
+
return (Number(value) / 100000 /* AMOUNT.LAKHS */).toFixed(2) + 'L';
|
|
5927
|
+
}
|
|
5928
|
+
else {
|
|
5929
|
+
return value.toString();
|
|
5930
|
+
}
|
|
5931
|
+
}
|
|
5932
|
+
else {
|
|
5933
|
+
if (Number(value) >= 1000000 /* AMOUNT.MILLION */) {
|
|
5934
|
+
return (Number(value) / 1000000 /* AMOUNT.MILLION */) + 'mn';
|
|
5935
|
+
}
|
|
5936
|
+
else {
|
|
5937
|
+
return value.toString();
|
|
5938
|
+
}
|
|
5939
|
+
}
|
|
5940
|
+
}
|
|
5941
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FormateAmount, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
5942
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.4", ngImport: i0, type: FormateAmount, isStandalone: true, name: "formateAmount" }); }
|
|
5943
|
+
}
|
|
5944
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FormateAmount, decorators: [{
|
|
5945
|
+
type: Pipe,
|
|
5946
|
+
args: [{
|
|
5947
|
+
standalone: true,
|
|
5948
|
+
name: 'formateAmount',
|
|
5949
|
+
}]
|
|
5950
|
+
}] });
|
|
5951
|
+
|
|
5911
5952
|
class PortfolioComponent {
|
|
5912
5953
|
constructor(restService) {
|
|
5913
5954
|
this.restService = restService;
|
|
5914
5955
|
this.growthAmount = 0;
|
|
5915
5956
|
this.growthPercentage = 0;
|
|
5957
|
+
this.colors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange'];
|
|
5916
5958
|
this.pageLoader = false;
|
|
5917
5959
|
}
|
|
5918
5960
|
ngOnInit() {
|
|
5919
5961
|
this.getPortfolioDetails();
|
|
5920
5962
|
this.getPropertyDetails();
|
|
5921
5963
|
}
|
|
5964
|
+
randomColors(index) {
|
|
5965
|
+
return this.colors[index % this.colors.length];
|
|
5966
|
+
}
|
|
5922
5967
|
getPortfolioDetails() {
|
|
5923
5968
|
this.pageLoader = true;
|
|
5924
5969
|
this.restService.getPortfolioDetails().subscribe((res) => {
|
|
@@ -5934,11 +5979,11 @@ class PortfolioComponent {
|
|
|
5934
5979
|
});
|
|
5935
5980
|
}
|
|
5936
5981
|
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 : <span class=\"amnt clr-white\">\r\n {{growthAmount ?? 0}}</span> <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"] }] }); }
|
|
5982
|
+
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 : <span class=\"amnt clr-white\">\r\n {{growthAmount ?? 0}}</span> <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; let i = index\">\r\n <div class=\"value_left\">\r\n <div class=\"value_color\" [ngStyle]=\"{'background-color': randomColors(i)}\"></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 | number: '1.2-2' }}%</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 | number: '1.2-2' }}%</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: "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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { 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
5983
|
}
|
|
5939
5984
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PortfolioComponent, decorators: [{
|
|
5940
5985
|
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 : <span class=\"amnt clr-white\">\r\n {{growthAmount ?? 0}}</span> <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"] }]
|
|
5986
|
+
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 : <span class=\"amnt clr-white\">\r\n {{growthAmount ?? 0}}</span> <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; let i = index\">\r\n <div class=\"value_left\">\r\n <div class=\"value_color\" [ngStyle]=\"{'background-color': randomColors(i)}\"></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 | number: '1.2-2' }}%</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 | number: '1.2-2' }}%</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
5987
|
}], ctorParameters: () => [{ type: RestService }] });
|
|
5943
5988
|
|
|
5944
5989
|
class PropertyViewComponent {
|
|
@@ -5984,11 +6029,11 @@ class PropertyViewComponent {
|
|
|
5984
6029
|
});
|
|
5985
6030
|
}
|
|
5986
6031
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyViewComponent, deps: [{ token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5987
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertyViewComponent, isStandalone: true, selector: "simpo-property-view", inputs: { id: "id" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, ngImport: i0, template: "<div class=\" row main-container gap-10 \" *ngIf=\"!pageLoader\">\r\n <div class=\" col-md-6 left-container w-60 \">\r\n <div class=\"property-detail common-style1\">\r\n <div class=\" row carousel-01\">\r\n <div id=\"carouselExampleInterval\" class=\" col-12 col-6 carousel slide p-relative \" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let ele of propertyDetails?.property?.imgUrl;let i = index\">\r\n <div class=\"carousel-item active\" [class.active]=\"i\" data-bs-interval=\"3000\">\r\n <img [src]=\"ele\" class=\"d-block w-100 br-10\" alt=\"property-image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-center\">\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <ng-container *ngFor=\"let ele of propertyDetails.property.imgUrl;let i = index\">\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\"\r\n [attr.data-bs-slide-to]=\"i\" class=\"active additional-properties\" aria-current=\"true\"\r\n aria-label=\"Slide 1\"></button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"srcWidth < 475\" class=\" col-6 bottom-details d-flex gap-10 mt-10\">\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Invested Date</div>\r\n <div class=\"right\">{{(propertyDetails?.earliestPurchaseDate | date) ?? \"N/A\"}}</div>\r\n </div>\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Property Type</div>\r\n <div class=\"right\">{{propertyDetails?.property?.propertyType ?? \"N/A\"}}</div>\r\n </div>\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Ownership Share</div>\r\n <div class=\"right\">{{propertyDetails?.share ?? \"N/A\"}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"details mt-10\">\r\n <div class=\"row top-details\">\r\n <div class=\"col-md-6 col-12 top-left\">\r\n <div class=\"main-text\">{{propertyDetails?.property?.name ?? \"N/A\"}}</div>\r\n <div class=\"span-text\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\"\r\n alt=\"location image\" class=\"grey-icon\" width=\"15px\">{{propertyDetails?.property?.location ?? \"N/A\"}}</div>\r\n </div>\r\n <div *ngIf=\"srcWidth > 475\" class=\"col-md-6 top-right d-flex gap-10\">\r\n <div class=\"buy-more common-style2\">\r\n Buy More SQFT\r\n </div>\r\n <div class=\"sell common-style2\">\r\n Sell SQFT\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"srcWidth > 475\" class=\"bottom-details d-flex gap-10 mt-10 justify-content-center\">\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Invested Date</div>\r\n <div class=\"right\">{{(propertyDetails?.earliestPurchaseDate | date) ?? \"N/A\"}}</div>\r\n </div>\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Property Type</div>\r\n <div class=\"right\">{{propertyDetails?.property?.propertyType ?? \"N/A\"}}</div>\r\n </div>\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Ownership Share</div>\r\n <div class=\"right\">{{propertyDetails?.share ?? \"N/A\"}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"doc-rep common-style1\" *ngIf=\"propertyDetails?.property?.documents.length > 0\">\r\n <div class=\"head-about-property\">Documents & Reports</div>\r\n <div class=\"file-container d-flex flex-column gap-10\">\r\n <div class=\"file d-flex justify-content-between\" *ngFor=\"let ele of propertyDetails?.property?.documents\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/678394c1739183726107image%209.png\"\r\n alt=\"pdf\" class=\"w-10\">\r\n <div class=\"doc-text w-75 d-flex align-items-center\"> {{ele.length > 15 ?\r\n ele.substring(0,15)+'...' : ele }}</div>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/195414c1739183779845fi_3502477.png\"\r\n alt=\"download\" class=\"download-img w-10\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"common-style1\">\r\n <div class=\"head-about-property\">About Property</div>\r\n <div class=\"about-property-text\">{{propertyDetails?.property?.description ?? \"N/A\"}}</div>\r\n <!-- <div class=\"head-about-property\">Property Managed by</div>\r\n <div class=\"managed-cards d-flex gap-10 w-100\">\r\n <div class=\"card-container br-10\" *ngFor=\"let ele of propertyDetails.managedBy\">\r\n <div class=\"img-container d-flex justify-content-center\">\r\n <img [src]=\"ele.img\" alt=\"Manager Image\" class=\"manage-img\">\r\n </div>\r\n <div class=\"card-details\">\r\n <p class=\"name-text text-center mt-10\">{{ele.name}}</p>\r\n <p class=\"role-text text-center\">{{ele.role}}</p>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\" col-md-6 right-container w-40 \">\r\n <div class=\"right-content\">\r\n <div class=\"right-head\">Holdings Details</div>\r\n <div class=\"holding-details common-style3\">\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">\u20B9{{propertyDetails?.totalInvestedAmount ?? \"N/A\"}}</div>\r\n <div class=\"bottom\">Invested</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails?.totalSqFeetOwned ?? \"N/A\"}}</div>\r\n <div class=\"bottom\">Sq.ft</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails?.property?.financeDetails?.indicativeMarketValue ?? \"N/A\"}}</div>\r\n <div class=\"bottom\">Indicative Market Value</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails?.property?.financeDetails?.irr ?? \"N/A\"}}</div>\r\n <div class=\"bottom\">Internal Returns Rate</div>\r\n </div>\r\n </div>\r\n <div class=\"income br-0-10\">\r\n <div class=\"left-right-1\">\r\n <div class=\"left-1\">Profit/Loss</div><div class=\"right-1\">\u20B9{{propertyDetails?.property?.financeDetails?.annualReturn ?? \"N/A\"}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"right-content\">\r\n <div class=\"right-head\">Financial Projections</div>\r\n <div class=\"financial-details common-style3 br-0-10\">\r\n <div class=\"right-left-1 d-flex justify-content-between mb-3\">\r\n <div class=\"left-2\">Projected Value (Next Year)</div><div class=\"right-2\">{{propertyDetails.projectedValue}}</div>\r\n </div>\r\n <div class=\"right-left-1 d-flex justify-content-between mb-3\">\r\n <div class=\"left-2\">Potential Appreciation</div><div class=\"right-2\">{{propertyDetails.potentialApperciation}}</div>\r\n </div>\r\n <div class=\"right-left-1 d-flex justify-content-between mb-3\">\r\n <div class=\"left-2\">Guaranteed Growth</div><div class=\"right-2\">{{propertyDetails.guaranteedGrowth}}</div>\r\n </div>\r\n <div class=\"note-section\">\r\n Note: Above projection are based on past performance\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div *ngIf=\"srcWidth < 475\" class=\"top-right d-flex gap-10\">\r\n <div class=\"buy-more common-style2\">\r\n Buy More SQFT\r\n </div>\r\n <div class=\"sell common-style2\">\r\n Sell SQFT\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<section class=\"pageloader\" *ngIf=\"pageLoader\">\r\n <div class=\"row gap-10 overflow-y-scroll\" [class.flex-column]=\"srcWidth < 475\">\r\n <div class=\"left-container-1 w-60\">\r\n <div class=\"skel-loader\" *ngFor=\"let skel of [1,2,4]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '25vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n <div class=\"right-container-1 w-40\">\r\n <div class=\"skel-loader\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '35vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.main-container{padding:10px;width:100%}.left-container,.right-container{height:75vh;overflow-y:scroll}.carousel-item{display:unset!important}.w-60{width:63%}.w-40{width:35%}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%}.br-10{border-radius:10px}.common-style1{padding:10px;border-radius:10px;background:#fff;margin-bottom:10px}.mt-10{margin-top:10px!important}.main-text{font-weight:600;font-size:18px;line-height:24px;color:#000}.span-text{font-size:14px;font-weight:500;line-height:44px;color:#00000080}.gap-10{gap:10px}.common-style2{padding:5px 7px;border-radius:10px;font-size:12px;line-height:24px;font-weight:600;height:6vh;align-content:center}.buy-more{background:#36b37e;color:#fff}.sell{background:#ffcfc6;color:#f36f56}.left{font-size:14px;line-height:18px;font-weight:500;color:#01161ecc}.right{font-size:14px;line-height:20px;font-weight:600;color:#01161e}.head-about-property{font-weight:600;font-size:16px;line-height:26px;margin-bottom:10px}.file{background:#f7f7f7;border-radius:5px;padding:12px}.doc-text{font-size:16px;font-weight:500;line-height:26px;color:#000}.about-property-text{font-weight:400;font-size:16px;line-height:29px;color:#01161eb3}.manage-img{width:70px;height:10vh;border-radius:50%}.card-container{background:#f7f7f7;padding:10px;width:48%}.name-text{font-size:14px;line-height:24px;font-weight:500;color:#000}.role-text{font-size:14px;font-weight:400;line-height:24px;color:#000000b3}.managed-cards{overflow-x:scroll}.right-content{border:1px solid rgba(0,0,0,.03);border-radius:10px;margin-bottom:15px}.right-head{font-weight:600;font-size:16px;line-height:21px;color:#000;padding:10px;background:#f1f6ff}.holding-details{display:grid;grid-template-columns:50% 50%;gap:10px}.top-bottom{padding:10px}.top{font-size:20px;font-weight:700;line-height:24px;color:#000}.bottom{font-size:14px;font-weight:500;line-height:24px;color:#000000b3}.income{background:#fff;padding:10px}.left-right-1{background:linear-gradient(180deg,#0d1b2a,#172b40);display:flex;justify-content:space-between;padding:15px;border-radius:10px}.left-1{font-size:16px;font-weight:700;line-height:24px;color:#fff}.right-1{font-weight:800;font-size:20px;line-height:24px;color:#32f4a2}.left-2{font-size:14px;line-height:20px;font-weight:500;color:#000000b3}.right-2{font-size:20px;line-height:24px;font-weight:700;color:#000}.note-section{font-size:14px;line-height:20px;font-weight:500;color:#01161e66}.common-style3{padding:10px;background:#fff}.br-0-10{border-radius:0 0 10px 10px!important}.grey-icon{filter:grayscale(100%) brightness(50%)}.doc-rep{overflow-y:scroll;height:17vh}@media only screen and (max-width: 475px){.main-container{flex-direction:column;width:auto}.left-container,.right-container{height:auto}.carousel{height:16vh;width:40%}.w-60,.w-40{width:auto}.w-4 .carousel{width:40%}.d-block{height:16vh}.bottom-details{flex-direction:column;width:60%}.left-right{justify-content:space-between}.propertyName{width:88%}.top-right{position:sticky;bottom:0%;background:#fff;justify-content:center;padding:8px 2px}.common-style2{padding:11px 8px;width:40vw;text-align:center;font-size:14px}.right-head{border-radius:10px}.w-10{width:14%}.file{padding:5px 10px;height:8vh}.doc-text{font-size:12px}.left-container-1,.right-container-1{width:100%}.overflow-y-scroll{overflow-y:scroll;height:75vh}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i3.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
|
|
6032
|
+
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:90vh;overflow-y:scroll}.row{flex-wrap:unset!important}.carousel-item{display:unset!important}.w-60{width:60%}.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"] }] }); }
|
|
5988
6033
|
}
|
|
5989
6034
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyViewComponent, decorators: [{
|
|
5990
6035
|
type: Component,
|
|
5991
|
-
args: [{ selector: 'simpo-property-view', standalone: true, imports: [CommonModule, MatIcon, NgxSkeletonLoaderModule], template: "<div class=\" row main-container gap-10 \" *ngIf=\"!pageLoader\">\r\n <div class=\" col-md-6 left-container w-60 \">\r\n <div class=\"property-detail common-style1\">\r\n <div class=\" row carousel-01\">\r\n <div id=\"carouselExampleInterval\" class=\" col-12 col-6 carousel slide p-relative \" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <ng-container *ngFor=\"let ele of propertyDetails?.property?.imgUrl;let i = index\">\r\n <div class=\"carousel-item active\" [class.active]=\"i\" data-bs-interval=\"3000\">\r\n <img [src]=\"ele\" class=\"d-block w-100 br-10\" alt=\"property-image\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-center\">\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <ng-container *ngFor=\"let ele of propertyDetails.property.imgUrl;let i = index\">\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\"\r\n [attr.data-bs-slide-to]=\"i\" class=\"active additional-properties\" aria-current=\"true\"\r\n aria-label=\"Slide 1\"></button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"srcWidth < 475\" class=\" col-6 bottom-details d-flex gap-10 mt-10\">\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Invested Date</div>\r\n <div class=\"right\">{{(propertyDetails?.earliestPurchaseDate | date) ?? \"N/A\"}}</div>\r\n </div>\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Property Type</div>\r\n <div class=\"right\">{{propertyDetails?.property?.propertyType ?? \"N/A\"}}</div>\r\n </div>\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Ownership Share</div>\r\n <div class=\"right\">{{propertyDetails?.share ?? \"N/A\"}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"details mt-10\">\r\n <div class=\"row top-details\">\r\n <div class=\"col-md-6 col-12 top-left\">\r\n <div class=\"main-text\">{{propertyDetails?.property?.name ?? \"N/A\"}}</div>\r\n <div class=\"span-text\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\"\r\n alt=\"location image\" class=\"grey-icon\" width=\"15px\">{{propertyDetails?.property?.location ?? \"N/A\"}}</div>\r\n </div>\r\n <div *ngIf=\"srcWidth > 475\" class=\"col-md-6 top-right d-flex gap-10\">\r\n <div class=\"buy-more common-style2\">\r\n Buy More SQFT\r\n </div>\r\n <div class=\"sell common-style2\">\r\n Sell SQFT\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"srcWidth > 475\" class=\"bottom-details d-flex gap-10 mt-10 justify-content-center\">\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Invested Date</div>\r\n <div class=\"right\">{{(propertyDetails?.earliestPurchaseDate | date) ?? \"N/A\"}}</div>\r\n </div>\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Property Type</div>\r\n <div class=\"right\">{{propertyDetails?.property?.propertyType ?? \"N/A\"}}</div>\r\n </div>\r\n <div class=\"left-right d-flex gap-10\">\r\n <div class=\"left\">Ownership Share</div>\r\n <div class=\"right\">{{propertyDetails?.share ?? \"N/A\"}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"doc-rep common-style1\" *ngIf=\"propertyDetails?.property?.documents.length > 0\">\r\n <div class=\"head-about-property\">Documents & Reports</div>\r\n <div class=\"file-container d-flex flex-column gap-10\">\r\n <div class=\"file d-flex justify-content-between\" *ngFor=\"let ele of propertyDetails?.property?.documents\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/678394c1739183726107image%209.png\"\r\n alt=\"pdf\" class=\"w-10\">\r\n <div class=\"doc-text w-75 d-flex align-items-center\"> {{ele.length > 15 ?\r\n ele.substring(0,15)+'...' : ele }}</div>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/195414c1739183779845fi_3502477.png\"\r\n alt=\"download\" class=\"download-img w-10\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"common-style1\">\r\n <div class=\"head-about-property\">About Property</div>\r\n <div class=\"about-property-text\">{{propertyDetails?.property?.description ?? \"N/A\"}}</div>\r\n <!-- <div class=\"head-about-property\">Property Managed by</div>\r\n <div class=\"managed-cards d-flex gap-10 w-100\">\r\n <div class=\"card-container br-10\" *ngFor=\"let ele of propertyDetails.managedBy\">\r\n <div class=\"img-container d-flex justify-content-center\">\r\n <img [src]=\"ele.img\" alt=\"Manager Image\" class=\"manage-img\">\r\n </div>\r\n <div class=\"card-details\">\r\n <p class=\"name-text text-center mt-10\">{{ele.name}}</p>\r\n <p class=\"role-text text-center\">{{ele.role}}</p>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\" col-md-6 right-container w-40 \">\r\n <div class=\"right-content\">\r\n <div class=\"right-head\">Holdings Details</div>\r\n <div class=\"holding-details common-style3\">\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">\u20B9{{propertyDetails?.totalInvestedAmount ?? \"N/A\"}}</div>\r\n <div class=\"bottom\">Invested</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails?.totalSqFeetOwned ?? \"N/A\"}}</div>\r\n <div class=\"bottom\">Sq.ft</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails?.property?.financeDetails?.indicativeMarketValue ?? \"N/A\"}}</div>\r\n <div class=\"bottom\">Indicative Market Value</div>\r\n </div>\r\n <div class=\"top-bottom\">\r\n <div class=\"top\">{{propertyDetails?.property?.financeDetails?.irr ?? \"N/A\"}}</div>\r\n <div class=\"bottom\">Internal Returns Rate</div>\r\n </div>\r\n </div>\r\n <div class=\"income br-0-10\">\r\n <div class=\"left-right-1\">\r\n <div class=\"left-1\">Profit/Loss</div><div class=\"right-1\">\u20B9{{propertyDetails?.property?.financeDetails?.annualReturn ?? \"N/A\"}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"right-content\">\r\n <div class=\"right-head\">Financial Projections</div>\r\n <div class=\"financial-details common-style3 br-0-10\">\r\n <div class=\"right-left-1 d-flex justify-content-between mb-3\">\r\n <div class=\"left-2\">Projected Value (Next Year)</div><div class=\"right-2\">{{propertyDetails.projectedValue}}</div>\r\n </div>\r\n <div class=\"right-left-1 d-flex justify-content-between mb-3\">\r\n <div class=\"left-2\">Potential Appreciation</div><div class=\"right-2\">{{propertyDetails.potentialApperciation}}</div>\r\n </div>\r\n <div class=\"right-left-1 d-flex justify-content-between mb-3\">\r\n <div class=\"left-2\">Guaranteed Growth</div><div class=\"right-2\">{{propertyDetails.guaranteedGrowth}}</div>\r\n </div>\r\n <div class=\"note-section\">\r\n Note: Above projection are based on past performance\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n <div *ngIf=\"srcWidth < 475\" class=\"top-right d-flex gap-10\">\r\n <div class=\"buy-more common-style2\">\r\n Buy More SQFT\r\n </div>\r\n <div class=\"sell common-style2\">\r\n Sell SQFT\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<section class=\"pageloader\" *ngIf=\"pageLoader\">\r\n <div class=\"row gap-10 overflow-y-scroll\" [class.flex-column]=\"srcWidth < 475\">\r\n <div class=\"left-container-1 w-60\">\r\n <div class=\"skel-loader\" *ngFor=\"let skel of [1,2,4]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '25vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n <div class=\"right-container-1 w-40\">\r\n <div class=\"skel-loader\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width : '100%',\r\n height: '35vh',\r\n 'border-radius': '10px',\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.main-container{padding:10px;width:100%}.left-container,.right-container{height:75vh;overflow-y:scroll}.carousel-item{display:unset!important}.w-60{width:63%}.w-40{width:35%}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%}.br-10{border-radius:10px}.common-style1{padding:10px;border-radius:10px;background:#fff;margin-bottom:10px}.mt-10{margin-top:10px!important}.main-text{font-weight:600;font-size:18px;line-height:24px;color:#000}.span-text{font-size:14px;font-weight:500;line-height:44px;color:#00000080}.gap-10{gap:10px}.common-style2{padding:5px 7px;border-radius:10px;font-size:12px;line-height:24px;font-weight:600;height:6vh;align-content:center}.buy-more{background:#36b37e;color:#fff}.sell{background:#ffcfc6;color:#f36f56}.left{font-size:14px;line-height:18px;font-weight:500;color:#01161ecc}.right{font-size:14px;line-height:20px;font-weight:600;color:#01161e}.head-about-property{font-weight:600;font-size:16px;line-height:26px;margin-bottom:10px}.file{background:#f7f7f7;border-radius:5px;padding:12px}.doc-text{font-size:16px;font-weight:500;line-height:26px;color:#000}.about-property-text{font-weight:400;font-size:16px;line-height:29px;color:#01161eb3}.manage-img{width:70px;height:10vh;border-radius:50%}.card-container{background:#f7f7f7;padding:10px;width:48%}.name-text{font-size:14px;line-height:24px;font-weight:500;color:#000}.role-text{font-size:14px;font-weight:400;line-height:24px;color:#000000b3}.managed-cards{overflow-x:scroll}.right-content{border:1px solid rgba(0,0,0,.03);border-radius:10px;margin-bottom:15px}.right-head{font-weight:600;font-size:16px;line-height:21px;color:#000;padding:10px;background:#f1f6ff}.holding-details{display:grid;grid-template-columns:50% 50%;gap:10px}.top-bottom{padding:10px}.top{font-size:20px;font-weight:700;line-height:24px;color:#000}.bottom{font-size:14px;font-weight:500;line-height:24px;color:#000000b3}.income{background:#fff;padding:10px}.left-right-1{background:linear-gradient(180deg,#0d1b2a,#172b40);display:flex;justify-content:space-between;padding:15px;border-radius:10px}.left-1{font-size:16px;font-weight:700;line-height:24px;color:#fff}.right-1{font-weight:800;font-size:20px;line-height:24px;color:#32f4a2}.left-2{font-size:14px;line-height:20px;font-weight:500;color:#000000b3}.right-2{font-size:20px;line-height:24px;font-weight:700;color:#000}.note-section{font-size:14px;line-height:20px;font-weight:500;color:#01161e66}.common-style3{padding:10px;background:#fff}.br-0-10{border-radius:0 0 10px 10px!important}.grey-icon{filter:grayscale(100%) brightness(50%)}.doc-rep{overflow-y:scroll;height:17vh}@media only screen and (max-width: 475px){.main-container{flex-direction:column;width:auto}.left-container,.right-container{height:auto}.carousel{height:16vh;width:40%}.w-60,.w-40{width:auto}.w-4 .carousel{width:40%}.d-block{height:16vh}.bottom-details{flex-direction:column;width:60%}.left-right{justify-content:space-between}.propertyName{width:88%}.top-right{position:sticky;bottom:0%;background:#fff;justify-content:center;padding:8px 2px}.common-style2{padding:11px 8px;width:40vw;text-align:center;font-size:14px}.right-head{border-radius:10px}.w-10{width:14%}.file{padding:5px 10px;height:8vh}.doc-text{font-size:12px}.left-container-1,.right-container-1{width:100%}.overflow-y-scroll{overflow-y:scroll;height:75vh}}\n"] }]
|
|
6036
|
+
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:90vh;overflow-y:scroll}.row{flex-wrap:unset!important}.carousel-item{display:unset!important}.w-60{width:60%}.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"] }]
|
|
5992
6037
|
}], ctorParameters: () => [{ type: RestService }], propDecorators: { id: [{
|
|
5993
6038
|
type: Input
|
|
5994
6039
|
}], getScreenSize: [{
|
|
@@ -6017,11 +6062,11 @@ class PropertiesComponent {
|
|
|
6017
6062
|
this.screenWidth = window.innerWidth;
|
|
6018
6063
|
}
|
|
6019
6064
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertiesComponent, deps: [{ token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6020
|
-
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}} <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"] }] }); }
|
|
6065
|
+
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}} <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?.location ?? \"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 {{ (ele?.currentAmount ?? 0) - (ele?.investedAmount ?? 0) | formateAmount:'IND' }}</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: "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"] }] }); }
|
|
6021
6066
|
}
|
|
6022
6067
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertiesComponent, decorators: [{
|
|
6023
6068
|
type: Component,
|
|
6024
|
-
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}} <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"] }]
|
|
6069
|
+
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}} <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?.location ?? \"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 {{ (ele?.currentAmount ?? 0) - (ele?.investedAmount ?? 0) | formateAmount:'IND' }}</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"] }]
|
|
6025
6070
|
}], ctorParameters: () => [{ type: RestService }], propDecorators: { getScreenSize: [{
|
|
6026
6071
|
type: HostListener,
|
|
6027
6072
|
args: ["window: resize", ["$event"]]
|
|
@@ -6161,7 +6206,7 @@ class KycDetailsComponent {
|
|
|
6161
6206
|
if (res.message) {
|
|
6162
6207
|
this.isPanVerified = res.message.panVerified === 'VALID';
|
|
6163
6208
|
this.isAadharverified = res.message.aadhaarVerified === 'VALID';
|
|
6164
|
-
this.aadharRequest.aadhaarNumber = res.message.
|
|
6209
|
+
this.aadharRequest.aadhaarNumber = res.message.aadhaarNumber;
|
|
6165
6210
|
this.panRequest.panNumber = res.message.panNo;
|
|
6166
6211
|
}
|
|
6167
6212
|
}, (err) => {
|
|
@@ -6276,6 +6321,8 @@ class ProfileSectionComponent {
|
|
|
6276
6321
|
constructor(restService) {
|
|
6277
6322
|
this.restService = restService;
|
|
6278
6323
|
this.selectedPanel = "PORTFOLIO";
|
|
6324
|
+
this.skelLoader = true;
|
|
6325
|
+
this.skelArray = Array(2);
|
|
6279
6326
|
this.sidePanelTabs = [
|
|
6280
6327
|
{ value: "PORTFOLIO", viewValue: "My Portfolio" },
|
|
6281
6328
|
{ value: "PROPERTIES", viewValue: "My Properties" },
|
|
@@ -6290,8 +6337,10 @@ class ProfileSectionComponent {
|
|
|
6290
6337
|
this.getInvestorDetails();
|
|
6291
6338
|
}
|
|
6292
6339
|
getInvestorDetails() {
|
|
6340
|
+
this.skelLoader = true;
|
|
6293
6341
|
this.restService.getInvesterById().subscribe((res) => {
|
|
6294
6342
|
this.investorDetails = res.message;
|
|
6343
|
+
this.skelLoader = false;
|
|
6295
6344
|
});
|
|
6296
6345
|
}
|
|
6297
6346
|
getInitials() {
|
|
@@ -6300,13 +6349,13 @@ class ProfileSectionComponent {
|
|
|
6300
6349
|
return initials;
|
|
6301
6350
|
}
|
|
6302
6351
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProfileSectionComponent, deps: [{ token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6303
|
-
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" }] }); }
|
|
6352
|
+
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"] }] }); }
|
|
6304
6353
|
}
|
|
6305
6354
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProfileSectionComponent, decorators: [{
|
|
6306
6355
|
type: Component,
|
|
6307
6356
|
args: [{ selector: 'simpo-profile-section', standalone: true, imports: [PortfolioComponent, PropertiesComponent, MyDocumentsComponent, MyOrdersComponent, MyStatementComponent, NeedHelpComponent, MatIcon, CommonModule,
|
|
6308
|
-
KycDetailsComponent
|
|
6309
|
-
], 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"] }]
|
|
6357
|
+
KycDetailsComponent, NgxSkeletonLoaderModule
|
|
6358
|
+
], 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"] }]
|
|
6310
6359
|
}], ctorParameters: () => [{ type: RestService }], propDecorators: { data: [{
|
|
6311
6360
|
type: Input
|
|
6312
6361
|
}] } });
|
|
@@ -10265,6 +10314,7 @@ class PropertyDetailComponent {
|
|
|
10265
10314
|
this.router = router;
|
|
10266
10315
|
this.matDialog = matDialog;
|
|
10267
10316
|
this.messageService = messageService;
|
|
10317
|
+
this.buttonLoader = false;
|
|
10268
10318
|
this.propertyId = '';
|
|
10269
10319
|
this.propertyDetails = {
|
|
10270
10320
|
"propertyId": 10,
|
|
@@ -10363,28 +10413,45 @@ class PropertyDetailComponent {
|
|
|
10363
10413
|
return true;
|
|
10364
10414
|
}
|
|
10365
10415
|
getKycDetails() {
|
|
10366
|
-
this.
|
|
10367
|
-
|
|
10368
|
-
|
|
10369
|
-
|
|
10370
|
-
|
|
10371
|
-
|
|
10372
|
-
|
|
10416
|
+
this.buttonLoader = true;
|
|
10417
|
+
this.kycDetailsSubscription = this.restService.getKycDetails().subscribe({
|
|
10418
|
+
next: (res) => {
|
|
10419
|
+
if (res?.message?.panVerified === 'VALID' && res?.message?.aadhaarVerified === 'VALID') {
|
|
10420
|
+
if (!this.checkMinInvestment()) {
|
|
10421
|
+
this.buttonLoader = false;
|
|
10422
|
+
return;
|
|
10423
|
+
}
|
|
10424
|
+
this.matDialog.open(PaymentConfirmationComponent, {
|
|
10425
|
+
panelClass: 'payment-confirmation',
|
|
10426
|
+
data: { details: this.propertyDetails, totalArea: this.noOfSqft }
|
|
10427
|
+
});
|
|
10428
|
+
this.buttonLoader = false;
|
|
10429
|
+
}
|
|
10430
|
+
else {
|
|
10431
|
+
this.matDialog.open(KycDetailsComponent, { panelClass: "login-signup" });
|
|
10432
|
+
this.buttonLoader = false;
|
|
10433
|
+
}
|
|
10434
|
+
},
|
|
10435
|
+
error: (err) => {
|
|
10436
|
+
this.buttonLoader = false;
|
|
10373
10437
|
this.matDialog.open(KycDetailsComponent, { panelClass: "login-signup" });
|
|
10374
10438
|
}
|
|
10375
|
-
}, () => {
|
|
10376
|
-
this.matDialog.open(KycDetailsComponent, { panelClass: "login-signup" });
|
|
10377
10439
|
});
|
|
10378
10440
|
}
|
|
10379
10441
|
get isMobile() {
|
|
10380
10442
|
return window.innerWidth <= 475;
|
|
10381
10443
|
}
|
|
10444
|
+
preventMinus(event) {
|
|
10445
|
+
if (event.key === '-') {
|
|
10446
|
+
event.preventDefault();
|
|
10447
|
+
}
|
|
10448
|
+
}
|
|
10382
10449
|
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 }); }
|
|
10383
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertyDetailComponent, isStandalone: true, selector: "simpo-property-detail", inputs: { data: "data" }, providers: [MessageService], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section class=\"main-container\">\r\n <div id=\"carouselExampleInterval\" *ngIf=\"!skelLoader\" class=\"carousel slide p-relative\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\" >\r\n <div class=\"carousel-item active\" data-bs-interval=\"2000\" *ngFor=\"let img of propertyDetails.imgUrl\">\r\n <img [src]=\"img\" class=\"d-block w-100 height-30 h-50\" alt=\"property-image\">\r\n </div>\r\n <!-- <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div>\r\n <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div> -->\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-between\">\r\n <div class=\"property-details\">\r\n <p class=\"pname\">{{propertyDetails.name}}</p>\r\n <span class=\"plocation d-flex align-items-center gap-5\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\"\r\n alt=\"location image\"> {{propertyDetails.location}}</span>\r\n </div>\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <!-- d-flex justify-content-end align-items-end -->\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <!-- additional-properties-1 -->\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" [attr.data-bs-slide-to]=\"i\"\r\n class=\"active additional-properties\" aria-current=\"true\" aria-label=\"Slide 1\"\r\n *ngFor=\"let slide of propertyDetails.imgUrl;let i = index\"></button>\r\n <!-- class=\"additional-properties\" -->\r\n <!-- <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\" class=\"additional-properties\"></button>\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\" class=\"additional-properties\"></button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"skelLoader\">\r\n <div class=\"col-12\" >\r\n <ng-container *ngTemplateOutlet=\"skeleton\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"property-numbers d-flex justify-content-between\" *ngIf=\"!skelLoader\">\r\n <ng-container>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.pricePerSqFeet || 0 }}</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Price/Sq.ft</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.indicativeMarketValue || 0 }}</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Indicative Market Value</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.irr || 0 }}%</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Internal Returns Rate</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.annualReturn || 0 }}%</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Annual Returns</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <ng-container>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/273918c1739173355725checked%201.png\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container>\r\n <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.annualReturn || 0}}%</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Guaranteed annual capital growth</p>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"about-section w-70 d-flex g-40\" *ngIf=\"!skelLoader\">\r\n <div class=\"right w-60 \">\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">About Property</div>\r\n <div class=\"about-property-text\">{{propertyDetails.description}}</div>\r\n <div class=\"about-property-details d-flex gap-10\">\r\n <ng-container>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Type: </div>\r\n <div class=\"left-text\">{{propertyDetails.propertyType}}</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Size:</div>\r\n <div class=\"left-text\">{{propertyDetails.totalAreaSqFeet}}sqft</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">year:</div>\r\n <div class=\"left-text\">{{propertyDetails.year}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\" *ngIf=\"(propertyDetails?.benefits?.length || 0) > 0\">\r\n <div class=\"head-about-property\">Investment Benefit</div>\r\n <div class=\"card-container d-flex gap-10\">\r\n <ng-container *ngFor=\"let benefits of propertyDetails.benefits\">\r\n <div class=\"cards\">\r\n <div class=\"image-container w-100 d-flex justify-content-center\">\r\n <img [src]=\"benefits.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"card-head\">{{benefits.title}}</div>\r\n <div class=\"card-text\">{{benefits.description}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">Documents & Reports</div>\r\n <div class=\"file-container d-flex justify-content-between gap-10\">\r\n <div class=\"file d-flex justify-content-between\" *ngFor=\"let ele of pdfCards\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/678394c1739183726107image%209.png\"\r\n alt=\"pdf\">\r\n <div class=\"doc-text w-75 d-flex align-items-center\"> {{ele.length > 15 ?\r\n ele.substring(0,15)+'...' : ele }}</div>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/195414c1739183779845fi_3502477.png\"\r\n alt=\"download\" class=\"download-img\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"left w-40\">\r\n <div class=\"sqft\">\r\n <div class=\"head-about-property\">Buy SQFT</div>\r\n <div class=\"price justify-content-between d-flex\">\r\n <div class=\"left-price\">Price/Sq.ft</div>\r\n <div class=\"right-price\">\u20B9{{propertyDetails.financeDetails.pricePerSqFeet}}</div>\r\n </div>\r\n <div class=\"sqft-quantity d-flex justify-content-between w-100 align-items-center\">\r\n <div class=\"left-sqft\">SQFT Quantity</div>\r\n <div class=\"right-sqft d-flex align-items-center\">\r\n <mat-icon (click)=\"noOfSqft > 0 ? noOfSqft = noOfSqft - 1 : noOfSqft = 0\"\r\n class=\"d-flex align-items-center justify-content-center icon\">remove</mat-icon>\r\n <div class=\"sqft-number d-flex justify-content-center\"><input type=\"number\" [(ngModel)]=\"noOfSqft\"\r\n class=\"sqft-number additional-properties-2 text-center p-0 \"></div>\r\n <mat-icon (click)=\"noOfSqft = noOfSqft + 1\"\r\n class=\"d-flex align-items-center justify-content-center icon\">add</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"payable d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"payable-left\">\r\n <p class=\"pay-text\">Payable Amount</p><span class=\"pay-subtext\">(Incl. Fees & Other\r\n Levies)</span>\r\n </div>\r\n <div class=\"payable-right\">\r\n \u20B9{{ noOfSqft * propertyDetails.financeDetails.pricePerSqFeet}}\r\n </div>\r\n </div>\r\n <div class=\"buy\" (click)=\"purchaseProperty()\">\r\n Buy SQFT\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n<ng-template #skeleton>\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '72vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\" *ngFor=\"let item of skelArray\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '98%',\r\n 'border-radius': '5px',\r\n height: '23vh',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: ["*{font-family:DM Sans!important}.main-container{overflow-x:hidden}mat-icon{font-family:Material Icons!important}.property-numbers{padding:40px 60px 10px;background:#f2910b}.number-text{font-weight:700;font-size:35px;line-height:40px;color:#102031;font-family:DM Sans}.property-text{font-size:20px;font-weight:600;line-height:28px;color:#ffffffe6}.w-18{width:18%}.last-card{width:21%}.w-70{width:70%}.about-section{margin:30px auto}.about-property{background:#fff;border:1px solid rgba(0,0,0,.03);border-radius:10px;padding:10px;margin-bottom:15px}.head-about-property{font-weight:600;font-size:16px;line-height:26px;margin-bottom:10px}.about-property-text{font-weight:400;font-size:16px;line-height:29px;color:#01161eb3}.gap-10{gap:10px}.w-60{width:60%}.about-property-details{width:100%;justify-content:space-between;padding:13px 10px;background:#f6f5f5;border-radius:7px;margin-top:15px;margin-bottom:5px}.right-text{font-weight:500;font-size:16px;line-height:20px;color:#01161ecc}.left-text{font-weight:600;font-size:16px;line-height:20px;color:#01161e}.cards{width:30%;background:#f9fbff;border-radius:10px;padding:15px}.card-head{font-weight:600;font-size:16px;line-height:25px;text-align:center;overflow:hidden;text-overflow:ellipsis}.card-text{font-size:14px;font-weight:500;line-height:25px;text-align:center;overflow:hidden;text-overflow:ellipsis}.image-container img{height:8vh}.file{background:#f7f7f7;border-radius:5px;padding:12px;width:50%}.w-75{width:75%}.doc-text{font-size:16px;font-weight:500;line-height:26px;color:#000}.download-image{width:28px}.g-40{gap:40px}.w-40{width:40%}.sqft{background:linear-gradient(180deg,#0d1b2a,#172b40);color:#fff;width:85%;border-radius:8px;padding:15px}.right-price{width:50%;color:#fc9a11;font-size:28px;font-weight:700;line-height:32px;text-align:end}.left-price{width:50%;font-size:18px;font-weight:600;line-height:32px}.price{display:flex;background:#263f5a;border-radius:8px;padding:15px 10px}.buy{background:#36b37e;color:#fff;padding:15px;border-radius:8px;font-size:15px;font-weight:700;line-height:20px;text-align:center;cursor:pointer}.payable{padding:10px;background:#ffffffb3;border-radius:8px;margin-bottom:10px}.pay-text{font-size:14px;line-height:20px;font-weight:600;color:#000;margin-bottom:unset;border-radius:8px}.pay-subtext{font-size:10px;font-weight:500;color:#0006}.payable-right{font-weight:700;font-size:22px;line-height:32px;color:#fff}.card-container{overflow-x:scroll}.sqft-quantity{padding:15px 2px}.left-sqft{font-weight:600;font-size:16px;line-height:32px;color:#fff}.right-sqft{padding:4px;background:#f8a938;border-radius:4px;width:50%}.icon{font-size:16px;font-weight:700;color:#000;line-height:19px;width:30%;margin:0 2px}.sqft-number{background:#fff;width:70%;border-radius:4px;font-weight:700;font-size:20px;line-height:19px;color:#000;padding:10px;outline:unset}.tick-img{width:30px}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%;padding:30px}.pname{font-weight:600;font-size:34px;line-height:44px;color:#fff}.plocation{font-size:16px;font-weight:500;line-height:12px;color:#fff9}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.additional-properties-2{border:unset}.gap-5{gap:5px!important}.second-section-wrapper{display:flex;width:100%}.wrapper{width:30vw}.h-50{height:70vh!important}@media screen and (max-width : 475px){.property-numbers{flex-wrap:wrap;width:100%;padding:15px!important;margin-bottom:15px}.icon-text{width:50%}.last-card{width:100%!important}.right-text,.left-text{white-space:nowrap}.card-container{flex-direction:column;gap:10px;align-items:center}.cards{width:70%}.about-section{flex-direction:column;width:100%!important;margin:unset!important}.right{width:100%!important}.about-property{width:100%;border:none!important}.left{width:100%;margin:10px}.file-container{flex-direction:column}.file{width:100%!important}.sqft{width:95%}.height-30{height:30vh}.about-property-details{display:grid!important;width:100%}.propertyName{padding:10px!important}.pname{font-size:21px;line-height:10px}.additional-properties{height:1vh;width:8px!important}.number-text{font-size:26px}.property-text{font-size:18px}.head-about-property{text-align:center}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i3.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
10450
|
+
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 > 1 ? noOfSqft = noOfSqft - 1 : noOfSqft = 1\"\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 \" (keypress)=\"preventMinus($event)\"></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> 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"] }] }); }
|
|
10384
10451
|
}
|
|
10385
10452
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyDetailComponent, decorators: [{
|
|
10386
10453
|
type: Component,
|
|
10387
|
-
args: [{ selector: 'simpo-property-detail', standalone: true, imports: [NgFor, MatIcon, NgIf, FormsModule, MatDialogModule, NgxSkeletonLoaderModule, CommonModule, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section class=\"main-container\">\r\n <div id=\"carouselExampleInterval\" *ngIf=\"!skelLoader\" class=\"carousel slide p-relative\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\" >\r\n <div class=\"carousel-item active\" data-bs-interval=\"2000\" *ngFor=\"let img of propertyDetails.imgUrl\">\r\n <img [src]=\"img\" class=\"d-block w-100 height-30 h-50\" alt=\"property-image\">\r\n </div>\r\n <!-- <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div>\r\n <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div> -->\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-between\">\r\n <div class=\"property-details\">\r\n <p class=\"pname\">{{propertyDetails.name}}</p>\r\n <span class=\"plocation d-flex align-items-center gap-5\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\"\r\n alt=\"location image\"> {{propertyDetails.location}}</span>\r\n </div>\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <!-- d-flex justify-content-end align-items-end -->\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <!-- additional-properties-1 -->\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" [attr.data-bs-slide-to]=\"i\"\r\n class=\"active additional-properties\" aria-current=\"true\" aria-label=\"Slide 1\"\r\n *ngFor=\"let slide of propertyDetails.imgUrl;let i = index\"></button>\r\n <!-- class=\"additional-properties\" -->\r\n <!-- <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\" class=\"additional-properties\"></button>\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\" class=\"additional-properties\"></button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"row\" *ngIf=\"skelLoader\">\r\n <div class=\"col-12\" >\r\n <ng-container *ngTemplateOutlet=\"skeleton\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"property-numbers d-flex justify-content-between\" *ngIf=\"!skelLoader\">\r\n <ng-container>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.pricePerSqFeet || 0 }}</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Price/Sq.ft</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.indicativeMarketValue || 0 }}</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Indicative Market Value</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.irr || 0 }}%</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Internal Returns Rate</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.annualReturn || 0 }}%</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Annual Returns</p>\r\n </div>\r\n </div>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <ng-container>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/273918c1739173355725checked%201.png\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container>\r\n <p class=\"number-text mb-0\">{{ propertyDetails?.financeDetails?.annualReturn || 0}}%</p>\r\n </div>\r\n <div class=\"text-1 text-center\">\r\n <p class=\"property-text\">Guaranteed annual capital growth</p>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"about-section w-70 d-flex g-40\" *ngIf=\"!skelLoader\">\r\n <div class=\"right w-60 \">\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">About Property</div>\r\n <div class=\"about-property-text\">{{propertyDetails.description}}</div>\r\n <div class=\"about-property-details d-flex gap-10\">\r\n <ng-container>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Type: </div>\r\n <div class=\"left-text\">{{propertyDetails.propertyType}}</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Size:</div>\r\n <div class=\"left-text\">{{propertyDetails.totalAreaSqFeet}}sqft</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">year:</div>\r\n <div class=\"left-text\">{{propertyDetails.year}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\" *ngIf=\"(propertyDetails?.benefits?.length || 0) > 0\">\r\n <div class=\"head-about-property\">Investment Benefit</div>\r\n <div class=\"card-container d-flex gap-10\">\r\n <ng-container *ngFor=\"let benefits of propertyDetails.benefits\">\r\n <div class=\"cards\">\r\n <div class=\"image-container w-100 d-flex justify-content-center\">\r\n <img [src]=\"benefits.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"card-head\">{{benefits.title}}</div>\r\n <div class=\"card-text\">{{benefits.description}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">Documents & Reports</div>\r\n <div class=\"file-container d-flex justify-content-between gap-10\">\r\n <div class=\"file d-flex justify-content-between\" *ngFor=\"let ele of pdfCards\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/678394c1739183726107image%209.png\"\r\n alt=\"pdf\">\r\n <div class=\"doc-text w-75 d-flex align-items-center\"> {{ele.length > 15 ?\r\n ele.substring(0,15)+'...' : ele }}</div>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/195414c1739183779845fi_3502477.png\"\r\n alt=\"download\" class=\"download-img\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"left w-40\">\r\n <div class=\"sqft\">\r\n <div class=\"head-about-property\">Buy SQFT</div>\r\n <div class=\"price justify-content-between d-flex\">\r\n <div class=\"left-price\">Price/Sq.ft</div>\r\n <div class=\"right-price\">\u20B9{{propertyDetails.financeDetails.pricePerSqFeet}}</div>\r\n </div>\r\n <div class=\"sqft-quantity d-flex justify-content-between w-100 align-items-center\">\r\n <div class=\"left-sqft\">SQFT Quantity</div>\r\n <div class=\"right-sqft d-flex align-items-center\">\r\n <mat-icon (click)=\"noOfSqft > 0 ? noOfSqft = noOfSqft - 1 : noOfSqft = 0\"\r\n class=\"d-flex align-items-center justify-content-center icon\">remove</mat-icon>\r\n <div class=\"sqft-number d-flex justify-content-center\"><input type=\"number\" [(ngModel)]=\"noOfSqft\"\r\n class=\"sqft-number additional-properties-2 text-center p-0 \"></div>\r\n <mat-icon (click)=\"noOfSqft = noOfSqft + 1\"\r\n class=\"d-flex align-items-center justify-content-center icon\">add</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"payable d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"payable-left\">\r\n <p class=\"pay-text\">Payable Amount</p><span class=\"pay-subtext\">(Incl. Fees & Other\r\n Levies)</span>\r\n </div>\r\n <div class=\"payable-right\">\r\n \u20B9{{ noOfSqft * propertyDetails.financeDetails.pricePerSqFeet}}\r\n </div>\r\n </div>\r\n <div class=\"buy\" (click)=\"purchaseProperty()\">\r\n Buy SQFT\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n<ng-template #skeleton>\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '72vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\" *ngFor=\"let item of skelArray\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '98%',\r\n 'border-radius': '5px',\r\n height: '23vh',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: ["*{font-family:DM Sans!important}.main-container{overflow-x:hidden}mat-icon{font-family:Material Icons!important}.property-numbers{padding:40px 60px 10px;background:#f2910b}.number-text{font-weight:700;font-size:35px;line-height:40px;color:#102031;font-family:DM Sans}.property-text{font-size:20px;font-weight:600;line-height:28px;color:#ffffffe6}.w-18{width:18%}.last-card{width:21%}.w-70{width:70%}.about-section{margin:30px auto}.about-property{background:#fff;border:1px solid rgba(0,0,0,.03);border-radius:10px;padding:10px;margin-bottom:15px}.head-about-property{font-weight:600;font-size:16px;line-height:26px;margin-bottom:10px}.about-property-text{font-weight:400;font-size:16px;line-height:29px;color:#01161eb3}.gap-10{gap:10px}.w-60{width:60%}.about-property-details{width:100%;justify-content:space-between;padding:13px 10px;background:#f6f5f5;border-radius:7px;margin-top:15px;margin-bottom:5px}.right-text{font-weight:500;font-size:16px;line-height:20px;color:#01161ecc}.left-text{font-weight:600;font-size:16px;line-height:20px;color:#01161e}.cards{width:30%;background:#f9fbff;border-radius:10px;padding:15px}.card-head{font-weight:600;font-size:16px;line-height:25px;text-align:center;overflow:hidden;text-overflow:ellipsis}.card-text{font-size:14px;font-weight:500;line-height:25px;text-align:center;overflow:hidden;text-overflow:ellipsis}.image-container img{height:8vh}.file{background:#f7f7f7;border-radius:5px;padding:12px;width:50%}.w-75{width:75%}.doc-text{font-size:16px;font-weight:500;line-height:26px;color:#000}.download-image{width:28px}.g-40{gap:40px}.w-40{width:40%}.sqft{background:linear-gradient(180deg,#0d1b2a,#172b40);color:#fff;width:85%;border-radius:8px;padding:15px}.right-price{width:50%;color:#fc9a11;font-size:28px;font-weight:700;line-height:32px;text-align:end}.left-price{width:50%;font-size:18px;font-weight:600;line-height:32px}.price{display:flex;background:#263f5a;border-radius:8px;padding:15px 10px}.buy{background:#36b37e;color:#fff;padding:15px;border-radius:8px;font-size:15px;font-weight:700;line-height:20px;text-align:center;cursor:pointer}.payable{padding:10px;background:#ffffffb3;border-radius:8px;margin-bottom:10px}.pay-text{font-size:14px;line-height:20px;font-weight:600;color:#000;margin-bottom:unset;border-radius:8px}.pay-subtext{font-size:10px;font-weight:500;color:#0006}.payable-right{font-weight:700;font-size:22px;line-height:32px;color:#fff}.card-container{overflow-x:scroll}.sqft-quantity{padding:15px 2px}.left-sqft{font-weight:600;font-size:16px;line-height:32px;color:#fff}.right-sqft{padding:4px;background:#f8a938;border-radius:4px;width:50%}.icon{font-size:16px;font-weight:700;color:#000;line-height:19px;width:30%;margin:0 2px}.sqft-number{background:#fff;width:70%;border-radius:4px;font-weight:700;font-size:20px;line-height:19px;color:#000;padding:10px;outline:unset}.tick-img{width:30px}.p-relative{position:relative}.propertyName{position:absolute;bottom:0;width:100%;padding:30px}.pname{font-weight:600;font-size:34px;line-height:44px;color:#fff}.plocation{font-size:16px;font-weight:500;line-height:12px;color:#fff9}.additional-properties{border-radius:50%;height:1vh;width:8px!important}.additional-properties-1{position:unset!important;padding:unset!important;margin:unset!important;width:100%}.additional-properties-2{border:unset}.gap-5{gap:5px!important}.second-section-wrapper{display:flex;width:100%}.wrapper{width:30vw}.h-50{height:70vh!important}@media screen and (max-width : 475px){.property-numbers{flex-wrap:wrap;width:100%;padding:15px!important;margin-bottom:15px}.icon-text{width:50%}.last-card{width:100%!important}.right-text,.left-text{white-space:nowrap}.card-container{flex-direction:column;gap:10px;align-items:center}.cards{width:70%}.about-section{flex-direction:column;width:100%!important;margin:unset!important}.right{width:100%!important}.about-property{width:100%;border:none!important}.left{width:100%;margin:10px}.file-container{flex-direction:column}.file{width:100%!important}.sqft{width:95%}.height-30{height:30vh}.about-property-details{display:grid!important;width:100%}.propertyName{padding:10px!important}.pname{font-size:21px;line-height:10px}.additional-properties{height:1vh;width:8px!important}.number-text{font-size:26px}.property-text{font-size:18px}.head-about-property{text-align:center}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
10454
|
+
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 > 1 ? noOfSqft = noOfSqft - 1 : noOfSqft = 1\"\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 \" (keypress)=\"preventMinus($event)\"></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> 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"] }]
|
|
10388
10455
|
}], ctorParameters: () => [{ type: RestService }, { type: i2$2.ActivatedRoute }, { type: i2$2.Router }, { type: i5.MatDialog }, { type: i4$1.MessageService }], propDecorators: { data: [{
|
|
10389
10456
|
type: Input
|
|
10390
10457
|
}] } });
|
|
@@ -10483,18 +10550,18 @@ class SignupSigninComponent extends BaseSection {
|
|
|
10483
10550
|
}
|
|
10484
10551
|
}
|
|
10485
10552
|
verifyPhoneEmail() {
|
|
10486
|
-
this.showWarning = false
|
|
10553
|
+
// this.showWarning = false
|
|
10487
10554
|
if (this.isValidEmail(this.investor.emailId) && this.isValidPhone(this.investor.phoneNumber)) {
|
|
10488
10555
|
this.restService.verifyEmailPhone(this.investor.phoneNumber, this.investor.emailId).subscribe({
|
|
10489
10556
|
next: (res) => {
|
|
10490
|
-
this.showWarning = false
|
|
10557
|
+
// this.showWarning = false
|
|
10491
10558
|
},
|
|
10492
10559
|
error: (err) => {
|
|
10493
|
-
this.showWarning = true;
|
|
10560
|
+
// this.showWarning = true;
|
|
10494
10561
|
this.messageService.add({
|
|
10495
10562
|
severity: 'error',
|
|
10496
10563
|
summary: 'Sign Up',
|
|
10497
|
-
detail:
|
|
10564
|
+
detail: `${err.message}`
|
|
10498
10565
|
});
|
|
10499
10566
|
}
|
|
10500
10567
|
});
|
|
@@ -10563,7 +10630,7 @@ class SignupSigninComponent extends BaseSection {
|
|
|
10563
10630
|
this.messageService.add({
|
|
10564
10631
|
severity: 'success',
|
|
10565
10632
|
summary: 'OTP',
|
|
10566
|
-
detail:
|
|
10633
|
+
detail: `OTP Sent to this ${this.investor.emailId}`
|
|
10567
10634
|
});
|
|
10568
10635
|
this.currentPage = 'OTP_VERIFY';
|
|
10569
10636
|
this.buttonLoader = false;
|
|
@@ -10713,7 +10780,8 @@ class SignupSigninComponent extends BaseSection {
|
|
|
10713
10780
|
return emailRegex.test(email.trim());
|
|
10714
10781
|
}
|
|
10715
10782
|
isValidPhone(phno) {
|
|
10716
|
-
const phoneRegex = /^[6789]\d{9}
|
|
10783
|
+
const phoneRegex = /^[6789]\d{9}$/;
|
|
10784
|
+
console.log(phoneRegex.test(phno.trim()));
|
|
10717
10785
|
return phoneRegex.test(phno.trim());
|
|
10718
10786
|
}
|
|
10719
10787
|
getKycDetails() {
|
|
@@ -10772,7 +10840,7 @@ class SignupSigninComponent extends BaseSection {
|
|
|
10772
10840
|
});
|
|
10773
10841
|
}
|
|
10774
10842
|
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 }); }
|
|
10775
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SignupSigninComponent, isStandalone: true, selector: "simpo-signup-signin", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"main-container h-85 d-flex align-items-center justify-content-center\"\r\n [ngStyle]=\"{'background-image': 'url(' + backgroundImage + ')'}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"middle-container w-40-85\" [id]=\"data?.id\" [simpoBackground]=\"data?.styles?.background\"\r\n [simpoAnimation]=\"data?.styles?.animation\" [simpoCorner]=\"data?.styles?.corners\">\r\n <div class=\"head\">{{ currentPage == 'LOGIN' || currentPage == 'OTP' ? \"Sign In\" : currentPage ==\r\n 'FORGOT_PASSWORD' ? \"Forgot Password\" : currentPage == 'OTP_VERIFY' ? \"OTP Verfication\" : \"Sign Up\"}}</div>\r\n <div class=\"field-container\">\r\n <div class=\"field mb-15\" *ngIf=\"(currentPage == 'LOGIN' || currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && !showForgotFields\">\r\n <div class=\"field-head\">Email</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Registered Email\" [(ngModel)]=\"loginEmail\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && otpSent && !showForgotFields\">\r\n <div class=\"field-head\">OTP</div>\r\n <div class=\"field-text-1\">\r\n <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n [(ngModel)]=\"loginOtpArray[idx]\" (keyup)=\"moveLoginOtpCursor($event, idx)\" [id]=\"'loginOtp_'+idx\" #otpInput />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP_VERIFY'\">\r\n <!-- <div class=\"field-head\" *ngIf=\"currentPage == 'OTP' \">OTP</div> -->\r\n <div class=\"field-text-1\">\r\n <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n [(ngModel)]=\"otpArray[idx]\" (keyup)=\"move($event, idx)\" [id]=\"'otp_'+idx\" #otpInput />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Name</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Name\" [(ngModel)]=\"investor.fullName\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Email</div>\r\n <div class=\"field-text\" [class.border-red]=\"showWarning || invalidEmail\">\r\n <input type=\"email\" placeholder=\"Please Enter Your Email\" [(ngModel)]=\"investor.emailId\" (ngModelChange)=\"verifyPhoneEmail()\" (blur)=\"validEmail()\" >\r\n </div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"showWarning\">User Already Exist</div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"invalidEmail\">Invalid Email (Eg: johndoe@gmail.com)</div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Phone Number</div>\r\n <div class=\"field-text\" [class.border-red]=\"showWarning || invalidPhone\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Phone Number\" [(ngModel)]=\"investor.phoneNumber\" (ngModelChange)=\"verifyPhoneEmail()\" (blur)=\"validPhone()\" >\r\n </div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"showWarning\">User Already Exist</div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"invalidPhone\">Invalid Phone number</div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD' && showForgotFields\" >\r\n <div class=\"field-head\">New Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"newPassword\">\r\n <mat-icon (click)=\"textType = 'text'\" *ngIf=\"textType == 'password'\">visibility</mat-icon>\r\n <mat-icon (click)=\"textType = 'password'\" *ngIf=\"textType == 'text'\">visibility_off</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD' && showForgotFields\" >\r\n <div class=\"field-head\">Re-Enter Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType1\" placeholder=\"Please Re-Enter Your Password\" [(ngModel)]=\"reEnteredPassword\">\r\n <mat-icon (click)=\"textType1 = 'text'\" *ngIf=\"textType1 == 'password'\">visibility</mat-icon>\r\n <mat-icon (click)=\"textType1 = 'password'\" *ngIf=\"textType1 == 'text'\">visibility_off</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'SIGN_UP' \">\r\n <div class=\"field-head\">Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"investor.password\">\r\n <mat-icon (click)=\"textType = 'text'\" *ngIf=\"textType == 'password'\">visibility</mat-icon>\r\n <mat-icon (click)=\"textType = 'password'\" *ngIf=\"textType == 'text'\">visibility_off</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"currentPage == 'LOGIN'\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">Forgot Password?</div>\r\n <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"currentPage == 'OTP_VERIFY' || otpSent\" (click)=\"isSignUp ? sendOtp() : sendOtpForLogin();resend = true\">Resend OTP?</div>\r\n <div class=\"btn-container d-flex align-items-center justify-content-center\">\r\n <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage != 'OTP' && (currentPage !== 'FORGOT_PASSWORD' || showForgotFields)\"\r\n (click)=\"buttonClickedEvent()\" [disabled]=\"buttonLoader\" [class.btn-size]=\"currentPage == 'FORGOT_PASSWORD' || currentPage == 'SIGN_UP' || currentPage == 'OTP_VERIFY'\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\">{{ currentPage ==\r\n 'LOGIN' ? \"Login\" : currentPage == 'FORGOT_PASSWORD' ? \"Reset Password\" :\r\n currentPage == 'OTP_VERIFY' ? 'Verify OTP' : \"Create Account\"}}</span></button>\r\n\r\n <button class=\"login-btn cursor-pointer\" (click)=\"sendOtpForLogin()\" [disabled]=\"buttonLoader\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && !otpSent && !showForgotFields\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\">Send Otp</span>\r\n </button>\r\n\r\n <button class=\"login-btn cursor-pointer\" (click)=\"verifyOtp()\" [disabled]=\"buttonLoader\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && otpSent && !showForgotFields\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\" >{{currentPage == 'OTP' ? \"Login\" : \"Proceed to Change Password\"}}</span>\r\n </button>\r\n </div>\r\n <div class=\"another-page\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n <div class=\"signup-text\">Don\u2019t have an account? <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'SIGN_UP';loginEmail = '';investor.password = '';investor.phoneNumber = '';otpSent = false;investor.emailId = ''\">Sign\r\n Up</span></div>\r\n <div class=\"signup-text m-5\">or</div>\r\n <div class=\"signup-text\">Login with <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'LOGIN' \"\r\n (click)=\"currentPage = 'OTP'\">OTP</span><span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP'\"\r\n (click)=\"currentPage = 'LOGIN';loginEmail = '';otpSent = false\">Password</span></div>\r\n </div>\r\n <div class=\"another-page\" *ngIf=\"currentPage == 'SIGN_UP' || currentPage == 'FORGOT_PASSWORD'\">\r\n <div class=\"signup-text\">Already have an account? <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'LOGIN';loginEmail = '';investor.password = '';investor.phoneNumber = '';otpSent = false;showForgotFields = false\">Sign\r\n In</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.h-85{height:85vh;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.w-40-85{width:40%}.btn-size{width:40%!important}.head{font-size:36px;font-weight:600;line-height:52px;color:#112133;text-align:center;padding:15px;padding-bottom:unset}.field-container{padding:15px}.field-head{margin-bottom:10px;font-size:17px;font-weight:600;line-height:24px;color:#2c2c2c}.field-text{padding:10px;border-radius:20px;font-size:15px;font-weight:400;color:#ababab;background:#fff}.field-text input{width:100%;border:none;appearance:none;outline:unset;background:#fff;color:#000}.forgot-password{text-align:end;font-size:16px;font-weight:600;line-height:24px;margin-bottom:15px}.another-page{margin-top:15px;text-align:center}.signup-text{color:#6b6b6b;font-size:14px;font-weight:400;line-height:24px;margin-bottom:5px}.m-5{margin:5px 0!important}.mb-30{margin-bottom:30px!important}.mb-15{margin-bottom:15px!important}.login-btn{border:unset;padding:12px 18px;border-radius:6px;font-size:18px!important;font-weight:600;line-height:20px}.span-text{font-weight:700!important}.cursor-pointer{cursor:pointer}.additional-styles{padding:25px!important;width:10%!important;border:unset!important;border-radius:20px!important}.clr-red{color:red;font-size:12px}.border-red{border:1px solid red!important}@media screen and (max-width : 475px){.w-40-85{width:85%}.h-86{height:90vh!important}.btn-size{width:100%!important;white-space:nowrap}.additional-styles{width:15%!important;border-radius:10px!important}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
10843
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SignupSigninComponent, isStandalone: true, selector: "simpo-signup-signin", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"main-container h-85 d-flex align-items-center justify-content-center\"\r\n [ngStyle]=\"{'background-image': 'url(' + backgroundImage + ')'}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"middle-container w-40-85\" [id]=\"data?.id\" [simpoBackground]=\"data?.styles?.background\"\r\n [simpoAnimation]=\"data?.styles?.animation\" [simpoCorner]=\"data?.styles?.corners\">\r\n <div class=\"head\">{{ currentPage == 'LOGIN' || currentPage == 'OTP' ? \"Sign In\" : currentPage ==\r\n 'FORGOT_PASSWORD' ? \"Forgot Password\" : currentPage == 'OTP_VERIFY' ? \"OTP Verfication\" : \"Sign Up\"}}</div>\r\n <div class=\"field-container\">\r\n <div class=\"field mb-15\" *ngIf=\"(currentPage == 'LOGIN' || currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && !showForgotFields\">\r\n <div class=\"field-head\">Email</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Registered Email\" [(ngModel)]=\"loginEmail\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && otpSent && !showForgotFields\">\r\n <div class=\"field-head\">OTP</div>\r\n <div class=\"field-text-1\">\r\n <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n [(ngModel)]=\"loginOtpArray[idx]\" (keyup)=\"moveLoginOtpCursor($event, idx)\" [id]=\"'loginOtp_'+idx\" #otpInput />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP_VERIFY'\">\r\n <!-- <div class=\"field-head\" *ngIf=\"currentPage == 'OTP' \">OTP</div> -->\r\n <div class=\"field-text-1\">\r\n <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n [(ngModel)]=\"otpArray[idx]\" (keyup)=\"move($event, idx)\" [id]=\"'otp_'+idx\" #otpInput />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Name</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Name\" [(ngModel)]=\"investor.fullName\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Email</div>\r\n <div class=\"field-text\" [class.border-red]=\"showWarning || invalidEmail\">\r\n <input type=\"email\" placeholder=\"Please Enter Your Email\" [(ngModel)]=\"investor.emailId\" (ngModelChange)=\"verifyPhoneEmail()\" (blur)=\"validEmail()\" >\r\n </div>\r\n <!-- <div class=\"warning-text clr-red\" *ngIf=\"showWarning\">User Already Exist</div> -->\r\n <div class=\"warning-text clr-red\" *ngIf=\"invalidEmail\">Invalid Email (Eg: johndoe@gmail.com)</div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Phone Number</div>\r\n <div class=\"field-text\" [class.border-red]=\"showWarning || invalidPhone\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Phone Number\" [(ngModel)]=\"investor.phoneNumber\" (ngModelChange)=\"verifyPhoneEmail()\" (blur)=\"validPhone()\" >\r\n </div>\r\n <!-- <div class=\"warning-text clr-red\" *ngIf=\"showWarning\">User Already Exist</div> -->\r\n <div class=\"warning-text clr-red\" *ngIf=\"invalidPhone\">Invalid Phone number</div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD' && showForgotFields\" >\r\n <div class=\"field-head\">New Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"newPassword\">\r\n <mat-icon (click)=\"textType = 'text'\" *ngIf=\"textType == 'password'\">visibility_off</mat-icon>\r\n <mat-icon (click)=\"textType = 'password'\" *ngIf=\"textType == 'text'\">visibility</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_off</mat-icon>\r\n <mat-icon (click)=\"textType1 = 'password'\" *ngIf=\"textType1 == 'text'\">visibility</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_off</mat-icon>\r\n <mat-icon (click)=\"textType = 'password'\" *ngIf=\"textType == 'text'\">visibility</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"currentPage == 'LOGIN'\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">Forgot Password?</div>\r\n <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"currentPage == 'OTP_VERIFY' || otpSent\" (click)=\"isSignUp ? sendOtp() : sendOtpForLogin();resend = true\">Resend OTP?</div>\r\n <div class=\"btn-container d-flex align-items-center justify-content-center\">\r\n <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage != 'OTP' && (currentPage !== 'FORGOT_PASSWORD' || showForgotFields)\"\r\n (click)=\"buttonClickedEvent()\" [disabled]=\"buttonLoader\" [class.btn-size]=\"currentPage == 'FORGOT_PASSWORD' || currentPage == 'SIGN_UP' || currentPage == 'OTP_VERIFY'\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\">{{ currentPage ==\r\n 'LOGIN' ? \"Login\" : currentPage == 'FORGOT_PASSWORD' ? \"Reset Password\" :\r\n currentPage == 'OTP_VERIFY' ? 'Verify OTP' : \"Create Account\"}}</span></button>\r\n\r\n <button class=\"login-btn cursor-pointer\" (click)=\"sendOtpForLogin()\" [disabled]=\"buttonLoader\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && !otpSent && !showForgotFields\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\">Send Otp</span>\r\n </button>\r\n\r\n <button class=\"login-btn cursor-pointer\" (click)=\"verifyOtp()\" [disabled]=\"buttonLoader\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && otpSent && !showForgotFields\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\" >{{currentPage == 'OTP' ? \"Login\" : \"Proceed to Change Password\"}}</span>\r\n </button>\r\n </div>\r\n <div class=\"another-page\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n <div class=\"signup-text\">Don\u2019t have an account? <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'SIGN_UP';loginEmail = '';investor.password = '';investor.phoneNumber = '';otpSent = false;investor.emailId = ''\">Sign\r\n Up</span></div>\r\n <div class=\"signup-text m-5\">or</div>\r\n <div class=\"signup-text\">Login with <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'LOGIN' \"\r\n (click)=\"currentPage = 'OTP'\">OTP</span><span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP'\"\r\n (click)=\"currentPage = 'LOGIN';loginEmail = '';otpSent = false\">Password</span></div>\r\n </div>\r\n <div class=\"another-page\" *ngIf=\"currentPage == 'SIGN_UP' || currentPage == 'FORGOT_PASSWORD'\">\r\n <div class=\"signup-text\">Already have an account? <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'LOGIN';loginEmail = '';investor.password = '';investor.phoneNumber = '';otpSent = false;showForgotFields = false\">Sign\r\n In</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.h-85{height:85vh;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.w-40-85{width:40%}.btn-size{width:40%!important}.head{font-size:36px;font-weight:600;line-height:52px;color:#112133;text-align:center;padding:15px;padding-bottom:unset}.field-container{padding:15px}.field-head{margin-bottom:10px;font-size:17px;font-weight:600;line-height:24px;color:#2c2c2c}.field-text{padding:10px;border-radius:20px;font-size:15px;font-weight:400;color:#ababab;background:#fff}.field-text input{width:100%;border:none;appearance:none;outline:unset;background:#fff;color:#000}.forgot-password{text-align:end;font-size:16px;font-weight:600;line-height:24px;margin-bottom:15px}.another-page{margin-top:15px;text-align:center}.signup-text{color:#6b6b6b;font-size:14px;font-weight:400;line-height:24px;margin-bottom:5px}.m-5{margin:5px 0!important}.mb-30{margin-bottom:30px!important}.mb-15{margin-bottom:15px!important}.login-btn{border:unset;padding:12px 18px;border-radius:6px;font-size:18px!important;font-weight:600;line-height:20px}.span-text{font-weight:700!important}.cursor-pointer{cursor:pointer}.additional-styles{padding:25px!important;width:10%!important;border:unset!important;border-radius:20px!important}.clr-red{color:red;font-size:12px}.border-red{border:1px solid red!important}@media screen and (max-width : 475px){.w-40-85{width:85%}.h-86{height:90vh!important}.btn-size{width:100%!important;white-space:nowrap}.additional-styles{width:15%!important;border-radius:10px!important}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
10776
10844
|
//Directives
|
|
10777
10845
|
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"] }] }); }
|
|
10778
10846
|
}
|
|
@@ -10791,7 +10859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
10791
10859
|
AnimationDirective,
|
|
10792
10860
|
CornerDirective,
|
|
10793
10861
|
ToastModule
|
|
10794
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"main-container h-85 d-flex align-items-center justify-content-center\"\r\n [ngStyle]=\"{'background-image': 'url(' + backgroundImage + ')'}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"middle-container w-40-85\" [id]=\"data?.id\" [simpoBackground]=\"data?.styles?.background\"\r\n [simpoAnimation]=\"data?.styles?.animation\" [simpoCorner]=\"data?.styles?.corners\">\r\n <div class=\"head\">{{ currentPage == 'LOGIN' || currentPage == 'OTP' ? \"Sign In\" : currentPage ==\r\n 'FORGOT_PASSWORD' ? \"Forgot Password\" : currentPage == 'OTP_VERIFY' ? \"OTP Verfication\" : \"Sign Up\"}}</div>\r\n <div class=\"field-container\">\r\n <div class=\"field mb-15\" *ngIf=\"(currentPage == 'LOGIN' || currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && !showForgotFields\">\r\n <div class=\"field-head\">Email</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Registered Email\" [(ngModel)]=\"loginEmail\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && otpSent && !showForgotFields\">\r\n <div class=\"field-head\">OTP</div>\r\n <div class=\"field-text-1\">\r\n <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n [(ngModel)]=\"loginOtpArray[idx]\" (keyup)=\"moveLoginOtpCursor($event, idx)\" [id]=\"'loginOtp_'+idx\" #otpInput />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP_VERIFY'\">\r\n <!-- <div class=\"field-head\" *ngIf=\"currentPage == 'OTP' \">OTP</div> -->\r\n <div class=\"field-text-1\">\r\n <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n [(ngModel)]=\"otpArray[idx]\" (keyup)=\"move($event, idx)\" [id]=\"'otp_'+idx\" #otpInput />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Name</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Name\" [(ngModel)]=\"investor.fullName\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Email</div>\r\n <div class=\"field-text\" [class.border-red]=\"showWarning || invalidEmail\">\r\n <input type=\"email\" placeholder=\"Please Enter Your Email\" [(ngModel)]=\"investor.emailId\" (ngModelChange)=\"verifyPhoneEmail()\" (blur)=\"validEmail()\" >\r\n </div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"showWarning\">User Already Exist</div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"invalidEmail\">Invalid Email (Eg: johndoe@gmail.com)</div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Phone Number</div>\r\n <div class=\"field-text\" [class.border-red]=\"showWarning || invalidPhone\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Phone Number\" [(ngModel)]=\"investor.phoneNumber\" (ngModelChange)=\"verifyPhoneEmail()\" (blur)=\"validPhone()\" >\r\n </div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"showWarning\">User Already Exist</div>\r\n <div class=\"warning-text clr-red\" *ngIf=\"invalidPhone\">Invalid Phone number</div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD' && showForgotFields\" >\r\n <div class=\"field-head\">New Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"newPassword\">\r\n <mat-icon (click)=\"textType = 'text'\" *ngIf=\"textType == 'password'\">visibility</mat-icon>\r\n <mat-icon (click)=\"textType = 'password'\" *ngIf=\"textType == 'text'\">visibility_off</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD' && showForgotFields\" >\r\n <div class=\"field-head\">Re-Enter Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType1\" placeholder=\"Please Re-Enter Your Password\" [(ngModel)]=\"reEnteredPassword\">\r\n <mat-icon (click)=\"textType1 = 'text'\" *ngIf=\"textType1 == 'password'\">visibility</mat-icon>\r\n <mat-icon (click)=\"textType1 = 'password'\" *ngIf=\"textType1 == 'text'\">visibility_off</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'SIGN_UP' \">\r\n <div class=\"field-head\">Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"investor.password\">\r\n <mat-icon (click)=\"textType = 'text'\" *ngIf=\"textType == 'password'\">visibility</mat-icon>\r\n <mat-icon (click)=\"textType = 'password'\" *ngIf=\"textType == 'text'\">visibility_off</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"currentPage == 'LOGIN'\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">Forgot Password?</div>\r\n <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"currentPage == 'OTP_VERIFY' || otpSent\" (click)=\"isSignUp ? sendOtp() : sendOtpForLogin();resend = true\">Resend OTP?</div>\r\n <div class=\"btn-container d-flex align-items-center justify-content-center\">\r\n <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage != 'OTP' && (currentPage !== 'FORGOT_PASSWORD' || showForgotFields)\"\r\n (click)=\"buttonClickedEvent()\" [disabled]=\"buttonLoader\" [class.btn-size]=\"currentPage == 'FORGOT_PASSWORD' || currentPage == 'SIGN_UP' || currentPage == 'OTP_VERIFY'\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\">{{ currentPage ==\r\n 'LOGIN' ? \"Login\" : currentPage == 'FORGOT_PASSWORD' ? \"Reset Password\" :\r\n currentPage == 'OTP_VERIFY' ? 'Verify OTP' : \"Create Account\"}}</span></button>\r\n\r\n <button class=\"login-btn cursor-pointer\" (click)=\"sendOtpForLogin()\" [disabled]=\"buttonLoader\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && !otpSent && !showForgotFields\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\">Send Otp</span>\r\n </button>\r\n\r\n <button class=\"login-btn cursor-pointer\" (click)=\"verifyOtp()\" [disabled]=\"buttonLoader\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && otpSent && !showForgotFields\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\" >{{currentPage == 'OTP' ? \"Login\" : \"Proceed to Change Password\"}}</span>\r\n </button>\r\n </div>\r\n <div class=\"another-page\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n <div class=\"signup-text\">Don\u2019t have an account? <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'SIGN_UP';loginEmail = '';investor.password = '';investor.phoneNumber = '';otpSent = false;investor.emailId = ''\">Sign\r\n Up</span></div>\r\n <div class=\"signup-text m-5\">or</div>\r\n <div class=\"signup-text\">Login with <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'LOGIN' \"\r\n (click)=\"currentPage = 'OTP'\">OTP</span><span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP'\"\r\n (click)=\"currentPage = 'LOGIN';loginEmail = '';otpSent = false\">Password</span></div>\r\n </div>\r\n <div class=\"another-page\" *ngIf=\"currentPage == 'SIGN_UP' || currentPage == 'FORGOT_PASSWORD'\">\r\n <div class=\"signup-text\">Already have an account? <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'LOGIN';loginEmail = '';investor.password = '';investor.phoneNumber = '';otpSent = false;showForgotFields = false\">Sign\r\n In</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.h-85{height:85vh;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.w-40-85{width:40%}.btn-size{width:40%!important}.head{font-size:36px;font-weight:600;line-height:52px;color:#112133;text-align:center;padding:15px;padding-bottom:unset}.field-container{padding:15px}.field-head{margin-bottom:10px;font-size:17px;font-weight:600;line-height:24px;color:#2c2c2c}.field-text{padding:10px;border-radius:20px;font-size:15px;font-weight:400;color:#ababab;background:#fff}.field-text input{width:100%;border:none;appearance:none;outline:unset;background:#fff;color:#000}.forgot-password{text-align:end;font-size:16px;font-weight:600;line-height:24px;margin-bottom:15px}.another-page{margin-top:15px;text-align:center}.signup-text{color:#6b6b6b;font-size:14px;font-weight:400;line-height:24px;margin-bottom:5px}.m-5{margin:5px 0!important}.mb-30{margin-bottom:30px!important}.mb-15{margin-bottom:15px!important}.login-btn{border:unset;padding:12px 18px;border-radius:6px;font-size:18px!important;font-weight:600;line-height:20px}.span-text{font-weight:700!important}.cursor-pointer{cursor:pointer}.additional-styles{padding:25px!important;width:10%!important;border:unset!important;border-radius:20px!important}.clr-red{color:red;font-size:12px}.border-red{border:1px solid red!important}@media screen and (max-width : 475px){.w-40-85{width:85%}.h-86{height:90vh!important}.btn-size{width:100%!important;white-space:nowrap}.additional-styles{width:15%!important;border-radius:10px!important}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
10862
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section [id]=\"data?.id\" class=\"main-container h-85 d-flex align-items-center justify-content-center\"\r\n [ngStyle]=\"{'background-image': 'url(' + backgroundImage + ')'}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"middle-container w-40-85\" [id]=\"data?.id\" [simpoBackground]=\"data?.styles?.background\"\r\n [simpoAnimation]=\"data?.styles?.animation\" [simpoCorner]=\"data?.styles?.corners\">\r\n <div class=\"head\">{{ currentPage == 'LOGIN' || currentPage == 'OTP' ? \"Sign In\" : currentPage ==\r\n 'FORGOT_PASSWORD' ? \"Forgot Password\" : currentPage == 'OTP_VERIFY' ? \"OTP Verfication\" : \"Sign Up\"}}</div>\r\n <div class=\"field-container\">\r\n <div class=\"field mb-15\" *ngIf=\"(currentPage == 'LOGIN' || currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && !showForgotFields\">\r\n <div class=\"field-head\">Email</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Registered Email\" [(ngModel)]=\"loginEmail\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && otpSent && !showForgotFields\">\r\n <div class=\"field-head\">OTP</div>\r\n <div class=\"field-text-1\">\r\n <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n [(ngModel)]=\"loginOtpArray[idx]\" (keyup)=\"moveLoginOtpCursor($event, idx)\" [id]=\"'loginOtp_'+idx\" #otpInput />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP_VERIFY'\">\r\n <!-- <div class=\"field-head\" *ngIf=\"currentPage == 'OTP' \">OTP</div> -->\r\n <div class=\"field-text-1\">\r\n <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n [(ngModel)]=\"otpArray[idx]\" (keyup)=\"move($event, idx)\" [id]=\"'otp_'+idx\" #otpInput />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Name</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Name\" [(ngModel)]=\"investor.fullName\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Email</div>\r\n <div class=\"field-text\" [class.border-red]=\"showWarning || invalidEmail\">\r\n <input type=\"email\" placeholder=\"Please Enter Your Email\" [(ngModel)]=\"investor.emailId\" (ngModelChange)=\"verifyPhoneEmail()\" (blur)=\"validEmail()\" >\r\n </div>\r\n <!-- <div class=\"warning-text clr-red\" *ngIf=\"showWarning\">User Already Exist</div> -->\r\n <div class=\"warning-text clr-red\" *ngIf=\"invalidEmail\">Invalid Email (Eg: johndoe@gmail.com)</div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Phone Number</div>\r\n <div class=\"field-text\" [class.border-red]=\"showWarning || invalidPhone\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Phone Number\" [(ngModel)]=\"investor.phoneNumber\" (ngModelChange)=\"verifyPhoneEmail()\" (blur)=\"validPhone()\" >\r\n </div>\r\n <!-- <div class=\"warning-text clr-red\" *ngIf=\"showWarning\">User Already Exist</div> -->\r\n <div class=\"warning-text clr-red\" *ngIf=\"invalidPhone\">Invalid Phone number</div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD' && showForgotFields\" >\r\n <div class=\"field-head\">New Password</div>\r\n <div class=\"field-text d-flex\">\r\n <input [type]=\"textType\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"newPassword\">\r\n <mat-icon (click)=\"textType = 'text'\" *ngIf=\"textType == 'password'\">visibility_off</mat-icon>\r\n <mat-icon (click)=\"textType = 'password'\" *ngIf=\"textType == 'text'\">visibility</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_off</mat-icon>\r\n <mat-icon (click)=\"textType1 = 'password'\" *ngIf=\"textType1 == 'text'\">visibility</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_off</mat-icon>\r\n <mat-icon (click)=\"textType = 'password'\" *ngIf=\"textType == 'text'\">visibility</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"currentPage == 'LOGIN'\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">Forgot Password?</div>\r\n <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"currentPage == 'OTP_VERIFY' || otpSent\" (click)=\"isSignUp ? sendOtp() : sendOtpForLogin();resend = true\">Resend OTP?</div>\r\n <div class=\"btn-container d-flex align-items-center justify-content-center\">\r\n <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage != 'OTP' && (currentPage !== 'FORGOT_PASSWORD' || showForgotFields)\"\r\n (click)=\"buttonClickedEvent()\" [disabled]=\"buttonLoader\" [class.btn-size]=\"currentPage == 'FORGOT_PASSWORD' || currentPage == 'SIGN_UP' || currentPage == 'OTP_VERIFY'\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\">{{ currentPage ==\r\n 'LOGIN' ? \"Login\" : currentPage == 'FORGOT_PASSWORD' ? \"Reset Password\" :\r\n currentPage == 'OTP_VERIFY' ? 'Verify OTP' : \"Create Account\"}}</span></button>\r\n\r\n <button class=\"login-btn cursor-pointer\" (click)=\"sendOtpForLogin()\" [disabled]=\"buttonLoader\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && !otpSent && !showForgotFields\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\">Send Otp</span>\r\n </button>\r\n\r\n <button class=\"login-btn cursor-pointer\" (click)=\"verifyOtp()\" [disabled]=\"buttonLoader\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"(currentPage == 'OTP' || currentPage == 'FORGOT_PASSWORD') && otpSent && !showForgotFields\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\" >{{currentPage == 'OTP' ? \"Login\" : \"Proceed to Change Password\"}}</span>\r\n </button>\r\n </div>\r\n <div class=\"another-page\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n <div class=\"signup-text\">Don\u2019t have an account? <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'SIGN_UP';loginEmail = '';investor.password = '';investor.phoneNumber = '';otpSent = false;investor.emailId = ''\">Sign\r\n Up</span></div>\r\n <div class=\"signup-text m-5\">or</div>\r\n <div class=\"signup-text\">Login with <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'LOGIN' \"\r\n (click)=\"currentPage = 'OTP'\">OTP</span><span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP'\"\r\n (click)=\"currentPage = 'LOGIN';loginEmail = '';otpSent = false\">Password</span></div>\r\n </div>\r\n <div class=\"another-page\" *ngIf=\"currentPage == 'SIGN_UP' || currentPage == 'FORGOT_PASSWORD'\">\r\n <div class=\"signup-text\">Already have an account? <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'LOGIN';loginEmail = '';investor.password = '';investor.phoneNumber = '';otpSent = false;showForgotFields = false\">Sign\r\n In</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}mat-icon{font-family:Material Icons!important}.h-85{height:85vh;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.w-40-85{width:40%}.btn-size{width:40%!important}.head{font-size:36px;font-weight:600;line-height:52px;color:#112133;text-align:center;padding:15px;padding-bottom:unset}.field-container{padding:15px}.field-head{margin-bottom:10px;font-size:17px;font-weight:600;line-height:24px;color:#2c2c2c}.field-text{padding:10px;border-radius:20px;font-size:15px;font-weight:400;color:#ababab;background:#fff}.field-text input{width:100%;border:none;appearance:none;outline:unset;background:#fff;color:#000}.forgot-password{text-align:end;font-size:16px;font-weight:600;line-height:24px;margin-bottom:15px}.another-page{margin-top:15px;text-align:center}.signup-text{color:#6b6b6b;font-size:14px;font-weight:400;line-height:24px;margin-bottom:5px}.m-5{margin:5px 0!important}.mb-30{margin-bottom:30px!important}.mb-15{margin-bottom:15px!important}.login-btn{border:unset;padding:12px 18px;border-radius:6px;font-size:18px!important;font-weight:600;line-height:20px}.span-text{font-weight:700!important}.cursor-pointer{cursor:pointer}.additional-styles{padding:25px!important;width:10%!important;border:unset!important;border-radius:20px!important}.clr-red{color:red;font-size:12px}.border-red{border:1px solid red!important}@media screen and (max-width : 475px){.w-40-85{width:85%}.h-86{height:90vh!important}.btn-size{width:100%!important;white-space:nowrap}.additional-styles{width:15%!important;border-radius:10px!important}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
10795
10863
|
}], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i4$1.MessageService }, { type: i5.MatDialog }], propDecorators: { data: [{
|
|
10796
10864
|
type: Input
|
|
10797
10865
|
}], index: [{
|
|
@@ -11996,39 +12064,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
11996
12064
|
type: Output
|
|
11997
12065
|
}] } });
|
|
11998
12066
|
|
|
11999
|
-
class FormateAmount {
|
|
12000
|
-
transform(value, system = "IND") {
|
|
12001
|
-
if (system == "IND") {
|
|
12002
|
-
if (Number(value) >= 10000000 /* AMOUNT.CRORE */) {
|
|
12003
|
-
return (Number(value) / 10000000 /* AMOUNT.CRORE */) + 'cr';
|
|
12004
|
-
}
|
|
12005
|
-
else if (Number(value) >= 100000 /* AMOUNT.LAKHS */) {
|
|
12006
|
-
return (Number(value) / 100000 /* AMOUNT.LAKHS */) + 'lk';
|
|
12007
|
-
}
|
|
12008
|
-
else {
|
|
12009
|
-
return value.toString();
|
|
12010
|
-
}
|
|
12011
|
-
}
|
|
12012
|
-
else {
|
|
12013
|
-
if (Number(value) >= 1000000 /* AMOUNT.MILLION */) {
|
|
12014
|
-
return (Number(value) / 1000000 /* AMOUNT.MILLION */) + 'mn';
|
|
12015
|
-
}
|
|
12016
|
-
else {
|
|
12017
|
-
return value.toString();
|
|
12018
|
-
}
|
|
12019
|
-
}
|
|
12020
|
-
}
|
|
12021
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FormateAmount, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
12022
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.4", ngImport: i0, type: FormateAmount, isStandalone: true, name: "formateAmount" }); }
|
|
12023
|
-
}
|
|
12024
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FormateAmount, decorators: [{
|
|
12025
|
-
type: Pipe,
|
|
12026
|
-
args: [{
|
|
12027
|
-
standalone: true,
|
|
12028
|
-
name: 'formateAmount',
|
|
12029
|
-
}]
|
|
12030
|
-
}] });
|
|
12031
|
-
|
|
12032
12067
|
class ProductListComponent extends BaseSection {
|
|
12033
12068
|
onWindowScroll(event) {
|
|
12034
12069
|
this.scrollingValue = window.pageYOffset || document.documentElement.scrollTop;
|