simpo-component-library 2.1.998 → 2.2.0
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/sections/kyc-details/kyc-details.component.mjs +102 -13
- package/esm2022/lib/sections/property-detail/property-detail.component.mjs +19 -4
- package/esm2022/lib/sections/property-list/property-list.component.mjs +1 -2
- package/esm2022/lib/sections/signup-signin/signup-signin.component.mjs +13 -7
- package/esm2022/lib/services/rest.service.mjs +22 -3
- package/fesm2022/simpo-component-library.mjs +175 -51
- 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/ecommerce/sections/authentication-required/authentication-required.component.d.ts +1 -1
- package/lib/sections/kyc-details/kyc-details.component.d.ts +18 -3
- package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
- package/lib/sections/property-detail/property-detail.component.d.ts +5 -1
- package/lib/sections/signup-signin/signup-signin.component.d.ts +5 -0
- package/lib/services/rest.service.d.ts +4 -0
- package/package.json +1 -1
- package/simpo-component-library-2.2.0.tgz +0 -0
- package/simpo-component-library-2.1.998.tgz +0 -0
|
@@ -6,7 +6,7 @@ import { MatGridListModule } from '@angular/material/grid-list';
|
|
|
6
6
|
import * as i2 from '@angular/material/button';
|
|
7
7
|
import { MatButtonModule } from '@angular/material/button';
|
|
8
8
|
import * as i1 from '@angular/platform-browser';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i3 from '@angular/material/icon';
|
|
10
10
|
import { MatIconModule, MatIcon } from '@angular/material/icon';
|
|
11
11
|
import * as i5 from '@angular/material/dialog';
|
|
12
12
|
import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
|
@@ -20,8 +20,8 @@ import * as i11 from '@angular/material/form-field';
|
|
|
20
20
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
21
21
|
import * as i5$1 from '@angular/material/select';
|
|
22
22
|
import { MatSelectModule } from '@angular/material/select';
|
|
23
|
-
import { map, forkJoin } from 'rxjs';
|
|
24
|
-
import * as i1$
|
|
23
|
+
import { map, of, tap, forkJoin } from 'rxjs';
|
|
24
|
+
import * as i1$1 from '@angular/common/http';
|
|
25
25
|
import * as i12 from '@angular/material/menu';
|
|
26
26
|
import { MatMenuModule } from '@angular/material/menu';
|
|
27
27
|
import * as i8$1 from '@angular/material/bottom-sheet';
|
|
@@ -35,7 +35,7 @@ import * as i2$2 from '@angular/router';
|
|
|
35
35
|
import * as i2$1 from 'ngx-cookie-service';
|
|
36
36
|
import * as i11$1 from '@angular/material/progress-spinner';
|
|
37
37
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
38
|
-
import * as i3 from 'primeng/rating';
|
|
38
|
+
import * as i3$1 from 'primeng/rating';
|
|
39
39
|
import { RatingModule } from 'primeng/rating';
|
|
40
40
|
import * as i6 from 'primeng/progressbar';
|
|
41
41
|
import { ProgressBarModule } from 'primeng/progressbar';
|
|
@@ -1479,7 +1479,7 @@ class DocumentComponent {
|
|
|
1479
1479
|
}
|
|
1480
1480
|
}
|
|
1481
1481
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: DocumentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1482
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: DocumentComponent, isStandalone: true, selector: "simpo-document", inputs: { documentList: "documentList" }, ngImport: i0, template: "<section class=\"main-section p-2\">\r\n <div class=\"list_tabs heading d-flex align-items-center\">\r\n Required Document\r\n </div>\r\n\r\n <div class=\"document-section\">\r\n <div class=\"document\" *ngFor=\"let document of documentList\">\r\n <div class=\"left-side\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/183907c1734627971492pdf.png\" alt=\"\">\r\n <p>{{document.displayText}}</p>\r\n </div>\r\n <div class=\"right-side\" (click)=\"fileInput.click()\" *ngIf=\"!(document.file || document.url)\">\r\n <div>Upload</div>\r\n </div>\r\n <div class=\"right-side\" *ngIf=\"document.file || document.url\">\r\n <mat-icon>delete</mat-icon>\r\n </div>\r\n\r\n <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\r\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\r\n (change)=\"uploadDocument($event, document)\" class=\"pc-btn\"\r\n id=\"browse_contact_image\" #fileInput />\r\n </div>\r\n </div>\r\n</section>\r\n", styles: [".list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.heading{font-size:18px;font-weight:500}.align-items-center{align-items:center}.p-2{padding:2rem!important}.document-section{padding-right:2rem;margin-top:2rem;padding-left:2rem;display:flex;flex-direction:column;gap:10px}.document{display:flex;justify-content:space-between;background:#eeecec;padding:1.5rem;border-radius:10px}.left-side{display:flex;align-items:center;gap:20px}.left-side p{margin-bottom:0}.right-side{background:#fff;height:35px;padding-left:30px;padding-right:30px;display:flex;align-items:center;border-radius:8px;font-weight:500}@media screen and (max-width: 475px){.p-2{padding:1rem}.document-section{padding-left:0rem;padding-right:0rem}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type:
|
|
1482
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: DocumentComponent, isStandalone: true, selector: "simpo-document", inputs: { documentList: "documentList" }, ngImport: i0, template: "<section class=\"main-section p-2\">\r\n <div class=\"list_tabs heading d-flex align-items-center\">\r\n Required Document\r\n </div>\r\n\r\n <div class=\"document-section\">\r\n <div class=\"document\" *ngFor=\"let document of documentList\">\r\n <div class=\"left-side\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/183907c1734627971492pdf.png\" alt=\"\">\r\n <p>{{document.displayText}}</p>\r\n </div>\r\n <div class=\"right-side\" (click)=\"fileInput.click()\" *ngIf=\"!(document.file || document.url)\">\r\n <div>Upload</div>\r\n </div>\r\n <div class=\"right-side\" *ngIf=\"document.file || document.url\">\r\n <mat-icon>delete</mat-icon>\r\n </div>\r\n\r\n <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\r\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\r\n (change)=\"uploadDocument($event, document)\" class=\"pc-btn\"\r\n id=\"browse_contact_image\" #fileInput />\r\n </div>\r\n </div>\r\n</section>\r\n", styles: [".list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.heading{font-size:18px;font-weight:500}.align-items-center{align-items:center}.p-2{padding:2rem!important}.document-section{padding-right:2rem;margin-top:2rem;padding-left:2rem;display:flex;flex-direction:column;gap:10px}.document{display:flex;justify-content:space-between;background:#eeecec;padding:1.5rem;border-radius:10px}.left-side{display:flex;align-items:center;gap:20px}.left-side p{margin-bottom:0}.right-side{background:#fff;height:35px;padding-left:30px;padding-right:30px;display:flex;align-items:center;border-radius:8px;font-weight:500}@media screen and (max-width: 475px){.p-2{padding:1rem}.document-section{padding-left:0rem;padding-right:0rem}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] }); }
|
|
1483
1483
|
}
|
|
1484
1484
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: DocumentComponent, decorators: [{
|
|
1485
1485
|
type: Component,
|
|
@@ -1925,7 +1925,15 @@ class RestService {
|
|
|
1925
1925
|
}
|
|
1926
1926
|
verifyPan(request) {
|
|
1927
1927
|
const investerId = localStorage.getItem(StorageKeys.INVESTOR_ID);
|
|
1928
|
-
return this.http.post(this.BASE_URL + `investor/api/kyc/verify/
|
|
1928
|
+
return this.http.post(this.BASE_URL + `investor/api/kyc/verify/investor/${investerId}/pan`, request);
|
|
1929
|
+
}
|
|
1930
|
+
sendAadharOtp(request) {
|
|
1931
|
+
const investerId = localStorage.getItem(StorageKeys.INVESTOR_ID);
|
|
1932
|
+
return this.http.post(this.BASE_URL + `investor/api/kyc/verify/investor/${investerId}/aadhaarotpgenerate`, request);
|
|
1933
|
+
}
|
|
1934
|
+
verifyAadharOtp(request) {
|
|
1935
|
+
const investorId = localStorage.getItem(StorageKeys.INVESTOR_ID);
|
|
1936
|
+
return this.http.post(this.BASE_URL + `investor/api/kyc/verify/investor/${investorId}/aadhaarotpverify`, request);
|
|
1929
1937
|
}
|
|
1930
1938
|
getInvesterById() {
|
|
1931
1939
|
const investerId = localStorage.getItem(StorageKeys.INVESTOR_ID);
|
|
@@ -1934,6 +1942,17 @@ class RestService {
|
|
|
1934
1942
|
purchaseProperty(payload) {
|
|
1935
1943
|
return this.http.post(this.BASE_URL + `investor`, payload);
|
|
1936
1944
|
}
|
|
1945
|
+
getKycDetails() {
|
|
1946
|
+
if (this.kycDetails) {
|
|
1947
|
+
return of(this.kycDetails);
|
|
1948
|
+
}
|
|
1949
|
+
else {
|
|
1950
|
+
const invertorId = localStorage.getItem(StorageKeys.INVESTOR_ID);
|
|
1951
|
+
return this.http.get(this.BASE_URL + `investor/api/kyc/verify/investor/${invertorId}/verified`).pipe(tap((data) => {
|
|
1952
|
+
this.kycDetails = data;
|
|
1953
|
+
}));
|
|
1954
|
+
}
|
|
1955
|
+
}
|
|
1937
1956
|
getFieldsToDisplay(fieldsList) {
|
|
1938
1957
|
let map = {};
|
|
1939
1958
|
for (let field of fieldsList) {
|
|
@@ -1956,7 +1975,7 @@ class RestService {
|
|
|
1956
1975
|
}
|
|
1957
1976
|
return map;
|
|
1958
1977
|
}
|
|
1959
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RestService, deps: [{ token: i1$
|
|
1978
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RestService, deps: [{ token: i1$1.HttpClient }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1960
1979
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RestService, providedIn: 'root' }); }
|
|
1961
1980
|
}
|
|
1962
1981
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RestService, decorators: [{
|
|
@@ -1964,7 +1983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
1964
1983
|
args: [{
|
|
1965
1984
|
providedIn: 'root',
|
|
1966
1985
|
}]
|
|
1967
|
-
}], ctorParameters: () => [{ type: i1$
|
|
1986
|
+
}], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: EventsService }] });
|
|
1968
1987
|
|
|
1969
1988
|
class PaymentConfirmationComponent {
|
|
1970
1989
|
constructor(dialogRef, data, restService) {
|
|
@@ -2002,7 +2021,7 @@ class PaymentConfirmationComponent {
|
|
|
2002
2021
|
});
|
|
2003
2022
|
}
|
|
2004
2023
|
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 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2005
|
-
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=\"\">\r\n <div>\r\n <p class=\"property-name\">{{propertyDetails.name}}</p>\r\n <p class=\"location\">{{propertyDetails.location}}</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}}/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=\"add\" (click)=\"addSqFeet()\"><mat-icon>add</mat-icon></div>\r\n <input type=\"number\" [(ngModel)]=\"sqFeetArea\" (ngModelChange)=\"addOrRemoveProperty()\">\r\n <div class=\"remove\" (click)=\"removeSqFeet()\"><mat-icon>remove</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{{payload.totalAmount}}\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 {{payload.totalTax}}\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 {{payload.totalAmount + payload.totalTax}}\r\n </div>\r\n </div>\r\n <button class=\"buy-btn\">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:
|
|
2024
|
+
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=\"\">\r\n <div>\r\n <p class=\"property-name\">{{propertyDetails.name}}</p>\r\n <p class=\"location\">{{propertyDetails.location}}</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}}/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=\"add\" (click)=\"addSqFeet()\"><mat-icon>add</mat-icon></div>\r\n <input type=\"number\" [(ngModel)]=\"sqFeetArea\" (ngModelChange)=\"addOrRemoveProperty()\">\r\n <div class=\"remove\" (click)=\"removeSqFeet()\"><mat-icon>remove</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{{payload.totalAmount}}\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 {{payload.totalTax}}\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 {{payload.totalAmount + payload.totalTax}}\r\n </div>\r\n </div>\r\n <button class=\"buy-btn\">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: i3.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 }] }); }
|
|
2006
2025
|
}
|
|
2007
2026
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PaymentConfirmationComponent, decorators: [{
|
|
2008
2027
|
type: Component,
|
|
@@ -4769,7 +4788,7 @@ class AuthenticationRequiredComponent {
|
|
|
4769
4788
|
return window.innerWidth <= 475;
|
|
4770
4789
|
}
|
|
4771
4790
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticationRequiredComponent, deps: [{ token: RestService }, { token: i2$2.Router }, { token: i5$2.MessageService }, { token: StorageServiceService }, { token: i5.MatDialog }, { token: i5.MatDialogRef, optional: true }, { token: i8$1.MatBottomSheetRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4772
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", providers: [MessageService], ngImport: i0, template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<div class=\"close-icon\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n</div>\r\n<section>\r\n <div class=\"main\">\r\n <input type=\"checkbox\" id=\"chk\" aria-hidden=\"true\">\r\n\r\n <div class=\"signup\">\r\n <form>\r\n <label for=\"chk\" aria-hidden=\"true\">Login</label>\r\n <!-- <div class=\"d-flex justify-content-center\" style=\"gap: 5px;\">\r\n <div class=\"login-type\" [ngClass]=\"{'login-type__active': loginType == 'OTP'}\" (click)=\"loginType = 'OTP'\">OTP Login</div>\r\n <div class=\"login-type\" [ngClass]=\"{'login-type__active': loginType == 'PASSWORD'}\" (click)=\"loginType = 'PASSWORD'\">Password Login</div>\r\n </div> -->\r\n <ng-container *ngIf=\"loginType == 'PASSWORD'\">\r\n <input type=\"email\" name=\"email\" class=\"input-text\" placeholder=\"Email\" required=\"\" [(ngModel)]=\"email\">\r\n <div class=\"position-relative\">\r\n <input [type]=\"passwordHidden ? 'password' : 'text'\" class=\"input-text\" name=\"password\" placeholder=\"Enter Password\" required=\"\" [(ngModel)]=\"password\">\r\n <mat-icon class=\"password-visiblity\" (click)=\"passwordHidden = !passwordHidden\">{{passwordHidden ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"loginType == 'OTP'\">\r\n <div class=\"otp-input-field\">\r\n <input type=\"mobile\" name=\"mobile\" placeholder=\"Mobile\" required=\"\" (keypress)=\"validateNumber($event)\" [(ngModel)]=\"mobile\">\r\n <button (click)=\"enterMobile()\" *ngIf=\"!buttonLoading\"><mat-icon>arrow_forward</mat-icon></button>\r\n <button *ngIf=\"buttonLoading\"><mat-spinner></mat-spinner>\r\n </button>\r\n </div>\r\n <input type=\"otp\" name=\"otp\" placeholder=\"Enter received otp\" class=\"input-text\" required=\"\" [(ngModel)]=\"otp\">\r\n </ng-container>\r\n <button class=\"button\" (click)=\"login()\" *ngIf=\"!buttonLoading\" [disabled]=\"(loginType == 'PASSWORD' ? !isEmailValid : false)\">Login</button>\r\n <button class=\"button\" *ngIf=\"buttonLoading\">Loading...</button>\r\n </form>\r\n </div>\r\n\r\n <div class=\"login\" *ngIf=\"signUpEnabled\">\r\n <form>\r\n <label for=\"chk\" aria-hidden=\"true\">Sign up</label>\r\n <input type=\"email\" name=\"email\" placeholder=\"Email\" class=\"input-text\" required=\"\" [(ngModel)]=\"email\">\r\n <div class=\"otp-input-field\">\r\n <input type=\"mobile\" name=\"mobile\" placeholder=\"Mobile\" class=\"input-text\" required=\"\" (keypress)=\"validateNumber($event)\" [(ngModel)]=\"mobile\">\r\n <!-- <button (click)=\"sendSignupOTP()\" *ngIf=\"!buttonLoading\"><mat-icon>arrow_forward</mat-icon></button> -->\r\n <button *ngIf=\"buttonLoading\"><mat-spinner></mat-spinner>\r\n </button>\r\n </div>\r\n\r\n <!-- <div class=\"position-relative\">\r\n <input type=\"otp\" name=\"otp\" placeholder=\"OTP\" class=\"input-text\" required=\"\" [(ngModel)]=\"otp\" (keypress)=\"validateOTP($event)\">\r\n <mat-icon style=\"color: lightgreen;\" class=\"otp-checked\" title=\"OTP Verified\" *ngIf=\"isOTPVerified\">check_circle</mat-icon>\r\n <mat-icon style=\"color: tomato;\" class=\"otp-checked\" title=\"OTP not Verified\" *ngIf=\"!isOTPVerified\">cancel</mat-icon>\r\n </div> -->\r\n <div class=\"position-relative\">\r\n <input [type]=\"passwordHidden ? 'password' : 'text'\" class=\"input-text\" name=\"password\" placeholder=\"Create Password\" required=\"\" [(ngModel)]=\"password\" (ngModelChange)=\"checkStrength()\">\r\n <mat-icon class=\"password-visiblity\" (click)=\"passwordHidden = !passwordHidden\">{{passwordHidden ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n <div class=\"strength-bar-container\">\r\n <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\" [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n </div>\r\n </div>\r\n <button class=\"button\" (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid\">Sign up</button>\r\n </form>\r\n\r\n </div>\r\n </div>\r\n</section>\r\n", styles: ["section{margin:0;padding:0;display:flex;justify-content:center;align-items:center;height:100%;font-family:Jost,sans-serif;background:linear-gradient(to bottom,#0f0c29,#302b63,#24243e)}.close-icon{position:absolute;top:10px;right:10px;background-color:#fff;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;cursor:pointer}.close-icon .mat-icon{position:absolute;top:5px;right:1px;font-size:20px}.login-type{background-color:#fff;border:#573b8a;color:#573b8a;width:130px!important;font-size:14px!important;padding:5px;border-radius:5px;display:flex;justify-content:center;cursor:pointer}.login-type__active{width:150px!important;font-size:14px!important;font-weight:500!important;padding:5px;border-radius:5px;display:flex;justify-content:center;cursor:pointer;font-weight:800!important;border:1px solid #573b8a}.main{width:350px;height:500px;background:red;overflow:hidden;background:url(https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38) no-repeat center/ cover;border-radius:10px;box-shadow:5px 20px 50px #000}.otp-checked{position:absolute;top:7px;right:43px;font-size:20px;cursor:default!important}.password-visiblity{position:absolute;top:7px;right:43px;font-size:20px}.strength-bar-container{display:flex;justify-content:space-between;width:80%!important;margin:auto;position:relative;top:-10px}.strength-bar{height:8px;width:23.5%;border-radius:6px;background-color:#d3d3d3ba}.mat-icon{cursor:pointer}#chk{display:none}.signup{position:relative;width:100%;height:100%}label{color:#fff;font-size:2.3em;justify-content:center;display:flex;margin:50px 50px 20px;font-weight:700;cursor:pointer;transition:.5s ease-in-out}.input-text{width:80%;height:10px;background:#e0dede;justify-content:center;display:flex;margin:20px auto;padding:18px;border:none;outline:none;border-radius:5px}.button{width:80%;height:40px;margin:10px auto;justify-content:center;display:block;color:#fff;background:#573b8a;font-size:1em;font-weight:700;outline:none;border:none;border-radius:5px;transition:.2s ease-in;cursor:pointer}button:hover{background:#6d44b8}.login{height:460px;background:#eee;border-radius:60%/10%;transform:translateY(-180px);transition:.8s ease-in-out}.login label{color:#573b8a;transform:scale(.6)}#chk:checked~.login{transform:translateY(-500px)}#chk:checked~.login label{transform:scale(1)}#chk:checked~.signup label{transform:scale(.6)}.otp-input-field{justify-content:center;width:80%;align-items:center;height:38px;background:#e0dede;display:flex;margin:20px auto;border:none;outline:none;border-radius:5px}.otp-input-field input{width:80%;background:inherit;height:inherit;border-radius:5px;border:none;padding-left:20px;outline:none}.otp-input-field button{border:none;background:transparent;color:#6d44b8;width:20%!important;display:flex;align-items:center;justify-content:end}.mat-mdc-progress-spinner{height:20px!important}@media screen and (min-width: 401px){.button{width:80%!important}}@media screen and (max-width: 400px){.otp-input-field{width:90%}.input-text,button{width:90%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i17.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
4791
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", providers: [MessageService], ngImport: i0, template: "\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<div class=\"close-icon\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n</div>\r\n<section>\r\n <div class=\"main\">\r\n <input type=\"checkbox\" id=\"chk\" aria-hidden=\"true\">\r\n\r\n <div class=\"signup\">\r\n <form>\r\n <label for=\"chk\" aria-hidden=\"true\">Login</label>\r\n <!-- <div class=\"d-flex justify-content-center\" style=\"gap: 5px;\">\r\n <div class=\"login-type\" [ngClass]=\"{'login-type__active': loginType == 'OTP'}\" (click)=\"loginType = 'OTP'\">OTP Login</div>\r\n <div class=\"login-type\" [ngClass]=\"{'login-type__active': loginType == 'PASSWORD'}\" (click)=\"loginType = 'PASSWORD'\">Password Login</div>\r\n </div> -->\r\n <ng-container *ngIf=\"loginType == 'PASSWORD'\">\r\n <input type=\"email\" name=\"email\" class=\"input-text\" placeholder=\"Email\" required=\"\" [(ngModel)]=\"email\">\r\n <div class=\"position-relative\">\r\n <input [type]=\"passwordHidden ? 'password' : 'text'\" class=\"input-text\" name=\"password\" placeholder=\"Enter Password\" required=\"\" [(ngModel)]=\"password\">\r\n <mat-icon class=\"password-visiblity\" (click)=\"passwordHidden = !passwordHidden\">{{passwordHidden ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"loginType == 'OTP'\">\r\n <div class=\"otp-input-field\">\r\n <input type=\"mobile\" name=\"mobile\" placeholder=\"Mobile\" required=\"\" (keypress)=\"validateNumber($event)\" [(ngModel)]=\"mobile\">\r\n <button (click)=\"enterMobile()\" *ngIf=\"!buttonLoading\"><mat-icon>arrow_forward</mat-icon></button>\r\n <button *ngIf=\"buttonLoading\"><mat-spinner></mat-spinner>\r\n </button>\r\n </div>\r\n <input type=\"otp\" name=\"otp\" placeholder=\"Enter received otp\" class=\"input-text\" required=\"\" [(ngModel)]=\"otp\">\r\n </ng-container>\r\n <button class=\"button\" (click)=\"login()\" *ngIf=\"!buttonLoading\" [disabled]=\"(loginType == 'PASSWORD' ? !isEmailValid : false)\">Login</button>\r\n <button class=\"button\" *ngIf=\"buttonLoading\">Loading...</button>\r\n </form>\r\n </div>\r\n\r\n <div class=\"login\" *ngIf=\"signUpEnabled\">\r\n <form>\r\n <label for=\"chk\" aria-hidden=\"true\">Sign up</label>\r\n <input type=\"email\" name=\"email\" placeholder=\"Email\" class=\"input-text\" required=\"\" [(ngModel)]=\"email\">\r\n <div class=\"otp-input-field\">\r\n <input type=\"mobile\" name=\"mobile\" placeholder=\"Mobile\" class=\"input-text\" required=\"\" (keypress)=\"validateNumber($event)\" [(ngModel)]=\"mobile\">\r\n <!-- <button (click)=\"sendSignupOTP()\" *ngIf=\"!buttonLoading\"><mat-icon>arrow_forward</mat-icon></button> -->\r\n <button *ngIf=\"buttonLoading\"><mat-spinner></mat-spinner>\r\n </button>\r\n </div>\r\n\r\n <!-- <div class=\"position-relative\">\r\n <input type=\"otp\" name=\"otp\" placeholder=\"OTP\" class=\"input-text\" required=\"\" [(ngModel)]=\"otp\" (keypress)=\"validateOTP($event)\">\r\n <mat-icon style=\"color: lightgreen;\" class=\"otp-checked\" title=\"OTP Verified\" *ngIf=\"isOTPVerified\">check_circle</mat-icon>\r\n <mat-icon style=\"color: tomato;\" class=\"otp-checked\" title=\"OTP not Verified\" *ngIf=\"!isOTPVerified\">cancel</mat-icon>\r\n </div> -->\r\n <div class=\"position-relative\">\r\n <input [type]=\"passwordHidden ? 'password' : 'text'\" class=\"input-text\" name=\"password\" placeholder=\"Create Password\" required=\"\" [(ngModel)]=\"password\" (ngModelChange)=\"checkStrength()\">\r\n <mat-icon class=\"password-visiblity\" (click)=\"passwordHidden = !passwordHidden\">{{passwordHidden ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n <div class=\"strength-bar-container\">\r\n <div *ngFor=\"let strength of passwordStrength; let idx = index\" class=\"strength-bar\" [style.backgroundColor]=\"getStrengthColor(idx)\"></div>\r\n </div>\r\n </div>\r\n <button class=\"button\" (click)=\"createAccount()\" [disabled]=\"!isEmailValid || !isPasswordValid\">Sign up</button>\r\n </form>\r\n\r\n </div>\r\n </div>\r\n</section>\r\n", styles: ["section{margin:0;padding:0;display:flex;justify-content:center;align-items:center;height:100%;font-family:Jost,sans-serif;background:linear-gradient(to bottom,#0f0c29,#302b63,#24243e)}.close-icon{position:absolute;top:10px;right:10px;background-color:#fff;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;cursor:pointer}.close-icon .mat-icon{position:absolute;top:5px;right:1px;font-size:20px}.login-type{background-color:#fff;border:#573b8a;color:#573b8a;width:130px!important;font-size:14px!important;padding:5px;border-radius:5px;display:flex;justify-content:center;cursor:pointer}.login-type__active{width:150px!important;font-size:14px!important;font-weight:500!important;padding:5px;border-radius:5px;display:flex;justify-content:center;cursor:pointer;font-weight:800!important;border:1px solid #573b8a}.main{width:350px;height:500px;background:red;overflow:hidden;background:url(https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38) no-repeat center/ cover;border-radius:10px;box-shadow:5px 20px 50px #000}.otp-checked{position:absolute;top:7px;right:43px;font-size:20px;cursor:default!important}.password-visiblity{position:absolute;top:7px;right:43px;font-size:20px}.strength-bar-container{display:flex;justify-content:space-between;width:80%!important;margin:auto;position:relative;top:-10px}.strength-bar{height:8px;width:23.5%;border-radius:6px;background-color:#d3d3d3ba}.mat-icon{cursor:pointer}#chk{display:none}.signup{position:relative;width:100%;height:100%}label{color:#fff;font-size:2.3em;justify-content:center;display:flex;margin:50px 50px 20px;font-weight:700;cursor:pointer;transition:.5s ease-in-out}.input-text{width:80%;height:10px;background:#e0dede;justify-content:center;display:flex;margin:20px auto;padding:18px;border:none;outline:none;border-radius:5px}.button{width:80%;height:40px;margin:10px auto;justify-content:center;display:block;color:#fff;background:#573b8a;font-size:1em;font-weight:700;outline:none;border:none;border-radius:5px;transition:.2s ease-in;cursor:pointer}button:hover{background:#6d44b8}.login{height:460px;background:#eee;border-radius:60%/10%;transform:translateY(-180px);transition:.8s ease-in-out}.login label{color:#573b8a;transform:scale(.6)}#chk:checked~.login{transform:translateY(-500px)}#chk:checked~.login label{transform:scale(1)}#chk:checked~.signup label{transform:scale(.6)}.otp-input-field{justify-content:center;width:80%;align-items:center;height:38px;background:#e0dede;display:flex;margin:20px auto;border:none;outline:none;border-radius:5px}.otp-input-field input{width:80%;background:inherit;height:inherit;border-radius:5px;border:none;padding-left:20px;outline:none}.otp-input-field button{border:none;background:transparent;color:#6d44b8;width:20%!important;display:flex;align-items:center;justify-content:end}.mat-mdc-progress-spinner{height:20px!important}@media screen and (min-width: 401px){.button{width:80%!important}}@media screen and (max-width: 400px){.otp-input-field{width:90%}.input-text,button{width:90%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i17.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i11$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
4773
4792
|
}
|
|
4774
4793
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticationRequiredComponent, decorators: [{
|
|
4775
4794
|
type: Component,
|
|
@@ -5097,7 +5116,7 @@ class CustomerReviewComponent {
|
|
|
5097
5116
|
return (value / this.customerReviews?.length) * 100;
|
|
5098
5117
|
}
|
|
5099
5118
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CustomerReviewComponent, deps: [{ token: i2$2.ActivatedRoute }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5100
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CustomerReviewComponent, isStandalone: true, selector: "simpo-customer-review", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", nextComponentColor: "nextComponentColor" }, ngImport: i0, template: "<section class=\"mainContainer\" style=\"gap: 20px;\" *ngIf=\"customerReviews.length\">\r\n <div class=\"left-panel\">\r\n <h3 [style.color]=\"data?.styles?.background?.accentColor\">Customer Reviews</h3>\r\n <p-rating [(ngModel)]=\"totalRating\" [cancel]=\"false\" [readonly]=\"true\" />\r\n <div class=\"stars\">\r\n <ng-container *ngFor=\"let rating of overallRatingCount | keyvalue; let idx = index\">\r\n <div class=\"d-flex\" style=\"gap: 5px; margin: 10px 0px\">\r\n <div class=\"count\">{{rating.key}}</div>\r\n <div class=\"rating-bar\">\r\n <p-progressBar [value]=\"getPercentage(rating?.value)\" [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [showValue]=\"false\" />\r\n </div>\r\n <div class=\"count\">{{getPercentage(rating?.value)}}%</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"right-panel\">\r\n <h3 [style.color]=\"data?.styles?.background?.accentColor\">Top Reviews</h3>\r\n <div class=\"customer-reviews\">\r\n <ng-container *ngFor=\"let review of customerReviews\">\r\n <div class=\"d-flex align-item-center\" style=\"gap: 5px;\">\r\n <div class=\"name-tag\">{{review.userName | slice: 0:1}}</div>\r\n <span style=\"position: relative; top: 5px;\">{{review.userName | titlecase}}</span>\r\n </div>\r\n <div class=\"d-flex my-2\" style=\"width: fit-content; height: 20px; gap: 10px;\"> \r\n <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\" />\r\n <div>{{review.title | titlecase}}</div>\r\n </div>\r\n <div class=\"date\">{{ review.createdTimeStamp | date }}</div>\r\n <div class=\"description\">{{review.review | titlecase}}</div>\r\n <hr>\r\n </ng-container>\r\n </div>\r\n </div>\r\n \r\n <!-- <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container> -->\r\n\r\n</section>", styles: [".mainContainer{display:flex;justify-content:space-around}.rating-bar{width:300px}h3{margin-bottom:20px}.count{width:20px}.left-panel{width:20%}.right-panel{width:70%}.description{width:80%}.name-tag{display:flex;justify-content:center;align-items:center;padding:5px;border-radius:50%;background-color:#3b82f6;color:#fff;height:30px;width:30px}.customer-reviews{padding-bottom:10px;padding-left:10px}@media screen and (max-width: 475px){.mainContainer{flex-direction:column!important}.left-panel{width:95%;margin:auto}.right-panel{width:95%;margin:auto}.right-panel .description{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { 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 }, { 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.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i6.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }] }); }
|
|
5119
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CustomerReviewComponent, isStandalone: true, selector: "simpo-customer-review", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", nextComponentColor: "nextComponentColor" }, ngImport: i0, template: "<section class=\"mainContainer\" style=\"gap: 20px;\" *ngIf=\"customerReviews.length\">\r\n <div class=\"left-panel\">\r\n <h3 [style.color]=\"data?.styles?.background?.accentColor\">Customer Reviews</h3>\r\n <p-rating [(ngModel)]=\"totalRating\" [cancel]=\"false\" [readonly]=\"true\" />\r\n <div class=\"stars\">\r\n <ng-container *ngFor=\"let rating of overallRatingCount | keyvalue; let idx = index\">\r\n <div class=\"d-flex\" style=\"gap: 5px; margin: 10px 0px\">\r\n <div class=\"count\">{{rating.key}}</div>\r\n <div class=\"rating-bar\">\r\n <p-progressBar [value]=\"getPercentage(rating?.value)\" [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [showValue]=\"false\" />\r\n </div>\r\n <div class=\"count\">{{getPercentage(rating?.value)}}%</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"right-panel\">\r\n <h3 [style.color]=\"data?.styles?.background?.accentColor\">Top Reviews</h3>\r\n <div class=\"customer-reviews\">\r\n <ng-container *ngFor=\"let review of customerReviews\">\r\n <div class=\"d-flex align-item-center\" style=\"gap: 5px;\">\r\n <div class=\"name-tag\">{{review.userName | slice: 0:1}}</div>\r\n <span style=\"position: relative; top: 5px;\">{{review.userName | titlecase}}</span>\r\n </div>\r\n <div class=\"d-flex my-2\" style=\"width: fit-content; height: 20px; gap: 10px;\"> \r\n <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\" />\r\n <div>{{review.title | titlecase}}</div>\r\n </div>\r\n <div class=\"date\">{{ review.createdTimeStamp | date }}</div>\r\n <div class=\"description\">{{review.review | titlecase}}</div>\r\n <hr>\r\n </ng-container>\r\n </div>\r\n </div>\r\n \r\n <!-- <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container> -->\r\n\r\n</section>", styles: [".mainContainer{display:flex;justify-content:space-around}.rating-bar{width:300px}h3{margin-bottom:20px}.count{width:20px}.left-panel{width:20%}.right-panel{width:70%}.description{width:80%}.name-tag{display:flex;justify-content:center;align-items:center;padding:5px;border-radius:50%;background-color:#3b82f6;color:#fff;height:30px;width:30px}.customer-reviews{padding-bottom:10px;padding-left:10px}@media screen and (max-width: 475px){.mainContainer{flex-direction:column!important}.left-panel{width:95%;margin:auto}.right-panel{width:95%;margin:auto}.right-panel .description{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$1.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { 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 }, { 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.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i6.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }] }); }
|
|
5101
5120
|
}
|
|
5102
5121
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CustomerReviewComponent, decorators: [{
|
|
5103
5122
|
type: Component,
|
|
@@ -8958,7 +8977,7 @@ class AppointmentFormComponent extends BaseSection {
|
|
|
8958
8977
|
this.CreateData.scheduledTime !== '';
|
|
8959
8978
|
}
|
|
8960
8979
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AppointmentFormComponent, deps: [{ token: EventsService }, { token: i5.MatDialog }, { token: RestService }, { token: i2$3.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8961
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AppointmentFormComponent, isStandalone: true, selector: "simpo-appointment-form", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n [simpoBackground]=\"styles?.background\" class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"px-4 py-5\" [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage}\"\r\n [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n\r\n </div>\r\n <div class=\"first-part-card\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n alt=\"something\" />\r\n\r\n {{ item.inputText[0].value }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n (click)=\"opendailogbox(dialogBox)\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div style=\" width: 100%; height: 500px;\">\r\n <img loading=\"lazy\" src=\"../../assets/divider.svg\" style=\"clip-path: polygon(0 55%, 100% 0, 100% 100%, 0% 100%); background-color: red;\">\r\n </div> -->\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit && false }\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></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</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Dialog template -->\r\n<ng-template #dialogBox class=\"dialogbox\">\r\n <div class=\"appointment-form\">\r\n <div class=\"header-section\">\r\n <div class=\"header-left-side\">\r\n <h2 style=\"text-align: left;\">Book an Appointment</h2>\r\n </div>\r\n <div class=\"header-right-side\">\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <form>\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Name</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.clientName\" (ngModelChange)=\"onUserNameChange($event)\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Mobile Number</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input type=\"text\" class=\"inputStyle\" matInput placeholder=\"Enter Your Mobile Number\"\r\n pattern=\"^[0-9]{10,15}$\" maxlength=\"15\" (focus)=\"onFocus()\" (keypress)=\"restrictNonNumeric($event)\"\r\n [(ngModel)]=\"CreateData.mobile\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Location</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"selectedLocation\" (ngModelChange)=\"changeLocation()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let location of locationData\">\r\n <mat-option [value]=\"location.id\">\r\n {{ location.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Service</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Service\" [(ngModel)]=\"selectedServices\" (ngModelChange)=\"getAllStaff()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let service of serviceData\">\r\n <mat-option [value]=\"service.id\">\r\n {{ service.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Staff</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Staff\" [(ngModel)]=\"selectedStaff\" (ngModelChange)=\"getAvailableSlots()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let staff of staffData\">\r\n <mat-option [value]=\"staff.id\">\r\n {{ staff.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Date</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput [matDatepicker]=\"picker\" placeholder=\"Select Date\"\r\n [(ngModel)]=\"CreateData.scheduledDate\" (ngModelChange)=\"changeDate()\" [min]=\"minDate\"\r\n [matDatepickerFilter]=\"dateFilter\" [ngModelOptions]=\"{standalone: true}\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Time</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"CreateData.scheduledTime\" [ngModelOptions]=\"{standalone: true}\">\r\n <mat-option *ngFor=\"let time of locationTiming\" [value]=\"time\" [disabled]=\"bookedSlots.has(time)\">\r\n {{ time }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"full-message-section\">\r\n <div class=\"business-field-section\">\r\n <div class=\"input-text\">Message</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.message\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bottom-section\">\r\n <div class=\"button-section\">\r\n <button class=\"booking-button\" [disabled]=\"!isFormValid()\" (click)=\"createAppointment()\">\r\n Book Appointment\r\n </button>\r\n </div>\r\n </div>\r\n\r\n\r\n </form>\r\n </div>\r\n</ng-template>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.appointment-form{width:65vw;background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 8px #0000001a}h2{text-align:center;margin-bottom:20px}.form-group{display:flex;flex-direction:column;margin-bottom:15px;width:100%}label{font-weight:700;margin-bottom:5px}input,select,textarea{padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px}input::placeholder,textarea::placeholder{color:#888}.name-mobile,.date-time{display:flex;justify-content:space-between}textarea{resize:vertical}.book-btn{width:100%;background-color:#007bff;color:#fff;border:none;padding:10px;border-radius:4px;font-size:16px;cursor:pointer}.book-btn:hover{background-color:#0056b3}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.button-section{width:100%!important}.appointment-form{width:100vw}}.text-element{inline-size:100%;overflow-wrap:break-word}.mergeNavbar{margin-top:-75px;padding-top:75px}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.sfull-width{width:49%;height:75px}.input-text{margin-bottom:5px}.full-width{width:100%}.bottom-section{width:100%;display:flex;justify-content:right}.button-section{width:30%}.booking-button{background:#0496ff;color:#fff;border:1px solid#0496FF;border-radius:10px;padding:7px 5px}.header-section{display:flex;width:100%;justify-content:space-between}.header-left-side{width:50%}.header-right-side{width:5%;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i14.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i14.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i14.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i15.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "directive", type:
|
|
8980
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AppointmentFormComponent, isStandalone: true, selector: "simpo-appointment-form", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage}\"\r\n [simpoBackground]=\"styles?.background\" class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"px-4 py-5\" [ngClass]=\"{'col-lg-6 col-xxl-6': isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage}\"\r\n [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5 justify-content-start\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?.image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\" style=\"object-fit: cover;\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'col-lg-12': isBorderlessImage, 'col-lg-6': !isBorderlessImage}\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value | sanitizeHtml\" class=\"text-element\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n\r\n </div>\r\n <div class=\"first-part-card\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/933997c1718790303127907598c1696063061900green_verified_image.png\"\r\n alt=\"something\" />\r\n\r\n {{ item.inputText[0].value }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n (click)=\"opendailogbox(dialogBox)\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <!-- <div style=\" width: 100%; height: 500px;\">\r\n <img loading=\"lazy\" src=\"../../assets/divider.svg\" style=\"clip-path: polygon(0 55%, 100% 0, 100% 100%, 0% 100%); background-color: red;\">\r\n </div> -->\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit && false }\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></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</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngStyle]=\"{'width': styles?.positionLayout?.value === 'right' ? 'fit-content' : ''}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" />\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<!-- Dialog template -->\r\n<ng-template #dialogBox class=\"dialogbox\">\r\n <div class=\"appointment-form\">\r\n <div class=\"header-section\">\r\n <div class=\"header-left-side\">\r\n <h2 style=\"text-align: left;\">Book an Appointment</h2>\r\n </div>\r\n <div class=\"header-right-side\">\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <form>\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Name</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.clientName\" (ngModelChange)=\"onUserNameChange($event)\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Mobile Number</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input type=\"text\" class=\"inputStyle\" matInput placeholder=\"Enter Your Mobile Number\"\r\n pattern=\"^[0-9]{10,15}$\" maxlength=\"15\" (focus)=\"onFocus()\" (keypress)=\"restrictNonNumeric($event)\"\r\n [(ngModel)]=\"CreateData.mobile\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Location</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"selectedLocation\" (ngModelChange)=\"changeLocation()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let location of locationData\">\r\n <mat-option [value]=\"location.id\">\r\n {{ location.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Service</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Service\" [(ngModel)]=\"selectedServices\" (ngModelChange)=\"getAllStaff()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let service of serviceData\">\r\n <mat-option [value]=\"service.id\">\r\n {{ service.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Staff</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Staff\" [(ngModel)]=\"selectedStaff\" (ngModelChange)=\"getAvailableSlots()\" [ngModelOptions]=\"{standalone: true}\">\r\n <ng-container *ngFor=\"let staff of staffData\">\r\n <mat-option [value]=\"staff.id\">\r\n {{ staff.name }}\r\n </mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"name-mobile\">\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Date</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput [matDatepicker]=\"picker\" placeholder=\"Select Date\"\r\n [(ngModel)]=\"CreateData.scheduledDate\" (ngModelChange)=\"changeDate()\" [min]=\"minDate\"\r\n [matDatepickerFilter]=\"dateFilter\" [ngModelOptions]=\"{standalone: true}\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"sfull-width\">\r\n <div class=\"input-text\">Time</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"Select Location\" [(ngModel)]=\"CreateData.scheduledTime\" [ngModelOptions]=\"{standalone: true}\">\r\n <mat-option *ngFor=\"let time of locationTiming\" [value]=\"time\" [disabled]=\"bookedSlots.has(time)\">\r\n {{ time }}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"full-message-section\">\r\n <div class=\"business-field-section\">\r\n <div class=\"input-text\">Message</div>\r\n <mat-form-field class=\"full-width\" appearance=\"outline\">\r\n <input class=\"inputStyle\" matInput placeholder=\"Enter Your Name\" pattern=\"[a-zA-Z ]*\"\r\n [(ngModel)]=\"CreateData.message\" [ngModelOptions]=\"{standalone: true}\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bottom-section\">\r\n <div class=\"button-section\">\r\n <button class=\"booking-button\" [disabled]=\"!isFormValid()\" (click)=\"createAppointment()\">\r\n Book Appointment\r\n </button>\r\n </div>\r\n </div>\r\n\r\n\r\n </form>\r\n </div>\r\n</ng-template>\r\n", styles: [".btn-primary{border:none}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.appointment-form{width:65vw;background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 8px #0000001a}h2{text-align:center;margin-bottom:20px}.form-group{display:flex;flex-direction:column;margin-bottom:15px;width:100%}label{font-weight:700;margin-bottom:5px}input,select,textarea{padding:8px;border:1px solid #ccc;border-radius:4px;font-size:14px}input::placeholder,textarea::placeholder{color:#888}.name-mobile,.date-time{display:flex;justify-content:space-between}textarea{resize:vertical}.book-btn{width:100%;background-color:#007bff;color:#fff;border:none;padding:10px;border-radius:4px;font-size:16px;cursor:pointer}.book-btn:hover{background-color:#0056b3}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.total-container{flex-direction:column}.insideImg{height:100%!important}.button-section{width:100%!important}.appointment-form{width:100vw}}.text-element{inline-size:100%;overflow-wrap:break-word}.mergeNavbar{margin-top:-75px;padding-top:75px}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.sfull-width{width:49%;height:75px}.input-text{margin-bottom:5px}.full-width{width:100%}.bottom-section{width:100%;display:flex;justify-content:right}.button-section{width:30%}.booking-button{background:#0496ff;color:#fff;border:1px solid#0496FF;border-radius:10px;padding:7px 5px}.header-section{display:flex;width:100%;justify-content:space-between}.header-left-side{width:50%}.header-right-side{width:5%;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i11.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i14.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i14.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i14.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i15.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "directive", type:
|
|
8962
8981
|
//directive
|
|
8963
8982
|
SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }] }); }
|
|
8964
8983
|
}
|
|
@@ -9571,7 +9590,7 @@ class RegistrationFormComponent extends BaseSection {
|
|
|
9571
9590
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RegistrationFormComponent, deps: [{ token: RestService }, { token: i2$3.MatSnackBar }, { token: EventsService }, { token: i2$2.ActivatedRoute }, { token: i1.DomSanitizer }, { token: ImageUplaodService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9572
9591
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: RegistrationFormComponent, isStandalone: true, selector: "simpo-registration-form", inputs: { data: "data", index: "index", edit: "edit", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"main-section\"\r\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"body-section\">\r\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div>\r\n <simpo-text-element [textData]=\"content?.inputText?.[0]?.value\" [textLabel]=\"content?.inputText?.[0]?.label\"></simpo-text-element>\r\n </div>\r\n <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <section class=\"main-section\">\r\n <div *ngIf=\"formStatus != 'REGISTERED' && formStatus != 'ADMITTED'\">\r\n <div class=\"subTabs_section\">\r\n <div class=\"list_tabs d-flex align-items-center\">\r\n <ng-container *ngFor=\"let key of Object.keys(fieldData)\">\r\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = key\"\r\n [ngClass]=\"selectedKey === key ? 'single_tab_active' : 'single_tab'\">\r\n {{key | titlecase}}\r\n </div>\r\n </ng-container>\r\n <div class=\"single_tab cursor-pointer\" (click)=\"selectedKey = 'Document'\" *ngIf=\"data?.sectionType === 'admissionForm'\"\r\n [ngClass]=\"selectedKey === 'Document' ? 'single_tab_active' : 'single_tab'\">\r\n Document\r\n </div>\r\n <div class=\"single_tab cursor-pointer\" (click)=\"redirectToPayment()\"\r\n *ngIf=\"data?.sectionType === 'admissionForm'\"\r\n [ngClass]=\"selectedKey === 'Payment' ? 'single_tab_active' : 'single_tab'\">\r\n Payment\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"main-content\">\r\n <ng-container *ngFor=\"let group of fieldData[selectedKey] ? Object.keys(fieldData[selectedKey]) : [];let groupIndex = index\">\r\n <div class=\"body\" *ngIf=\"group !== 'Backup Contact'\">\r\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n {{group}}\r\n </div>\r\n\r\n <ng-container *ngIf=\"groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\r\n <div class=\"image-box\" *ngIf=\"!payload.imgUrl\">\r\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n (click)=\"fileInput.click()\" alt=\"\">\r\n <div class=\"image_box\">\r\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n upload</span>\r\n </div>\r\n </div>\r\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\"\r\n accept=\"image/x-png,image/jpeg,image/jpg\" (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\"\r\n id=\"browse_contact_image\" #fileInput />\r\n\r\n <div *ngIf=\"payload.imgUrl\" class=\"addedImg\">\r\n <div class=\"uploadedImg\">\r\n <img alt=\"\" [src]=\"ds.bypassSecurityTrustUrl(payload.imgUrl)\">\r\n </div>\r\n <div class=\"image-buttons\">\r\n <div class=\"button\" (click)=\"fileInput.click()\">\r\n <img src=\"../../../../../../../../../assets/images/blogs/change_image.svg\" alt=\"\">\r\n Change Image\r\n </div>\r\n <div class=\"button delete-change\" (click)=\"deleteImg()\">\r\n\r\n <div class=\"delete\">\r\n <img src=\"./../../../../../../../../../assets/images/blogs/delete_image.svg\" alt=\"\">\r\n <div>Delete</div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"row mt-1\">\r\n <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey][group]\">\r\n <label for=\"\" class=\"label-text\">{{info.fieldLabel}}</label> <span style=\"color: red;\" *ngIf=\"info.required\">*</span> <br>\r\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"body\" *ngIf=\"fieldData[selectedKey].hasOwnProperty('Backup Contact') && studentLiveWith === 'single parent' && groupIndex == 0 && Object.keys(fieldData)[0] === selectedKey\">\r\n <div class=\"list_tabs backToLeads d-flex align-items-center\">\r\n Backup Contact (Optional)\r\n </div>\r\n\r\n <div class=\"row mt-1\">\r\n <div class=\"col-md-12\">\r\n <label class=\"mtb-15 checkbox-label\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [(ngModel)]=\"payload.parentAuthorization\">\r\n I authorize the school to release the child only to the parent listed above\r\n </label>\r\n </div>\r\n <div class=\"col-md-4 col-12 mt-1\" *ngFor=\"let info of fieldData[selectedKey]['Backup Contact']\">\r\n <label for=\"\" class=\"label-text\">{{info.fieldLabel}}</label> <span style=\"color: red;\"\r\n *ngIf=\"info.required\">*</span> <br>\r\n <ng-container *ngTemplateOutlet=\"inputData; context: {data: info}\"></ng-container>\r\n </div>\r\n <div class=\"col-md-4 col-12 mt-1\">\r\n <label for=\"\" class=\"label-text\">Upload Supporting Document (Optional)</label>\r\n <div class=\"input-text upload-file\" (click)=\"backUpDocInput.click()\">\r\n <p>{{backupDocFile ? 'File Uploaded' : 'Upload File'}}</p>\r\n <mat-icon>cloud_upload</mat-icon>\r\n </div>\r\n <input id=\"vendorImage\" type=\"file\" name=\"myfile\" hidden\r\n accept=\".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/x-png,image/jpeg,image/jpg,.pdf, video/mp4,video/x-matroska,video/x-msvideo,video/quicktime\"\r\n (change)=\"uploadBackUpDocument($event)\" class=\"pc-btn\"\r\n id=\"browse_contact_image\" #backUpDocInput />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Document' && data?.sectionType === 'admissionForm'\">\r\n <simpo-document [documentList]=\"documentList\"></simpo-document>\r\n </div>\r\n <div class=\"payment-details\" *ngIf=\"selectedKey === 'Payment' && data?.sectionType === 'admissionForm'\">\r\n <simpo-payment-details [admissionData]=\"payload\"\r\n [subscriptionsData]=\"subscriptionsData\" [termPaymentList]=\"termPaymentList\"></simpo-payment-details>\r\n </div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <button class=\"button\" (click)=\"submitForm()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n [buttonStyle]=\"button.styles\" *ngIf=\"(data?.sectionType === 'admissionForm' && selectedKey == 'Payment') ||\r\n (data?.sectionType === 'registrationForm' &&\r\n (Object.keys(fieldData)[Object.keys(fieldData).length - 1] == selectedKey))\"\r\n [color]=\"data?.styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n\r\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n [buttonStyle]=\"button.styles\" *ngIf=\"selectedKey != 'Payment' && data?.sectionType === 'admissionForm'\"\r\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n\r\n <button class=\"button\" (click)=\"continueAdmission()\" simpoButtonDirective [id]=\"data?.id+button.id\"\r\n [buttonStyle]=\"button.styles\"\r\n *ngIf=\"data?.sectionType === 'registrationForm' && (Object.keys(fieldData)[Object.keys(fieldData).length - 1] != selectedKey)\"\r\n [color]=\"data?.styles?.background?.accentColor\">Continue</button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"emptyText\" *ngIf=\"formStatus == 'REGISTERED' || formStatus == 'ADMITTED'\">\r\n <img [src]=\"content?.image?.url\" alt=\"\" *ngIf=\"content?.image?.showImage\">\r\n <div class=\"heading-large\" [innerHtml]=\"content?.inputText?.[1]?.value\"></div>\r\n </div>\r\n </section>\r\n\r\n <ng-template #inputData let-field=\"data\">\r\n <div *ngIf=\"field.dataType == 'IMAGE'\">\r\n <div class=\"image-box\">\r\n <img class=\"dummy-image\" src=\"../../../../../../../../../assets/images/master/add-image.svg\"\r\n (click)=\"fileInput.click()\" alt=\"\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"fc_browse_btn\" id=\"display_browse_btn\" (click)=\"fileInput.click()\">Click to\r\n upload</span>\r\n </div>\r\n </div>\r\n <input style=\"display: none;\" id=\"vendorImage\" type=\"file\" name=\"myfile\" accept=\"image/x-png,image/jpeg,image/jpg\"\r\n (change)=\"updateAdmissionImage($event)\" class=\"pc-btn\" id=\"browse_contact_image\" #fileInput />\r\n </div>\r\n <div *ngIf=\"field.dataType === 'TEXT'\">\r\n <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\r\n </div>\r\n <div *ngIf=\"field.dataType === 'NUMBER'\">\r\n <input type=\"number\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\r\n </div>\r\n <div *ngIf=\"field.dataType === 'MONEY'\">\r\n <input type=\"text\" class=\"input-text\" [placeholder]=\"'Enter '+field.fieldLabel\" [(ngModel)]=\"field.fieldValue\">\r\n </div>\r\n <div *ngIf=\"field.dataType === 'DATE'\">\r\n <input type=\"date\" class=\"input-text\" [(ngModel)]=\"field.fieldValue\" [placeholder]=\"'Select '+field.fieldLabel\">\r\n </div>\r\n <div *ngIf=\"field.dataType === 'DROPDOWN'\" class=\"admission\">\r\n <mat-form-field class=\"input-text\" appearance=\"outline\">\r\n <mat-select class=\"inputStyle\" placeholder=\"--Select--\" [(ngModel)]=\"field.fieldValue\" [multiple]=\"field.multipleSelection\">\r\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n <mat-option *ngFor=\"let item of field.value\" [value]=\"item?.value\" (click)=\"masterDropdownValueChange(item, field)\">{{item.label}}</mat-option>\r\n </ng-container>\r\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n <mat-option *ngFor=\"let item of field.sourceData[field.dataSourceType]\"\r\n (click)=\"inputFieldChange(item, field)\" [value]=\"item?.name\">{{item.name}}</mat-option>\r\n </ng-container>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div *ngIf=\"field.dataType === 'CHECKBOX'\">\r\n <ng-container *ngIf=\"(field?.value?.length || 0) > 0\">\r\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.value\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n {{data.label}}\r\n </label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"(field?.value?.length || 0) == 0\">\r\n <div class=\"form-check mb-5\" *ngFor=\"let data of field.sourceData[field.dataSourceType]\">\r\n <input class=\"form-check-input\" type=\"checkbox\" value=\"\" id=\"flexCheckChecked\" [(ngModel)]=\"data.checked\">\r\n <label class=\"form-check-label\" for=\"flexCheckChecked\">\r\n {{data.name}}\r\n </label>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n</section>\r\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}.main-section{width:100%;overflow-y:hidden}.subTabs_section{padding:1rem 5rem;height:12vh}.active_route_section{height:89%;border:1px solid #0000000F;padding:15px 20px;background-color:#fff;border-radius:6px}.active_route_section_normal{background-color:#f6f6f6;border:none;padding:10px 4rem}.list_tabs{border:1px solid #0000001A;background-color:#ffffffe5;padding:10px;border-radius:6px;gap:10px;height:50px}.single_tab{color:#0e233c99;font-size:14px;font-weight:500;font-family:interReg;padding:10px 20px}.single_tab_active{width:max-content;height:32px;background-color:#0015800a;display:flex;align-items:center;font-weight:600;padding:10px 20px;border-radius:4px;color:#0e233c}.align-items-center{align-items:center}.header{height:8vh;padding:10px;border-bottom:2px solid rgba(0,0,0,.06);display:flex}.p-5{padding:5rem}.backToLeads{color:#000!important}.body{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;padding:2rem;border-radius:10px}.profile-img{display:flex;align-items:center;gap:2rem}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.image-box{display:flex;gap:1rem;margin-top:3rem;cursor:pointer}.image-box span{color:#0189ea;font-size:14px;font-weight:500;padding:11px 7rem;border:2px solid rgba(0,0,0,.06);height:47px;border-radius:10px}.image_box{display:flex;align-items:center}.dummy-image{height:55px}.label-text{font-weight:400;font-family:Inter;font-size:14px;color:#434443}.input-text{border-radius:7px;border:2px solid rgba(208,213,221,1);height:42px;width:100%;margin-top:5px;padding-left:10px}.footer{display:flex;gap:1rem;align-items:center;justify-content:flex-end;height:8vh;padding:10px;border-top:2px solid rgba(0,0,0,.06);position:absolute;bottom:0;width:100%}.footer .continue{font-size:13px;font-family:interMedium;color:#242424;font-weight:500;border:none;background-color:#f6c318;padding:10px 20px;border-radius:8px;width:max-content}.footer .cancel{font-size:13px;font-family:interMedium;color:#f6c318;font-weight:500;border:1px solid #F6C318;background-color:#fff;padding:10px 20px;border-radius:8px;width:max-content}.main-content{overflow:scroll;padding-top:5px;padding-bottom:10px}.button-parent{padding:1rem 5rem 1rem 2rem;align-items:center;display:flex;justify-content:flex-end}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.payment-details{margin:1rem 5rem 0rem;box-shadow:#00000029 0 1px 4px;border-radius:10px}.mb-5{margin-bottom:5px!important}.addedImg{display:flex;gap:5%;width:95%;margin-top:2rem}.addedImg .uploadedImg img{height:65px;width:65px;border-radius:50%}.addedImg .image-buttons{display:flex;gap:3%;padding-top:20px}.addedImg .image-buttons .button{display:flex;gap:8px;width:142px;height:40px;padding:12px 8px;font-family:lexandMedium;color:#3f3b3b;font-style:normal;font-weight:500;font-size:12px!important;border:1px dashed #E4E7EC;border-radius:12px;cursor:pointer}.addedImg .image-buttons .button img{width:20px}.addedImg .image-buttons .button .delete{display:flex;gap:15%;width:60%;margin:auto}.addedImg .image-buttons .button .delete img{width:12px}.emptyText{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px}.emptyText img{height:200px}@media screen and (max-width: 475px){.body{margin:0rem}.emptyText{padding:1rem}.emptyText img{width:100%}.subTabs_section{padding:1rem .5rem}.list_tabs{white-space:nowrap;overflow:scroll;justify-content:flex-start}.payment-details{margin:0rem}}.mtb-15{margin-top:15px;margin-bottom:15px}.checkbox-label{display:flex;align-items:center;gap:15px}.checkbox-label input{height:16px;width:16px}.upload-file{display:flex;align-items:center;justify-content:space-between;padding-right:10px}.upload-file mat-icon{color:#4caf50}.upload-file p{margin-bottom:0}@media only screen and (min-width: 320px) and (max-width : 500px){.image-box span{padding:11px 4rem}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: TextElementComponent, selector: "simpo-text-element", inputs: ["textData", "textLabel"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: PaymentDetailsComponent, selector: "simpo-payment-details", inputs: ["admissionData", "subscriptionsData", "termPaymentList"] }, { kind: "component", type: DocumentComponent, selector: "simpo-document", inputs: ["documentList"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type:
|
|
9573
9592
|
//directive
|
|
9574
|
-
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type:
|
|
9593
|
+
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i13.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i11.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
9575
9594
|
}
|
|
9576
9595
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: RegistrationFormComponent, decorators: [{
|
|
9577
9596
|
type: Component,
|
|
@@ -9829,7 +9848,6 @@ class PropertyListComponent extends BaseSection {
|
|
|
9829
9848
|
ngOnInit() {
|
|
9830
9849
|
this.styles = this.data?.styles;
|
|
9831
9850
|
this.content = this.data?.content;
|
|
9832
|
-
debugger;
|
|
9833
9851
|
this.getPropertyList();
|
|
9834
9852
|
}
|
|
9835
9853
|
getPropertyList() {
|
|
@@ -9881,6 +9899,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
|
9881
9899
|
type: Input
|
|
9882
9900
|
}] } });
|
|
9883
9901
|
|
|
9902
|
+
class KycDetailsComponent {
|
|
9903
|
+
constructor(restService, messageService) {
|
|
9904
|
+
this.restService = restService;
|
|
9905
|
+
this.messageService = messageService;
|
|
9906
|
+
this.panRequest = {
|
|
9907
|
+
panNumber: ''
|
|
9908
|
+
};
|
|
9909
|
+
this.aadharRequest = {
|
|
9910
|
+
aadhaarNumber: ''
|
|
9911
|
+
};
|
|
9912
|
+
this.verifyAadharRequest = {
|
|
9913
|
+
otp: '',
|
|
9914
|
+
refId: '',
|
|
9915
|
+
aadhaarNumber: ''
|
|
9916
|
+
};
|
|
9917
|
+
this.aadharOtpArray = new Array(6).fill('');
|
|
9918
|
+
this.isPanVerified = false;
|
|
9919
|
+
this.isAadharverified = false;
|
|
9920
|
+
this.aadharOtpSent = false;
|
|
9921
|
+
}
|
|
9922
|
+
ngOnInit() {
|
|
9923
|
+
this.getKycDetails();
|
|
9924
|
+
}
|
|
9925
|
+
ngOnDestroy() {
|
|
9926
|
+
this.kycDetailsSubscription?.unsubscribe();
|
|
9927
|
+
}
|
|
9928
|
+
getKycDetails() {
|
|
9929
|
+
this.kycDetailsSubscription = this.restService.getKycDetails().subscribe((res) => {
|
|
9930
|
+
if (res.message) {
|
|
9931
|
+
this.isPanVerified = res.message.panVerified === 'VALID';
|
|
9932
|
+
this.isAadharverified = res.message.aadhaarVerified === 'VALID';
|
|
9933
|
+
this.aadharRequest.aadhaarNumber = res.message.aadharNo;
|
|
9934
|
+
this.panRequest.panNumber = res.message.panNo;
|
|
9935
|
+
}
|
|
9936
|
+
}, (err) => {
|
|
9937
|
+
});
|
|
9938
|
+
}
|
|
9939
|
+
verifyPanNumber() {
|
|
9940
|
+
if (!this.validatePan()) {
|
|
9941
|
+
this.messageService.add({
|
|
9942
|
+
severity: 'error',
|
|
9943
|
+
summary: 'Pan Number',
|
|
9944
|
+
detail: 'Enter valid PAN number'
|
|
9945
|
+
});
|
|
9946
|
+
return;
|
|
9947
|
+
}
|
|
9948
|
+
this.restService.verifyPan(this.panRequest).subscribe((res) => {
|
|
9949
|
+
this.isPanVerified = true;
|
|
9950
|
+
this.restService.kycDetails = null;
|
|
9951
|
+
this.checkKycVerification();
|
|
9952
|
+
});
|
|
9953
|
+
}
|
|
9954
|
+
validatePan() {
|
|
9955
|
+
const panRegex = /^[A-Z]{5}[0-9]{4}[A-Z]$/;
|
|
9956
|
+
return panRegex.test(this.panRequest.panNumber);
|
|
9957
|
+
}
|
|
9958
|
+
sendAadharOtp() {
|
|
9959
|
+
if (!this.validateAadhaar()) {
|
|
9960
|
+
this.messageService.add({
|
|
9961
|
+
severity: 'error',
|
|
9962
|
+
summary: 'Aadhar Number',
|
|
9963
|
+
detail: 'Enter valid Aadhar number'
|
|
9964
|
+
});
|
|
9965
|
+
return;
|
|
9966
|
+
}
|
|
9967
|
+
this.restService.sendAadharOtp(this.aadharRequest).subscribe((res) => {
|
|
9968
|
+
this.aadharOtpSent = true;
|
|
9969
|
+
this.messageService.add({
|
|
9970
|
+
severity: 'success',
|
|
9971
|
+
summary: 'OTP Sent',
|
|
9972
|
+
detail: 'AAdhar OTP Sent in registered mobile number'
|
|
9973
|
+
});
|
|
9974
|
+
this.verifyAadharRequest.refId = res.message?.ref_id;
|
|
9975
|
+
});
|
|
9976
|
+
}
|
|
9977
|
+
verifyAadharOtp() {
|
|
9978
|
+
this.verifyAadharRequest.otp = "";
|
|
9979
|
+
this.aadharOtpArray.forEach((otp) => {
|
|
9980
|
+
this.verifyAadharRequest.otp += otp;
|
|
9981
|
+
});
|
|
9982
|
+
this.verifyAadharRequest.aadhaarNumber = this.aadharRequest.aadhaarNumber;
|
|
9983
|
+
this.restService.verifyAadharOtp(this.verifyAadharRequest).subscribe((res) => {
|
|
9984
|
+
this.isAadharverified = true;
|
|
9985
|
+
this.restService.kycDetails = null;
|
|
9986
|
+
this.checkKycVerification();
|
|
9987
|
+
});
|
|
9988
|
+
}
|
|
9989
|
+
validateAadhaar() {
|
|
9990
|
+
const aadhaarRegex = /^[2-9]{1}[0-9]{11}$/;
|
|
9991
|
+
return aadhaarRegex.test(this.aadharRequest.aadhaarNumber);
|
|
9992
|
+
}
|
|
9993
|
+
moveAadharOtpCursor(event, idx) {
|
|
9994
|
+
if (isNaN(Number(event.key)) && event.code != "Backspace")
|
|
9995
|
+
return;
|
|
9996
|
+
if (event.code != "Backspace") {
|
|
9997
|
+
this.aadharOtpArray[idx] = event.key;
|
|
9998
|
+
document.getElementById("aadharOtp_" + (idx + 1))?.focus();
|
|
9999
|
+
}
|
|
10000
|
+
if (event.code == "Backspace" && !this.aadharOtpArray[idx]) {
|
|
10001
|
+
document.getElementById("aadharOtp_" + (idx - 1))?.focus();
|
|
10002
|
+
}
|
|
10003
|
+
}
|
|
10004
|
+
checkKycVerification() {
|
|
10005
|
+
if (this.isAadharverified && this.isPanVerified)
|
|
10006
|
+
document.getElementById('closeKycCanvas')?.click();
|
|
10007
|
+
}
|
|
10008
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: KycDetailsComponent, deps: [{ token: RestService }, { token: i5$2.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10009
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: KycDetailsComponent, isStandalone: true, selector: "simpo-kyc-details", providers: [MessageService], ngImport: i0, template: "<section class=\"main-section\" *ngIf=\"!(isPanVerified && isAadharverified)\">\r\n <img class=\"img\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/970332c1740030187726kyc.png\" alt=\"\">\r\n <div class=\"text-group\">\r\n <p class=\"heading\">Complete Your KYC to start Investing</p>\r\n <p class=\"desc\">Before you can invest, we need to verify your identity, simply upload your documents,\r\n <br> submit your KYC, and let us handle the rest\r\n </p>\r\n </div>\r\n <button class=\"submit-btn\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">Submit KYC Now</button>\r\n</section>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\">\r\n <div class=\"header\">\r\n <p>KYC Details</p>\r\n </div>\r\n <div class=\"middle-section\">\r\n <div class=\"body\">\r\n <div class=\"secured\">\r\n <mat-icon>security</mat-icon>\r\n <p>Your Data is Safe & Secure</p>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">PAN Number</label>\r\n <p class=\"verify-text\" (click)=\"verifyPanNumber()\" *ngIf=\"!isPanVerified\">Verify</p>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"panRequest.panNumber\" [disabled]=\"isPanVerified\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\" *ngIf=\"isPanVerified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <!-- <div class=\"mt-1\">\r\n <label for=\"\">Name on PAN</label>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"panRequest.name\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n </div>\r\n </div> -->\r\n <div class=\"mt-1\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">Aadhar Number</label>\r\n <p class=\"verify-text\" (click)=\"sendAadharOtp()\" *ngIf=\"!aadharOtpSent\">Send OTP</p>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"aadharRequest.aadhaarNumber\" [disabled]=\"isAadharverified\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\" *ngIf=\"aadharOtpSent\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <label for=\"\">Enter OTP</label>\r\n\r\n <div id=\"otp\" class=\"otp-input\">\r\n <ng-container *ngFor=\"let otp of [1,2,3,4,5,6]; let idx = index\">\r\n <input type=\"number\" max=\"9\" class=\"otp-input\"\r\n [(ngModel)]=\"aadharOtpArray[idx]\" (keyup)=\"moveAadharOtpCursor($event, idx)\" [id]=\"'aadharOtp_'+idx\"/>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button class=\"cancel-btn\" data-bs-dismiss=\"offcanvas\" id=\"closeKycCanvas\">Cancel</button>\r\n <button class=\"submit-btn\" *ngIf=\"aadharOtpSent\" (click)=\"verifyAadharOtp()\">Verify</button>\r\n </div>\r\n</div>\r\n", styles: [".main-section{height:100%;background:#fff;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center}.img{width:35%}.text-group{text-align:center;margin-top:3rem;margin-bottom:2rem}.heading{font-size:14px;font-family:DM SANS;font-weight:700;color:#000}.desc{font-size:14px;color:#0009;font-family:DM SANS;font-weight:500}.submit-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:#f8a938;color:#fff;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.cancel-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:transparent;color:#f8a938;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.header{padding:20px;border:1px solid rgba(14,35,60,.16);height:60px}.header p{font-size:17px;margin-bottom:0;font-weight:600;font-family:Inter}.middle-section{height:calc(100vh - 120px);overflow:scroll;background:#fcfcfc}.footer{position:absolute;bottom:0;height:60px;display:flex;align-items:center;justify-content:flex-end;border-top:1px solid rgba(14,35,60,.16);width:100%;padding:20px;gap:14px}.offcanvas{width:40%;z-index:100000000}.body{background:#fff;margin:2.5rem;padding:2rem;border-radius:10px}.body label{font-size:14px;font-family:DM SANS;color:#434443;font-weight:400}.secured{display:flex;justify-content:center;gap:10px}.secured p{font-size:15px;font-family:DM SANS;font-weight:400;color:#0009}.secured mat-icon{display:flex;font-size:18px;color:#00dd80;align-items:center;justify-content:center}.input-box{width:100%;display:flex;justify-content:space-between;padding:10px;border:1px solid rgba(208,213,221,1);border-radius:7px;margin-top:8px}.input-box input{width:90%;border:none;outline:none;font-size:16px;font-family:DM SANS}.verified{color:#1ac100}p{margin-bottom:0}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.otp-input{display:flex;gap:20px;margin-top:8px}.otp-input input{width:59px;border:1px solid rgba(208,213,221,1);height:54px;border-radius:8px;outline:none;justify-content:center;text-align:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.justify-space{justify-content:space-between}.verify-text{font-size:13px;font-family:DM SANS;color:#f8a938;cursor:pointer}@media screen and (max-width: 475px){.offcanvas{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
10010
|
+
}
|
|
10011
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: KycDetailsComponent, decorators: [{
|
|
10012
|
+
type: Component,
|
|
10013
|
+
args: [{ selector: 'simpo-kyc-details', standalone: true, imports: [MatIconModule, CommonModule, FormsModule], providers: [MessageService], template: "<section class=\"main-section\" *ngIf=\"!(isPanVerified && isAadharverified)\">\r\n <img class=\"img\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/970332c1740030187726kyc.png\" alt=\"\">\r\n <div class=\"text-group\">\r\n <p class=\"heading\">Complete Your KYC to start Investing</p>\r\n <p class=\"desc\">Before you can invest, we need to verify your identity, simply upload your documents,\r\n <br> submit your KYC, and let us handle the rest\r\n </p>\r\n </div>\r\n <button class=\"submit-btn\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">Submit KYC Now</button>\r\n</section>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\">\r\n <div class=\"header\">\r\n <p>KYC Details</p>\r\n </div>\r\n <div class=\"middle-section\">\r\n <div class=\"body\">\r\n <div class=\"secured\">\r\n <mat-icon>security</mat-icon>\r\n <p>Your Data is Safe & Secure</p>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">PAN Number</label>\r\n <p class=\"verify-text\" (click)=\"verifyPanNumber()\" *ngIf=\"!isPanVerified\">Verify</p>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"panRequest.panNumber\" [disabled]=\"isPanVerified\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\" *ngIf=\"isPanVerified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <!-- <div class=\"mt-1\">\r\n <label for=\"\">Name on PAN</label>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"panRequest.name\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n </div>\r\n </div> -->\r\n <div class=\"mt-1\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">Aadhar Number</label>\r\n <p class=\"verify-text\" (click)=\"sendAadharOtp()\" *ngIf=\"!aadharOtpSent\">Send OTP</p>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"aadharRequest.aadhaarNumber\" [disabled]=\"isAadharverified\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\" *ngIf=\"aadharOtpSent\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <label for=\"\">Enter OTP</label>\r\n\r\n <div id=\"otp\" class=\"otp-input\">\r\n <ng-container *ngFor=\"let otp of [1,2,3,4,5,6]; let idx = index\">\r\n <input type=\"number\" max=\"9\" class=\"otp-input\"\r\n [(ngModel)]=\"aadharOtpArray[idx]\" (keyup)=\"moveAadharOtpCursor($event, idx)\" [id]=\"'aadharOtp_'+idx\"/>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button class=\"cancel-btn\" data-bs-dismiss=\"offcanvas\" id=\"closeKycCanvas\">Cancel</button>\r\n <button class=\"submit-btn\" *ngIf=\"aadharOtpSent\" (click)=\"verifyAadharOtp()\">Verify</button>\r\n </div>\r\n</div>\r\n", styles: [".main-section{height:100%;background:#fff;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center}.img{width:35%}.text-group{text-align:center;margin-top:3rem;margin-bottom:2rem}.heading{font-size:14px;font-family:DM SANS;font-weight:700;color:#000}.desc{font-size:14px;color:#0009;font-family:DM SANS;font-weight:500}.submit-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:#f8a938;color:#fff;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.cancel-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:transparent;color:#f8a938;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.header{padding:20px;border:1px solid rgba(14,35,60,.16);height:60px}.header p{font-size:17px;margin-bottom:0;font-weight:600;font-family:Inter}.middle-section{height:calc(100vh - 120px);overflow:scroll;background:#fcfcfc}.footer{position:absolute;bottom:0;height:60px;display:flex;align-items:center;justify-content:flex-end;border-top:1px solid rgba(14,35,60,.16);width:100%;padding:20px;gap:14px}.offcanvas{width:40%;z-index:100000000}.body{background:#fff;margin:2.5rem;padding:2rem;border-radius:10px}.body label{font-size:14px;font-family:DM SANS;color:#434443;font-weight:400}.secured{display:flex;justify-content:center;gap:10px}.secured p{font-size:15px;font-family:DM SANS;font-weight:400;color:#0009}.secured mat-icon{display:flex;font-size:18px;color:#00dd80;align-items:center;justify-content:center}.input-box{width:100%;display:flex;justify-content:space-between;padding:10px;border:1px solid rgba(208,213,221,1);border-radius:7px;margin-top:8px}.input-box input{width:90%;border:none;outline:none;font-size:16px;font-family:DM SANS}.verified{color:#1ac100}p{margin-bottom:0}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.otp-input{display:flex;gap:20px;margin-top:8px}.otp-input input{width:59px;border:1px solid rgba(208,213,221,1);height:54px;border-radius:8px;outline:none;justify-content:center;text-align:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.justify-space{justify-content:space-between}.verify-text{font-size:13px;font-family:DM SANS;color:#f8a938;cursor:pointer}@media screen and (max-width: 475px){.offcanvas{width:100%}}\n"] }]
|
|
10014
|
+
}], ctorParameters: () => [{ type: RestService }, { type: i5$2.MessageService }] });
|
|
10015
|
+
|
|
9884
10016
|
class PropertyDetailComponent {
|
|
9885
10017
|
constructor(restService, activatedRoute, router, matDialog) {
|
|
9886
10018
|
this.restService = restService;
|
|
@@ -9954,6 +10086,9 @@ class PropertyDetailComponent {
|
|
|
9954
10086
|
this.getPropertyDetails();
|
|
9955
10087
|
});
|
|
9956
10088
|
}
|
|
10089
|
+
ngOnDestroy() {
|
|
10090
|
+
this.kycDetailsSubscription?.unsubscribe();
|
|
10091
|
+
}
|
|
9957
10092
|
getPropertyDetails() {
|
|
9958
10093
|
this.restService.getPropertyDetails(this.propertyId).subscribe((res) => {
|
|
9959
10094
|
this.propertyDetails = res;
|
|
@@ -9964,45 +10099,28 @@ class PropertyDetailComponent {
|
|
|
9964
10099
|
this.router.navigate(['login-signup'], { queryParams: { id: this.propertyDetails.propertyId } });
|
|
9965
10100
|
return;
|
|
9966
10101
|
}
|
|
9967
|
-
this.
|
|
10102
|
+
this.getKycDetails();
|
|
10103
|
+
}
|
|
10104
|
+
getKycDetails() {
|
|
10105
|
+
this.kycDetailsSubscription = this.restService.getKycDetails().subscribe((res) => {
|
|
10106
|
+
if (res?.message?.panVerified === 'VALID' && res?.message?.aadhaarVerified === 'VALID') {
|
|
10107
|
+
this.matDialog.open(PaymentConfirmationComponent, { panelClass: 'payment-confirmation', data: { details: this.propertyDetails, totalArea: this.noOfSqft } });
|
|
10108
|
+
}
|
|
10109
|
+
else {
|
|
10110
|
+
this.matDialog.open(KycDetailsComponent, { panelClass: "login-signup" });
|
|
10111
|
+
}
|
|
10112
|
+
});
|
|
9968
10113
|
}
|
|
9969
10114
|
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 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9970
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertyDetailComponent, isStandalone: true, selector: "simpo-property-detail", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"main-container\">\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide p-relative\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item active\" data-bs-interval=\"2000\" *ngFor=\"let img of propertyDetails.imgUrl\">\r\n <img [src]=\"img\" class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div>\r\n <!-- <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div>\r\n <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div> -->\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-between\">\r\n <div class=\"property-details\">\r\n <p class=\"pname\">{{propertyDetails.name}}</p>\r\n <span class=\"plocation d-flex align-items-center gap-5\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\"\r\n alt=\"location image\"> {{propertyDetails.location}}</span>\r\n </div>\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <!-- d-flex justify-content-end align-items-end -->\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <!-- additional-properties-1 -->\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" [attr.data-bs-slide-to]=\"i\"\r\n class=\"active additional-properties\" aria-current=\"true\" aria-label=\"Slide 1\"\r\n *ngFor=\"let slide of propertyDetails.imgUrl;let i = index\"></button>\r\n <!-- class=\"additional-properties\" -->\r\n <!-- <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\" class=\"additional-properties\"></button>\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\" class=\"additional-properties\"></button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"property-numbers d-flex justify-content-between\">\r\n <ng-container>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.pricePerSqFeet || 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\">\r\n <div class=\"right w-60 \">\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">About Property</div>\r\n <div class=\"about-property-text\">{{propertyDetails.description}}</div>\r\n <div class=\"about-property-details d-flex gap-10\">\r\n <ng-container>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Type: </div>\r\n <div class=\"left-text\">{{propertyDetails.propertyType}}</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Size:</div>\r\n <div class=\"left-text\">{{propertyDetails.totalAreaSqFeet}}</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">year:</div>\r\n <div class=\"left-text\">{{propertyDetails.year}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\" *ngIf=\"(propertyDetails?.benefits?.length || 0) > 0\">\r\n <div class=\"head-about-property\">Investment Benefit</div>\r\n <div class=\"card-container d-flex gap-10\">\r\n <ng-container *ngFor=\"let benefits of propertyDetails.benefits\">\r\n <div class=\"cards\">\r\n <div class=\"image-container w-100 d-flex justify-content-center\">\r\n <img [src]=\"benefits.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"card-head\">{{benefits.title}}</div>\r\n <div class=\"card-text\">{{benefits.description}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">Documents & Reports</div>\r\n <div class=\"file-container d-flex justify-content-between gap-10\">\r\n <div class=\"file d-flex justify-content-between\" *ngFor=\"let ele of pdfCards\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/678394c1739183726107image%209.png\"\r\n alt=\"pdf\">\r\n <div class=\"doc-text w-75 d-flex align-items-center\"> {{ele.length > 15 ?\r\n ele.substring(0,15)+'...' : ele }}</div>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/195414c1739183779845fi_3502477.png\"\r\n alt=\"download\" class=\"download-img\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"left w-40\">\r\n <div class=\"sqft\">\r\n <div class=\"head-about-property\">Buy SQFT</div>\r\n <div class=\"price justify-content-between d-flex\">\r\n <div class=\"left-price\">Price/Sq.ft</div>\r\n <div class=\"right-price\">\u20B9{{propertyDetails.financeDetails.pricePerSqFeet}}</div>\r\n </div>\r\n <div class=\"sqft-quantity d-flex justify-content-between w-100 align-items-center\">\r\n <div class=\"left-sqft\">SQFT Quantity</div>\r\n <div class=\"right-sqft d-flex align-items-center\">\r\n <mat-icon (click)=\"noOfSqft > 0 ? noOfSqft = noOfSqft - 1 : noOfSqft = 0\"\r\n class=\"d-flex align-items-center justify-content-center icon\">remove</mat-icon>\r\n <div class=\"sqft-number d-flex justify-content-center\"><input type=\"number\" [(ngModel)]=\"noOfSqft\"\r\n class=\"sqft-number additional-properties-2 text-center p-0 \"></div>\r\n <mat-icon (click)=\"noOfSqft = noOfSqft + 1\"\r\n class=\"d-flex align-items-center justify-content-center icon\">add</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"payable d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"payable-left\">\r\n <p class=\"pay-text\">Payable Amount</p><span class=\"pay-subtext\">(Incl. Fees & Other\r\n Levies)</span>\r\n </div>\r\n <div class=\"payable-right\">\r\n \u20B9{{ noOfSqft * propertyDetails.financeDetails.pricePerSqFeet}}\r\n </div>\r\n </div>\r\n <div class=\"buy\" (click)=\"purchaseProperty()\">\r\n Buy SQFT\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n", 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}@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"] }] }); }
|
|
10115
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PropertyDetailComponent, isStandalone: true, selector: "simpo-property-detail", inputs: { data: "data" }, ngImport: i0, template: "<section class=\"main-container\">\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide p-relative\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item active\" data-bs-interval=\"2000\" *ngFor=\"let img of propertyDetails.imgUrl\">\r\n <img [src]=\"img\" class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div>\r\n <!-- <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div>\r\n <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div> -->\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-between\">\r\n <div class=\"property-details\">\r\n <p class=\"pname\">{{propertyDetails.name}}</p>\r\n <span class=\"plocation d-flex align-items-center gap-5\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\"\r\n alt=\"location image\"> {{propertyDetails.location}}</span>\r\n </div>\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <!-- d-flex justify-content-end align-items-end -->\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <!-- additional-properties-1 -->\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" [attr.data-bs-slide-to]=\"i\"\r\n class=\"active additional-properties\" aria-current=\"true\" aria-label=\"Slide 1\"\r\n *ngFor=\"let slide of propertyDetails.imgUrl;let i = index\"></button>\r\n <!-- class=\"additional-properties\" -->\r\n <!-- <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\" class=\"additional-properties\"></button>\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\" class=\"additional-properties\"></button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"property-numbers d-flex justify-content-between\">\r\n <ng-container>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.pricePerSqFeet || 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\">\r\n <div class=\"right w-60 \">\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">About Property</div>\r\n <div class=\"about-property-text\">{{propertyDetails.description}}</div>\r\n <div class=\"about-property-details d-flex gap-10\">\r\n <ng-container>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Type: </div>\r\n <div class=\"left-text\">{{propertyDetails.propertyType}}</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Size:</div>\r\n <div class=\"left-text\">{{propertyDetails.totalAreaSqFeet}}</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">year:</div>\r\n <div class=\"left-text\">{{propertyDetails.year}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\" *ngIf=\"(propertyDetails?.benefits?.length || 0) > 0\">\r\n <div class=\"head-about-property\">Investment Benefit</div>\r\n <div class=\"card-container d-flex gap-10\">\r\n <ng-container *ngFor=\"let benefits of propertyDetails.benefits\">\r\n <div class=\"cards\">\r\n <div class=\"image-container w-100 d-flex justify-content-center\">\r\n <img [src]=\"benefits.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"card-head\">{{benefits.title}}</div>\r\n <div class=\"card-text\">{{benefits.description}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">Documents & Reports</div>\r\n <div class=\"file-container d-flex justify-content-between gap-10\">\r\n <div class=\"file d-flex justify-content-between\" *ngFor=\"let ele of pdfCards\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/678394c1739183726107image%209.png\"\r\n alt=\"pdf\">\r\n <div class=\"doc-text w-75 d-flex align-items-center\"> {{ele.length > 15 ?\r\n ele.substring(0,15)+'...' : ele }}</div>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/195414c1739183779845fi_3502477.png\"\r\n alt=\"download\" class=\"download-img\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"left w-40\">\r\n <div class=\"sqft\">\r\n <div class=\"head-about-property\">Buy SQFT</div>\r\n <div class=\"price justify-content-between d-flex\">\r\n <div class=\"left-price\">Price/Sq.ft</div>\r\n <div class=\"right-price\">\u20B9{{propertyDetails.financeDetails.pricePerSqFeet}}</div>\r\n </div>\r\n <div class=\"sqft-quantity d-flex justify-content-between w-100 align-items-center\">\r\n <div class=\"left-sqft\">SQFT Quantity</div>\r\n <div class=\"right-sqft d-flex align-items-center\">\r\n <mat-icon (click)=\"noOfSqft > 0 ? noOfSqft = noOfSqft - 1 : noOfSqft = 0\"\r\n class=\"d-flex align-items-center justify-content-center icon\">remove</mat-icon>\r\n <div class=\"sqft-number d-flex justify-content-center\"><input type=\"number\" [(ngModel)]=\"noOfSqft\"\r\n class=\"sqft-number additional-properties-2 text-center p-0 \"></div>\r\n <mat-icon (click)=\"noOfSqft = noOfSqft + 1\"\r\n class=\"d-flex align-items-center justify-content-center icon\">add</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"payable d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"payable-left\">\r\n <p class=\"pay-text\">Payable Amount</p><span class=\"pay-subtext\">(Incl. Fees & Other\r\n Levies)</span>\r\n </div>\r\n <div class=\"payable-right\">\r\n \u20B9{{ noOfSqft * propertyDetails.financeDetails.pricePerSqFeet}}\r\n </div>\r\n </div>\r\n <div class=\"buy\" (click)=\"purchaseProperty()\">\r\n Buy SQFT\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n", 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}@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 }] }); }
|
|
9971
10116
|
}
|
|
9972
10117
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PropertyDetailComponent, decorators: [{
|
|
9973
10118
|
type: Component,
|
|
9974
|
-
args: [{ selector: 'simpo-property-detail', standalone: true, imports: [NgFor, MatIcon, NgIf, FormsModule], template: "<section class=\"main-container\">\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide p-relative\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item active\" data-bs-interval=\"2000\" *ngFor=\"let img of propertyDetails.imgUrl\">\r\n <img [src]=\"img\" class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div>\r\n <!-- <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div>\r\n <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div> -->\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-between\">\r\n <div class=\"property-details\">\r\n <p class=\"pname\">{{propertyDetails.name}}</p>\r\n <span class=\"plocation d-flex align-items-center gap-5\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\"\r\n alt=\"location image\"> {{propertyDetails.location}}</span>\r\n </div>\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <!-- d-flex justify-content-end align-items-end -->\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <!-- additional-properties-1 -->\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" [attr.data-bs-slide-to]=\"i\"\r\n class=\"active additional-properties\" aria-current=\"true\" aria-label=\"Slide 1\"\r\n *ngFor=\"let slide of propertyDetails.imgUrl;let i = index\"></button>\r\n <!-- class=\"additional-properties\" -->\r\n <!-- <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\" class=\"additional-properties\"></button>\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\" class=\"additional-properties\"></button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"property-numbers d-flex justify-content-between\">\r\n <ng-container>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.pricePerSqFeet || 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\">\r\n <div class=\"right w-60 \">\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">About Property</div>\r\n <div class=\"about-property-text\">{{propertyDetails.description}}</div>\r\n <div class=\"about-property-details d-flex gap-10\">\r\n <ng-container>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Type: </div>\r\n <div class=\"left-text\">{{propertyDetails.propertyType}}</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Size:</div>\r\n <div class=\"left-text\">{{propertyDetails.totalAreaSqFeet}}</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">year:</div>\r\n <div class=\"left-text\">{{propertyDetails.year}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\" *ngIf=\"(propertyDetails?.benefits?.length || 0) > 0\">\r\n <div class=\"head-about-property\">Investment Benefit</div>\r\n <div class=\"card-container d-flex gap-10\">\r\n <ng-container *ngFor=\"let benefits of propertyDetails.benefits\">\r\n <div class=\"cards\">\r\n <div class=\"image-container w-100 d-flex justify-content-center\">\r\n <img [src]=\"benefits.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"card-head\">{{benefits.title}}</div>\r\n <div class=\"card-text\">{{benefits.description}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">Documents & Reports</div>\r\n <div class=\"file-container d-flex justify-content-between gap-10\">\r\n <div class=\"file d-flex justify-content-between\" *ngFor=\"let ele of pdfCards\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/678394c1739183726107image%209.png\"\r\n alt=\"pdf\">\r\n <div class=\"doc-text w-75 d-flex align-items-center\"> {{ele.length > 15 ?\r\n ele.substring(0,15)+'...' : ele }}</div>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/195414c1739183779845fi_3502477.png\"\r\n alt=\"download\" class=\"download-img\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"left w-40\">\r\n <div class=\"sqft\">\r\n <div class=\"head-about-property\">Buy SQFT</div>\r\n <div class=\"price justify-content-between d-flex\">\r\n <div class=\"left-price\">Price/Sq.ft</div>\r\n <div class=\"right-price\">\u20B9{{propertyDetails.financeDetails.pricePerSqFeet}}</div>\r\n </div>\r\n <div class=\"sqft-quantity d-flex justify-content-between w-100 align-items-center\">\r\n <div class=\"left-sqft\">SQFT Quantity</div>\r\n <div class=\"right-sqft d-flex align-items-center\">\r\n <mat-icon (click)=\"noOfSqft > 0 ? noOfSqft = noOfSqft - 1 : noOfSqft = 0\"\r\n class=\"d-flex align-items-center justify-content-center icon\">remove</mat-icon>\r\n <div class=\"sqft-number d-flex justify-content-center\"><input type=\"number\" [(ngModel)]=\"noOfSqft\"\r\n class=\"sqft-number additional-properties-2 text-center p-0 \"></div>\r\n <mat-icon (click)=\"noOfSqft = noOfSqft + 1\"\r\n class=\"d-flex align-items-center justify-content-center icon\">add</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"payable d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"payable-left\">\r\n <p class=\"pay-text\">Payable Amount</p><span class=\"pay-subtext\">(Incl. Fees & Other\r\n Levies)</span>\r\n </div>\r\n <div class=\"payable-right\">\r\n \u20B9{{ noOfSqft * propertyDetails.financeDetails.pricePerSqFeet}}\r\n </div>\r\n </div>\r\n <div class=\"buy\" (click)=\"purchaseProperty()\">\r\n Buy SQFT\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n", 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}@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"] }]
|
|
10119
|
+
args: [{ selector: 'simpo-property-detail', standalone: true, imports: [NgFor, MatIcon, NgIf, FormsModule, MatDialogModule], template: "<section class=\"main-container\">\r\n <div id=\"carouselExampleInterval\" class=\"carousel slide p-relative\" data-bs-ride=\"carousel\">\r\n <div class=\"carousel-inner\">\r\n <div class=\"carousel-item active\" data-bs-interval=\"2000\" *ngFor=\"let img of propertyDetails.imgUrl\">\r\n <img [src]=\"img\" class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div>\r\n <!-- <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div>\r\n <div class=\"carousel-item\" data-bs-interval=\"3000\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/815921c1739254843186image%20%285%29.png\"\r\n class=\"d-block w-100 height-30\" alt=\"property-image\">\r\n </div> -->\r\n </div>\r\n <div class=\"propertyName d-flex justify-content-between\">\r\n <div class=\"property-details\">\r\n <p class=\"pname\">{{propertyDetails.name}}</p>\r\n <span class=\"plocation d-flex align-items-center gap-5\"><img\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/384275c1737629729545location_on.png\"\r\n alt=\"location image\"> {{propertyDetails.location}}</span>\r\n </div>\r\n <div class=\"carousel d-flex justify-content-end align-items-end\">\r\n <!-- d-flex justify-content-end align-items-end -->\r\n <div class=\"carousel-indicators additional-properties-1\">\r\n <!-- additional-properties-1 -->\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" [attr.data-bs-slide-to]=\"i\"\r\n class=\"active additional-properties\" aria-current=\"true\" aria-label=\"Slide 1\"\r\n *ngFor=\"let slide of propertyDetails.imgUrl;let i = index\"></button>\r\n <!-- class=\"additional-properties\" -->\r\n <!-- <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\" class=\"additional-properties\"></button>\r\n <button type=\"button\" data-bs-target=\"#carouselExampleInterval\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\" class=\"additional-properties\"></button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"property-numbers d-flex justify-content-between\">\r\n <ng-container>\r\n <div class=\"icon-text w-18\">\r\n <div class=\"text text-center d-flex align-items-center justify-content-center gap-10\">\r\n <!-- <ng-container *ngIf=\"ele.icon.length > 1\">\r\n <img [src]=\"ele.icon\" alt=\"Icon\" class=\"tick-img\">\r\n </ng-container> -->\r\n <p class=\"number-text mb-0\">\u20B9{{ propertyDetails?.financeDetails?.pricePerSqFeet || 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\">\r\n <div class=\"right w-60 \">\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">About Property</div>\r\n <div class=\"about-property-text\">{{propertyDetails.description}}</div>\r\n <div class=\"about-property-details d-flex gap-10\">\r\n <ng-container>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Type: </div>\r\n <div class=\"left-text\">{{propertyDetails.propertyType}}</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">Property Size:</div>\r\n <div class=\"left-text\">{{propertyDetails.totalAreaSqFeet}}</div>\r\n </div>\r\n <div class=\"gap-10 d-flex\">\r\n <div class=\"right-text\">year:</div>\r\n <div class=\"left-text\">{{propertyDetails.year}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\" *ngIf=\"(propertyDetails?.benefits?.length || 0) > 0\">\r\n <div class=\"head-about-property\">Investment Benefit</div>\r\n <div class=\"card-container d-flex gap-10\">\r\n <ng-container *ngFor=\"let benefits of propertyDetails.benefits\">\r\n <div class=\"cards\">\r\n <div class=\"image-container w-100 d-flex justify-content-center\">\r\n <img [src]=\"benefits.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"card-head\">{{benefits.title}}</div>\r\n <div class=\"card-text\">{{benefits.description}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"about-property\">\r\n <div class=\"head-about-property\">Documents & Reports</div>\r\n <div class=\"file-container d-flex justify-content-between gap-10\">\r\n <div class=\"file d-flex justify-content-between\" *ngFor=\"let ele of pdfCards\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/678394c1739183726107image%209.png\"\r\n alt=\"pdf\">\r\n <div class=\"doc-text w-75 d-flex align-items-center\"> {{ele.length > 15 ?\r\n ele.substring(0,15)+'...' : ele }}</div>\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/195414c1739183779845fi_3502477.png\"\r\n alt=\"download\" class=\"download-img\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"left w-40\">\r\n <div class=\"sqft\">\r\n <div class=\"head-about-property\">Buy SQFT</div>\r\n <div class=\"price justify-content-between d-flex\">\r\n <div class=\"left-price\">Price/Sq.ft</div>\r\n <div class=\"right-price\">\u20B9{{propertyDetails.financeDetails.pricePerSqFeet}}</div>\r\n </div>\r\n <div class=\"sqft-quantity d-flex justify-content-between w-100 align-items-center\">\r\n <div class=\"left-sqft\">SQFT Quantity</div>\r\n <div class=\"right-sqft d-flex align-items-center\">\r\n <mat-icon (click)=\"noOfSqft > 0 ? noOfSqft = noOfSqft - 1 : noOfSqft = 0\"\r\n class=\"d-flex align-items-center justify-content-center icon\">remove</mat-icon>\r\n <div class=\"sqft-number d-flex justify-content-center\"><input type=\"number\" [(ngModel)]=\"noOfSqft\"\r\n class=\"sqft-number additional-properties-2 text-center p-0 \"></div>\r\n <mat-icon (click)=\"noOfSqft = noOfSqft + 1\"\r\n class=\"d-flex align-items-center justify-content-center icon\">add</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"payable d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"payable-left\">\r\n <p class=\"pay-text\">Payable Amount</p><span class=\"pay-subtext\">(Incl. Fees & Other\r\n Levies)</span>\r\n </div>\r\n <div class=\"payable-right\">\r\n \u20B9{{ noOfSqft * propertyDetails.financeDetails.pricePerSqFeet}}\r\n </div>\r\n </div>\r\n <div class=\"buy\" (click)=\"purchaseProperty()\">\r\n Buy SQFT\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</section>\r\n", 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}@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"] }]
|
|
9975
10120
|
}], ctorParameters: () => [{ type: RestService }, { type: i2$2.ActivatedRoute }, { type: i2$2.Router }, { type: i5.MatDialog }], propDecorators: { data: [{
|
|
9976
10121
|
type: Input
|
|
9977
10122
|
}] } });
|
|
9978
10123
|
|
|
9979
|
-
class KycDetailsComponent {
|
|
9980
|
-
constructor(restService) {
|
|
9981
|
-
this.restService = restService;
|
|
9982
|
-
this.panRequest = {
|
|
9983
|
-
panNumber: '',
|
|
9984
|
-
name: ''
|
|
9985
|
-
};
|
|
9986
|
-
this.aadharRequest = {
|
|
9987
|
-
aadhaarNumber: ''
|
|
9988
|
-
};
|
|
9989
|
-
this.isPanVerified = false;
|
|
9990
|
-
this.isAadharVerified = false;
|
|
9991
|
-
}
|
|
9992
|
-
ngOnInit() { }
|
|
9993
|
-
verifyPanNumber() {
|
|
9994
|
-
this.restService.verifyPan(this.panRequest).subscribe((res) => {
|
|
9995
|
-
this.isPanVerified = true;
|
|
9996
|
-
});
|
|
9997
|
-
}
|
|
9998
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: KycDetailsComponent, deps: [{ token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9999
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: KycDetailsComponent, isStandalone: true, selector: "simpo-kyc-details", ngImport: i0, template: "<section class=\"main-section\">\r\n <img class=\"img\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/970332c1740030187726kyc.png\" alt=\"\">\r\n <div class=\"text-group\">\r\n <p class=\"heading\">Complete Your KYC to start Investing</p>\r\n <p class=\"desc\">Before you can invest, we need to verify your identity, simply upload your documents,\r\n <br> submit your KYC, and let us handle the rest\r\n </p>\r\n </div>\r\n <button class=\"submit-btn\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">Submit KYC Now</button>\r\n</section>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\">\r\n <div class=\"header\">\r\n <p>KYC Details</p>\r\n </div>\r\n <div class=\"middle-section\">\r\n <div class=\"body\">\r\n <div class=\"secured\">\r\n <mat-icon>security</mat-icon>\r\n <p>Your Data is Safe & Secure</p>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">PAN Number</label>\r\n <p class=\"verify-text\" (click)=\"verifyPanNumber()\">Verify</p>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"panRequest.panNumber\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\" *ngIf=\"isPanVerified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <label for=\"\">Name on PAN</label>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"panRequest.name\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">Aadhar Number</label>\r\n <p class=\"verify-text\">Verify</p>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"aadharRequest.aadhaarNumber\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <label for=\"\">Enter OTP</label>\r\n\r\n <div id=\"otp\" class=\"otp-input\">\r\n <ng-container *ngFor=\"let otp of [1,2,3,4,5,6]; let idx = index\">\r\n <input type=\"number\" max=\"9\" class=\"otp-input\" mat-suffix/>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button class=\"cancel-btn\" data-bs-dismiss=\"offcanvas\">Cancel</button>\r\n <button class=\"submit-btn\">Verify</button>\r\n </div>\r\n</div>\r\n", styles: [".main-section{height:100%;background:#fff;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center}.img{width:35%}.text-group{text-align:center;margin-top:3rem;margin-bottom:2rem}.heading{font-size:14px;font-family:DM SANS;font-weight:700;color:#000}.desc{font-size:14px;color:#0009;font-family:DM SANS;font-weight:500}.submit-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:#f8a938;color:#fff;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.cancel-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:transparent;color:#f8a938;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.header{padding:20px;border:1px solid rgba(14,35,60,.16);height:60px}.header p{font-size:17px;margin-bottom:0;font-weight:600;font-family:Inter}.middle-section{height:calc(100vh - 120px);overflow:scroll;background:#fcfcfc}.footer{position:absolute;bottom:0;height:60px;display:flex;align-items:center;justify-content:flex-end;border-top:1px solid rgba(14,35,60,.16);width:100%;padding:20px;gap:14px}.offcanvas{width:40%;z-index:100000000}.body{background:#fff;margin:2.5rem;padding:2rem;border-radius:10px}.body label{font-size:14px;font-family:DM SANS;color:#434443;font-weight:400}.secured{display:flex;justify-content:center;gap:10px}.secured p{font-size:15px;font-family:DM SANS;font-weight:400;color:#0009}.secured mat-icon{display:flex;font-size:18px;color:#00dd80;align-items:center;justify-content:center}.input-box{width:100%;display:flex;justify-content:space-between;padding:10px;border:1px solid rgba(208,213,221,1);border-radius:7px;margin-top:8px}.input-box input{width:90%;border:none;outline:none;font-size:16px;font-family:DM SANS}.verified{color:#1ac100}p{margin-bottom:0}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.otp-input{display:flex;gap:20px;margin-top:8px}.otp-input input{width:59px;border:1px solid rgba(208,213,221,1);height:54px;border-radius:8px;outline:none;justify-content:center;text-align:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.justify-space{justify-content:space-between}.verify-text{font-size:13px;font-family:DM SANS;color:#f8a938;cursor:pointer}@media screen and (max-width: 475px){.offcanvas{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.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"] }] }); }
|
|
10000
|
-
}
|
|
10001
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: KycDetailsComponent, decorators: [{
|
|
10002
|
-
type: Component,
|
|
10003
|
-
args: [{ selector: 'simpo-kyc-details', standalone: true, imports: [MatIconModule, CommonModule, FormsModule], template: "<section class=\"main-section\">\r\n <img class=\"img\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/970332c1740030187726kyc.png\" alt=\"\">\r\n <div class=\"text-group\">\r\n <p class=\"heading\">Complete Your KYC to start Investing</p>\r\n <p class=\"desc\">Before you can invest, we need to verify your identity, simply upload your documents,\r\n <br> submit your KYC, and let us handle the rest\r\n </p>\r\n </div>\r\n <button class=\"submit-btn\" type=\"button\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">Submit KYC Now</button>\r\n</section>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\">\r\n <div class=\"header\">\r\n <p>KYC Details</p>\r\n </div>\r\n <div class=\"middle-section\">\r\n <div class=\"body\">\r\n <div class=\"secured\">\r\n <mat-icon>security</mat-icon>\r\n <p>Your Data is Safe & Secure</p>\r\n </div>\r\n\r\n <div class=\"mt-2\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">PAN Number</label>\r\n <p class=\"verify-text\" (click)=\"verifyPanNumber()\">Verify</p>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"panRequest.panNumber\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\" *ngIf=\"isPanVerified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <label for=\"\">Name on PAN</label>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"panRequest.name\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <div class=\"d-flex justify-space\">\r\n <label for=\"\">Aadhar Number</label>\r\n <p class=\"verify-text\">Verify</p>\r\n </div>\r\n <div class=\"input-box\">\r\n <input type=\"text\" [(ngModel)]=\"aadharRequest.aadhaarNumber\">\r\n <mat-icon class=\"verified\" title=\"OTP Verified\">check_circle</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"mt-1\">\r\n <label for=\"\">Enter OTP</label>\r\n\r\n <div id=\"otp\" class=\"otp-input\">\r\n <ng-container *ngFor=\"let otp of [1,2,3,4,5,6]; let idx = index\">\r\n <input type=\"number\" max=\"9\" class=\"otp-input\" mat-suffix/>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"footer\">\r\n <button class=\"cancel-btn\" data-bs-dismiss=\"offcanvas\">Cancel</button>\r\n <button class=\"submit-btn\">Verify</button>\r\n </div>\r\n</div>\r\n", styles: [".main-section{height:100%;background:#fff;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center}.img{width:35%}.text-group{text-align:center;margin-top:3rem;margin-bottom:2rem}.heading{font-size:14px;font-family:DM SANS;font-weight:700;color:#000}.desc{font-size:14px;color:#0009;font-family:DM SANS;font-weight:500}.submit-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:#f8a938;color:#fff;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.cancel-btn{width:max-content!important;outline:none;border:1px solid rgba(248,169,56,1);background:transparent;color:#f8a938;border-radius:5px;font-size:16px!important;font-family:DM SANS;padding:7px 20px}.header{padding:20px;border:1px solid rgba(14,35,60,.16);height:60px}.header p{font-size:17px;margin-bottom:0;font-weight:600;font-family:Inter}.middle-section{height:calc(100vh - 120px);overflow:scroll;background:#fcfcfc}.footer{position:absolute;bottom:0;height:60px;display:flex;align-items:center;justify-content:flex-end;border-top:1px solid rgba(14,35,60,.16);width:100%;padding:20px;gap:14px}.offcanvas{width:40%;z-index:100000000}.body{background:#fff;margin:2.5rem;padding:2rem;border-radius:10px}.body label{font-size:14px;font-family:DM SANS;color:#434443;font-weight:400}.secured{display:flex;justify-content:center;gap:10px}.secured p{font-size:15px;font-family:DM SANS;font-weight:400;color:#0009}.secured mat-icon{display:flex;font-size:18px;color:#00dd80;align-items:center;justify-content:center}.input-box{width:100%;display:flex;justify-content:space-between;padding:10px;border:1px solid rgba(208,213,221,1);border-radius:7px;margin-top:8px}.input-box input{width:90%;border:none;outline:none;font-size:16px;font-family:DM SANS}.verified{color:#1ac100}p{margin-bottom:0}.mt-2{margin-top:2rem!important}.mt-1{margin-top:1rem!important}.otp-input{display:flex;gap:20px;margin-top:8px}.otp-input input{width:59px;border:1px solid rgba(208,213,221,1);height:54px;border-radius:8px;outline:none;justify-content:center;text-align:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.justify-space{justify-content:space-between}.verify-text{font-size:13px;font-family:DM SANS;color:#f8a938;cursor:pointer}@media screen and (max-width: 475px){.offcanvas{width:100%}}\n"] }]
|
|
10004
|
-
}], ctorParameters: () => [{ type: RestService }] });
|
|
10005
|
-
|
|
10006
10124
|
class SignupSigninComponent extends BaseSection {
|
|
10007
10125
|
constructor(_eventService, restService, router, activatedRoute, messageService, matDialog) {
|
|
10008
10126
|
super();
|
|
@@ -10038,6 +10156,9 @@ class SignupSigninComponent extends BaseSection {
|
|
|
10038
10156
|
this.propertyId = param['id'];
|
|
10039
10157
|
});
|
|
10040
10158
|
}
|
|
10159
|
+
ngOnDestroy() {
|
|
10160
|
+
this.kycDetailsSubscription?.unsubscribe();
|
|
10161
|
+
}
|
|
10041
10162
|
editSection() {
|
|
10042
10163
|
this._eventService.toggleEditorEvent.emit(false);
|
|
10043
10164
|
setTimeout(() => {
|
|
@@ -10139,9 +10260,7 @@ class SignupSigninComponent extends BaseSection {
|
|
|
10139
10260
|
this.router.navigate(['details'], { queryParams: { id: this.propertyId } });
|
|
10140
10261
|
return;
|
|
10141
10262
|
}
|
|
10142
|
-
|
|
10143
|
-
this.matDialog.open(KycDetailsComponent, { panelClass: "login-signup" });
|
|
10144
|
-
}
|
|
10263
|
+
this.getKycDetails();
|
|
10145
10264
|
this.router.navigate(['property-list']);
|
|
10146
10265
|
this.buttonLoader = false;
|
|
10147
10266
|
},
|
|
@@ -10196,9 +10315,7 @@ class SignupSigninComponent extends BaseSection {
|
|
|
10196
10315
|
this.router.navigate(['details'], { queryParams: { id: this.propertyId } });
|
|
10197
10316
|
return;
|
|
10198
10317
|
}
|
|
10199
|
-
|
|
10200
|
-
this.matDialog.open(KycDetailsComponent, { panelClass: "login-signup" });
|
|
10201
|
-
}
|
|
10318
|
+
this.getKycDetails();
|
|
10202
10319
|
this.router.navigate(['property-list']);
|
|
10203
10320
|
this.buttonLoader = false;
|
|
10204
10321
|
},
|
|
@@ -10216,6 +10333,13 @@ class SignupSigninComponent extends BaseSection {
|
|
|
10216
10333
|
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
|
10217
10334
|
return emailRegex.test(email);
|
|
10218
10335
|
}
|
|
10336
|
+
getKycDetails() {
|
|
10337
|
+
this.kycDetailsSubscripition = this.restService.getKycDetails().subscribe((res) => {
|
|
10338
|
+
if (!(res?.message?.panVerified === 'VALID' && res?.message?.aadhaarVerified === 'VALID')) {
|
|
10339
|
+
this.matDialog.open(KycDetailsComponent, { panelClass: "login-signup" });
|
|
10340
|
+
}
|
|
10341
|
+
});
|
|
10342
|
+
}
|
|
10219
10343
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: SignupSigninComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i5$2.MessageService }, { token: i5.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10220
10344
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: SignupSigninComponent, isStandalone: true, selector: "simpo-signup-signin", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" class=\"main-container h-85 d-flex align-items-center justify-content-center\"\r\n [ngStyle]=\"{'background-image': 'url(' + backgroundImage + ')'}\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"middle-container w-40-85\" [id]=\"data?.id\" [simpoBackground]=\"data?.styles?.background\"\r\n [simpoAnimation]=\"data?.styles?.animation\" [simpoCorner]=\"data?.styles?.corners\">\r\n <div class=\"head\">{{ currentPage == 'LOGIN' || currentPage == 'OTP' ? \"Sign In\" : currentPage ==\r\n 'FORGOT_PASSWORD' ? \"Forgot Password\" : currentPage == 'OTP_VERIFY' ? \"OTP Verfication\" : \"Sign Up\"}}</div>\r\n <div class=\"field-container\">\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'OTP'\">\r\n <div class=\"field-head\">Email or Phone Number</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Registered Email or Phone number\" [(ngModel)]=\"loginEmail\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP' && otpSent\">\r\n <div class=\"field-head\">OTP</div>\r\n <div class=\"field-text-1\">\r\n <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n [(ngModel)]=\"loginOtpArray[idx]\" (keyup)=\"moveLoginOtpCursor($event, idx)\" [id]=\"'loginOtp_'+idx\" #otpInput />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'OTP_VERIFY'\">\r\n <!-- <div class=\"field-head\" *ngIf=\"currentPage == 'OTP' \">OTP</div> -->\r\n <div class=\"field-text-1\">\r\n <div id=\"otp\" class=\"inputs d-flex flex-row justify-content-center mt-2\">\r\n <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n <input class=\"m-2 text-center form-control rounded additional-styles\" type=\"number\" max=\"1\"\r\n [(ngModel)]=\"otpArray[idx]\" (keyup)=\"move($event, idx)\" [id]=\"'otp_'+idx\" #otpInput />\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Name</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Name\" [(ngModel)]=\"investor.fullName\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Email</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Email\" [(ngModel)]=\"investor.emailId\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'SIGN_UP'\">\r\n <div class=\"field-head\">Phone Number</div>\r\n <div class=\"field-text\">\r\n <input type=\"text\" placeholder=\"Please Enter Your Phone Number\" [(ngModel)]=\"investor.phoneNumber\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n <div class=\"field-head\">Old Password</div>\r\n <div class=\"field-text\">\r\n <input type=\"password\" placeholder=\"Please Enter Your Password\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n <div class=\"field-head\">New Password</div>\r\n <div class=\"field-text\">\r\n <input type=\"password\" placeholder=\"Please Enter Your Password\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'FORGOT_PASSWORD'\">\r\n <div class=\"field-head\">Re-Enter Password</div>\r\n <div class=\"field-text\">\r\n <input type=\"password\" placeholder=\"Please Re-Enter Your Password\">\r\n </div>\r\n </div>\r\n <div class=\"field mb-15\" *ngIf=\"currentPage == 'LOGIN' || currentPage == 'SIGN_UP' \">\r\n <div class=\"field-head\">Password</div>\r\n <div class=\"field-text\">\r\n <input type=\"password\" placeholder=\"Please Enter Your Password\" [(ngModel)]=\"investor.password\">\r\n </div>\r\n </div>\r\n <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"currentPage == 'LOGIN'\" (click)=\"currentPage = 'FORGOT_PASSWORD'\">Forgot Password?</div>\r\n <div class=\"forgot-password cursor-pointer\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n *ngIf=\"currentPage == 'OTP_VERIFY'\">Resend OTP?</div>\r\n <div class=\"btn-container d-flex align-items-center justify-content-center\">\r\n <button class=\"login-btn cursor-pointer\" [style.background]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage != 'OTP'\"\r\n (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' && !otpSent\">\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' && otpSent\">\r\n <span *ngIf=\"buttonLoader\" ><i class=\"fas fa-circle-notch fa-spin\"></i> Loading</span>\r\n <span *ngIf=\"!buttonLoader\" >Login</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'\">Sign\r\n Up</span></div>\r\n <div class=\"signup-text m-5\">or</div>\r\n <div class=\"signup-text\">Login with <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'LOGIN' \"\r\n (click)=\"currentPage = 'OTP'\">OTP</span><span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"currentPage == 'OTP'\"\r\n (click)=\"currentPage = 'LOGIN'\">Password</span></div>\r\n </div>\r\n <div class=\"another-page\" *ngIf=\"currentPage == 'SIGN_UP' || currentPage == 'FORGOT_PASSWORD'\">\r\n <div class=\"signup-text\">Already have an account? <span class=\"span-text cursor-pointer\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"currentPage = 'LOGIN'\">Sign\r\n In</span></div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: ["*{font-family:DM Sans!important}.h-85{height:85vh;position:relative}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.w-40-85{width:40%}.btn-size{width:40%!important}.head{font-size:36px;font-weight:600;line-height:52px;color:#112133;text-align:center;padding:15px;padding-bottom:unset}.field-container{padding:15px}.field-head{margin-bottom:10px;font-size:17px;font-weight:600;line-height:24px;color:#2c2c2c}.field-text{padding:10px;border-radius:20px;font-size:15px;font-weight:400;color:#ababab;background:#fff}.field-text input{width:100%;border:none;appearance:none;outline:unset;background:#fff;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:15px 5px!important;width:9%!important;border:unset!important;border-radius:20px!important}@media screen and (max-width : 475px){.w-40-85{width:85%}.h-86{height:90vh!important}.btn-size{width:100%!important;white-space:nowrap}.additional-styles{width:15%!important;border-radius:10px!important}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type:
|
|
10221
10345
|
//Directives
|
|
@@ -11534,7 +11658,7 @@ class ProductDescComponent extends BaseSection {
|
|
|
11534
11658
|
return window.innerWidth <= 475;
|
|
11535
11659
|
}
|
|
11536
11660
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i5$2.MessageService }, { token: i1.Meta }, { token: i1.Title }, { token: i8$1.MatBottomSheet }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11537
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n </div>\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\r\n <span>{{ responseData?.name | titlecase }}</span>\r\n </div>\r\n <div class=\"row h-100\" style=\"margin-top: 25px;\" class=\"above-height\"\r\n [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\r\n <div class=\"prod-img-block\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 h-100 product-detail\">\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\"\r\n [innerHTML]=\"responseData.brief\"></div>\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n <div\r\n *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n titlecase}} <ng-container\r\n *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n </a></div>\r\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n </span></div>\r\n </div>\r\n <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n <!-- <ng-container>\r\n <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n </ng-container> -->\r\n </div>\r\n </div>\r\n <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\r\n\r\n <div>\r\n <p-panel header=\"Description\" [toggleable]=\"true\" [collapsed]=\"true\" [collapsed]=\"true\">\r\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n </p-panel>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"tab-group\">\r\n <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n </div>\r\n </section>\r\n <ng-container *ngIf=\"relatedProductData?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n </ng-container>\r\n <ng-container *ngIf=\"recentViewItemList?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n </ng-container>\r\n <!-- <ng-container>\r\n <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n </ng-container> -->\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n <div class=\"icons\">\r\n <div (click)=\"goToCart()\">\r\n <mat-icon>shopping_cart</mat-icon>\r\n </div>\r\n <div>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\r\n </div>\r\n </div>\r\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n <div class=\"review-sec\">\r\n <div class=\"title\">Customer Review</div>\r\n <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n <span>Be the first to write a review</span>\r\n <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"showReview = !showReview\">{{ !showReview ? 'Add Review' : 'Cancel Review'}}</button>\r\n <ng-container *ngIf=\"showReview\">\r\n <hr />\r\n <div class=\"user-review\">\r\n <div class=\"title\">Write a review</div>\r\n <span class=\"secondary-text\">RATING</span>\r\n <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n <div>\r\n <span class=\"secondary-text\">Review Title</span>\r\n <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n </div>\r\n <div>\r\n <span class=\"secondary-text\">Review</span>\r\n <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n </div>\r\n <div class=\"review-action-btn\">\r\n <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" (click)=\"addProductReview()\"\r\n [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n review</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n <div class=\"button-parent\">\r\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"favourite\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"mb-15\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n\r\n <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\r\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span>\r\n {{responseData?.price?.value}}</div>\r\n <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n <div class=\"tax-text\">(Inclusive all taxes)</div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n <ng-container *ngIf=\"!varientLoading\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <ng-container *ngIf=\"currentImg\">\r\n\r\n <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\r\n [magnification]=\"2\" [lensHeight]=\"100\" [lensWidth]=\"100\"\r\n style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!currentImg\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n </ng-container>\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '100%',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n This content is aligned from right to left.\r\n </div>\r\n <div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div> -->\r\n", styles: [".product-desc{display:flex}.share-icon{border:1.5px solid rgba(211,211,211,.382);position:absolute;top:10px;right:10px;z-index:1;opacity:.5;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:#00000003 0 1px 2px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;max-height:460px;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px;width:155px;justify-content:space-between;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.above-height{height:90vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:min-content}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc,.brief-desc{font-size:16px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:0;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 0% 0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: i14$1.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "edit", "customClass", "delete", "nextComponentColor"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i16.SpeedDial, selector: "p-speedDial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i17.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i18.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
|
|
11661
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n\r\n <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n </div>\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\r\n <span>{{ responseData?.name | titlecase }}</span>\r\n </div>\r\n <div class=\"row h-100\" style=\"margin-top: 25px;\" class=\"above-height\"\r\n [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\r\n <div class=\"prod-img-block\">\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 h-100 product-detail\">\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\"\r\n [innerHTML]=\"responseData.brief\"></div>\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n <div\r\n *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n titlecase}} <ng-container\r\n *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n </a></div>\r\n <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n </span></div>\r\n </div>\r\n <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n <!-- <ng-container>\r\n <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n </ng-container> -->\r\n </div>\r\n </div>\r\n <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\r\n\r\n <div>\r\n <p-panel header=\"Description\" [toggleable]=\"true\" [collapsed]=\"true\" [collapsed]=\"true\">\r\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n </p-panel>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"tab-group\">\r\n <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n </div>\r\n </section>\r\n <ng-container *ngIf=\"relatedProductData?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n </ng-container>\r\n <ng-container *ngIf=\"recentViewItemList?.length\">\r\n <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n </ng-container>\r\n <!-- <ng-container>\r\n <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n </ng-container> -->\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '40vh',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n <div class=\"icons\">\r\n <div (click)=\"goToCart()\">\r\n <mat-icon>shopping_cart</mat-icon>\r\n </div>\r\n <div>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\r\n </div>\r\n </div>\r\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n <div class=\"review-sec\">\r\n <div class=\"title\">Customer Review</div>\r\n <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n <span>Be the first to write a review</span>\r\n <button class=\"mt-3\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"showReview = !showReview\">{{ !showReview ? 'Add Review' : 'Cancel Review'}}</button>\r\n <ng-container *ngIf=\"showReview\">\r\n <hr />\r\n <div class=\"user-review\">\r\n <div class=\"title\">Write a review</div>\r\n <span class=\"secondary-text\">RATING</span>\r\n <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n <div>\r\n <span class=\"secondary-text\">Review Title</span>\r\n <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n </div>\r\n <div>\r\n <span class=\"secondary-text\">Review</span>\r\n <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n </div>\r\n <div class=\"review-action-btn\">\r\n <button [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\" (click)=\"addProductReview()\"\r\n [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n review</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n <div class=\"d-flex\">\r\n <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n <div class=\"button-parent\">\r\n <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"favourite\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"mb-15\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n\r\n <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\r\n <div *ngFor=\"let varientValue of varient.value\" class=\"varient-tag\"\r\n [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span>\r\n {{responseData?.price?.value}}</div>\r\n <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n <div class=\"tax-text\">(Inclusive all taxes)</div>\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n <ng-container *ngIf=\"!varientLoading\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <ng-container *ngIf=\"currentImg\">\r\n\r\n <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\"\r\n [magnification]=\"2\" [lensHeight]=\"100\" [lensWidth]=\"100\"\r\n style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"!currentImg\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n </ng-container>\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of itemImages\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n height: '100%',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n </div>\r\n <div class=\"modal-body\">\r\n This content is aligned from right to left.\r\n </div>\r\n <div class=\"modal-footer\">\r\n <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n </div>\r\n </div>\r\n </div>\r\n</div> -->\r\n", styles: [".product-desc{display:flex}.share-icon{border:1.5px solid rgba(211,211,211,.382);position:absolute;top:10px;right:10px;z-index:1;opacity:.5;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:#00000003 0 1px 2px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;max-height:460px;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:500px;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px;width:155px;justify-content:space-between;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.above-height{height:90vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:min-content}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.product-desc,.brief-desc{font-size:16px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:0;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 0% 0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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: "component", type: i13$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: i14$1.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "edit", "customClass", "delete", "nextComponentColor"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3$1.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i16.SpeedDial, selector: "p-speedDial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i17.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i18.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "style", "styleClass", "iconPos", "expandIcon", "collapseIcon", "showHeader", "toggler", "transitionOptions"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }] }); }
|
|
11538
11662
|
}
|
|
11539
11663
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, decorators: [{
|
|
11540
11664
|
type: Component,
|