simpo-component-library 1.6.124 → 1.6.126
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/ecommerce/sections/authenticate-user/authenticate-user.component.mjs +69 -8
- package/esm2022/lib/ecommerce/sections/customer-review/customer-review.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/product-desc/product-desc.component.mjs +3 -3
- package/esm2022/lib/services/rest.service.mjs +3 -2
- package/fesm2022/simpo-component-library.mjs +74 -15
- 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/authenticate-user/authenticate-user.component.d.ts +8 -2
- package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
- package/package.json +1 -1
- package/simpo-component-library-1.6.126.tgz +0 -0
- package/simpo-component-library-1.6.121.tgz +0 -0
- package/simpo-component-library-1.6.122.tgz +0 -0
- package/simpo-component-library-1.6.124.tgz +0 -0
@@ -10,7 +10,7 @@ import { MatIconModule, MatIcon } from '@angular/material/icon';
|
|
10
10
|
import * as i3 from '@angular/material/dialog';
|
11
11
|
import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
12
12
|
import * as i8 from '@angular/forms';
|
13
|
-
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
13
|
+
import { FormsModule, Validators, ReactiveFormsModule } from '@angular/forms';
|
14
14
|
import * as i13 from 'ngx-skeleton-loader';
|
15
15
|
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
|
16
16
|
import * as i1 from '@angular/platform-browser';
|
@@ -25,6 +25,8 @@ import * as i2$2 from 'ngx-cookie-service';
|
|
25
25
|
import Swal from 'sweetalert2';
|
26
26
|
import * as i5 from '@angular/material/bottom-sheet';
|
27
27
|
import { MAT_BOTTOM_SHEET_DATA, MatBottomSheetModule } from '@angular/material/bottom-sheet';
|
28
|
+
import * as i10 from '@angular/material/form-field';
|
29
|
+
import { MatFormFieldModule } from '@angular/material/form-field';
|
28
30
|
import { MatMenuModule } from '@angular/material/menu';
|
29
31
|
import * as i3$1 from 'primeng/rating';
|
30
32
|
import { RatingModule } from 'primeng/rating';
|
@@ -33,8 +35,6 @@ import { ProgressBarModule } from 'primeng/progressbar';
|
|
33
35
|
import * as i2$4 from '@angular/material/snack-bar';
|
34
36
|
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
35
37
|
import * as mapboxgl from 'mapbox-gl';
|
36
|
-
import * as i10 from '@angular/material/form-field';
|
37
|
-
import { MatFormFieldModule } from '@angular/material/form-field';
|
38
38
|
import * as i14 from '@angular/material/input';
|
39
39
|
import { MatInputModule } from '@angular/material/input';
|
40
40
|
import * as i11 from '@angular/material/select';
|
@@ -3415,7 +3415,8 @@ class RestService {
|
|
3415
3415
|
return this.http.post(this.BASE_URL + `ecommerce/user/signup/otp/trigger`, payload);
|
3416
3416
|
}
|
3417
3417
|
verifySignupOTP(payload) {
|
3418
|
-
const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ??
|
3418
|
+
const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? '';
|
3419
|
+
// payload["businessId"] = businessId;
|
3419
3420
|
return this.http.put(this.BASE_URL + `ecommerce/user/authenticate/signup`, payload);
|
3420
3421
|
}
|
3421
3422
|
signinPassword(passData) {
|
@@ -3744,7 +3745,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
3744
3745
|
}], ctorParameters: () => [{ type: RestService }, { type: i2$3.Router }, { type: i3.MatDialogRef }, { type: StorageServiceService }, { type: i7.MessageService }] });
|
3745
3746
|
|
3746
3747
|
class AuthenticateUserComponent extends BaseSection {
|
3747
|
-
constructor(matData, bottomsheetData, restService, router, matDialog, storageService, dialogRef, bottomsheetRef, _eventService, messageService) {
|
3748
|
+
constructor(matData, bottomsheetData, restService, router, matDialog, storageService, dialogRef, bottomsheetRef, _eventService, messageService, fb) {
|
3748
3749
|
super();
|
3749
3750
|
this.matData = matData;
|
3750
3751
|
this.bottomsheetData = bottomsheetData;
|
@@ -3756,6 +3757,7 @@ class AuthenticateUserComponent extends BaseSection {
|
|
3756
3757
|
this.bottomsheetRef = bottomsheetRef;
|
3757
3758
|
this._eventService = _eventService;
|
3758
3759
|
this.messageService = messageService;
|
3760
|
+
this.fb = fb;
|
3759
3761
|
this.isLoading = false;
|
3760
3762
|
this.otpData = [, , , , ,];
|
3761
3763
|
this.otpString = "";
|
@@ -3770,10 +3772,12 @@ class AuthenticateUserComponent extends BaseSection {
|
|
3770
3772
|
this.confirmPass = null;
|
3771
3773
|
this.newPassword = null;
|
3772
3774
|
this.businessId = localStorage.getItem("bId");
|
3775
|
+
// const businessId: string = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? '';
|
3773
3776
|
this.buttonLoading = false;
|
3774
3777
|
this.login = true;
|
3775
3778
|
this.signup = false;
|
3776
3779
|
this.emailValid = true;
|
3780
|
+
this.confirm = true;
|
3777
3781
|
this.password = ' ';
|
3778
3782
|
this.PasswordHide = true;
|
3779
3783
|
this.newPasswordHide = true;
|
@@ -3823,6 +3827,19 @@ class AuthenticateUserComponent extends BaseSection {
|
|
3823
3827
|
email: '',
|
3824
3828
|
password: ''
|
3825
3829
|
};
|
3830
|
+
this.passwordValidation = this.fb.group({
|
3831
|
+
passwordValid: ['', [
|
3832
|
+
Validators.required, // Password is required
|
3833
|
+
Validators.minLength(8), // Minimum length 8 characters
|
3834
|
+
Validators.pattern(/[A-Z]/), // At least one uppercase letter
|
3835
|
+
Validators.pattern(/\d/), // At least one digit
|
3836
|
+
Validators.pattern(/[!@#$%^&*]/) // At least one special character
|
3837
|
+
]]
|
3838
|
+
});
|
3839
|
+
// this.email: new FormControl('', [Validators.required, Validators.email]),
|
3840
|
+
}
|
3841
|
+
get passwordValid() {
|
3842
|
+
return this.passwordValidation.get('passwordValid');
|
3826
3843
|
}
|
3827
3844
|
ngOnInit() {
|
3828
3845
|
if (this.matData)
|
@@ -3849,6 +3866,11 @@ class AuthenticateUserComponent extends BaseSection {
|
|
3849
3866
|
this.emailValid = false;
|
3850
3867
|
}
|
3851
3868
|
}
|
3869
|
+
isConfirmPAsswordValid(confirmpass) {
|
3870
|
+
if (confirmpass == this.payload.password) {
|
3871
|
+
this.confirm = false;
|
3872
|
+
}
|
3873
|
+
}
|
3852
3874
|
move(event, idx) {
|
3853
3875
|
if (isNaN(Number(event.key)) && event.code != "Backspace")
|
3854
3876
|
return;
|
@@ -3874,15 +3896,42 @@ class AuthenticateUserComponent extends BaseSection {
|
|
3874
3896
|
this.otpString = '';
|
3875
3897
|
this.otpData = [, , , , ,];
|
3876
3898
|
}
|
3899
|
+
// generateOTP() {
|
3900
|
+
// this.buttonLoading = true;
|
3901
|
+
// this.restService.generateOTP(this.mobile ?? "", this.countryCode ?? "").subscribe((response) => {
|
3902
|
+
// this.screen = "OTP";
|
3903
|
+
// this.buttonLoading = false;
|
3904
|
+
// this.messageService.add({ severity: 'success', summary: 'OTP Sent', detail: 'OTP sent to mobile. Valid for 3 mins', life: 10000 });
|
3905
|
+
// }, (error) => {
|
3906
|
+
// this.buttonLoading = false;
|
3907
|
+
// this.messageService.add({ severity: 'error', summary: 'OTP Request', detail: error?.error?.message, life: 10000 });
|
3908
|
+
// })
|
3909
|
+
// }
|
3877
3910
|
generateOTP() {
|
3878
3911
|
this.buttonLoading = true;
|
3879
3912
|
this.restService.generateOTP(this.mobile ?? "", this.countryCode ?? "").subscribe((response) => {
|
3880
3913
|
this.screen = "OTP";
|
3881
3914
|
this.buttonLoading = false;
|
3882
|
-
this.messageService.add({
|
3915
|
+
this.messageService.add({
|
3916
|
+
severity: 'success',
|
3917
|
+
summary: 'OTP Sent',
|
3918
|
+
detail: 'OTP sent to mobile. Valid for 3 mins',
|
3919
|
+
life: 10000
|
3920
|
+
});
|
3883
3921
|
}, (error) => {
|
3884
3922
|
this.buttonLoading = false;
|
3885
|
-
|
3923
|
+
const errorMessage = error?.error?.message;
|
3924
|
+
this.messageService.add({
|
3925
|
+
severity: 'error',
|
3926
|
+
summary: 'OTP Request',
|
3927
|
+
detail: errorMessage,
|
3928
|
+
life: 10000
|
3929
|
+
});
|
3930
|
+
// Check if the error message indicates "User not found"
|
3931
|
+
if (errorMessage === "User Not Registered, Please Signup First.") {
|
3932
|
+
this.screen = "CREATEPASSWORD";
|
3933
|
+
// Close the window or perform the desired action
|
3934
|
+
}
|
3886
3935
|
});
|
3887
3936
|
}
|
3888
3937
|
mobile_click() {
|
@@ -4043,8 +4092,12 @@ class AuthenticateUserComponent extends BaseSection {
|
|
4043
4092
|
get isMobile() {
|
4044
4093
|
return window.innerWidth <= 475;
|
4045
4094
|
}
|
4046
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticateUserComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: MAT_BOTTOM_SHEET_DATA, optional: true }, { token: RestService }, { token: i2$3.Router }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i3.MatDialogRef, optional: true }, { token: i5.MatBottomSheetRef, optional: true }, { token: EventsService }, { token: i7.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
4047
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" (click)=\"editSection()\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\r\n <ng-container [ngSwitch]=\"screen\">\r\n <section style=\"padding: 14px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n *ngSwitchCase=\"'LOGIN'\" [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n {{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n <div class=\"text-center-1\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"login\" (click)=\"openLogin()\" ><button class=\"loginButton-1\" [class.active-cls]=\"login\">Login</button></div>\r\n \r\n <div class=\"login\" (click)=\"openSignup()\" ><button class=\"loginButton-2\" [class.active-cls]=\"signup\">Signup</button></div>\r\n \r\n </div>\r\n <div class=\"mobile_email\">\r\n <button class=\"mobile\" (click)=\"mobile_click()\" [class.active-class]=\"m_clicked\">Login using OTP</button>\r\n <button class=\"mobile\" (click)=\"email_click()\" [class.active-class]=\"e_clicked\">Login using Password</button>\r\n </div>\r\n <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\" *ngIf=\"m_clicked\">\r\n <input type=\"email\" placeholder=\"E-mail\" [(ngModel)]=\"passData.email\" (ngModelChange)=\"isEmailValid(this.passData.email)\" *ngIf=\"e_clicked\">\r\n <div *ngIf=\"e_clicked\" class=\"password-input\">\r\n <input class=\"password-2\" type=\"password-2\" placeholder=\"Password\" [(ngModel)]=\"passData.password\" >\r\n <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n \r\n </div>\r\n\r\n <!-- <div class=\"password\" *ngIf=\"e_clicked\">\r\n \r\n <div class=\"field\">\r\n <input class=\"pass-field\" [(ngModel)]=\"this.passData.password\" placeholder=\"Enter password\" matInput > \r\n <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n </div>\r\n </div> -->\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"m_clicked\">You will receive an OTP in\r\n WhatsApp</p>\r\n <!-- <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"e_clicked\">You will receive an OTP in\r\n Email</p> -->\r\n\r\n <div *ngIf=\"m_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\"\r\n [disabled]=\"!isMobileValid\" *ngIf=\"!buttonLoading\">Login</button>\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n <span>OTP Sent</span>\r\n <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n </button>\r\n \r\n </div>\r\n <div *ngIf=\"e_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" \r\n *ngIf=\"!buttonLoading\" [disabled]=\"emailValid\" (click)=\"signinPassword()\">Login</button>\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n <!-- <span>Email Sent</span> -->\r\n <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n </button>\r\n <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\r\n instead</div> -->\r\n </div>\r\n \r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </section>\r\n <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n have sent via the phone number +{{ countryCode }}{{ mobile\r\n }}</p>\r\n <div class=\"otpContainer\">\r\n <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\r\n (keyup)=\"move($event, idx)\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\r\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"resendOTP()\">Resend code</div>\r\n </div>\r\n\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n </section>\r\n\r\n\r\n <section *ngSwitchCase=\"'SIGNUPOTP'\" style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n have sent via the phone number {{ countryCode }}{{ mobile\r\n }} and E-mail</p>\r\n <div class=\"otpContainer\">\r\n <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\r\n (keyup)=\"move($event, idx)\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifySignupOTP()\">Verify</button>\r\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"resendOTP()\">Resend code</div>\r\n </div>\r\n\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n </section>\r\n\r\n\r\n\r\n \r\n <section *ngSwitchCase=\"'CREATEPASSWORD'\" style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n <div>\r\n <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">CREATE AN ACCOUNT</h2>\r\n </div>\r\n <div class=\"pass-signin\">\r\n <div class=\"password\">\r\n <div class=\"label\"> Mobile Number <span class=\"required\">*</span></div>\r\n <div class=\"field\">\r\n <input class=\"countrycode\" [(ngModel)]=\"this.payload.countryCode\" placeholder=\" +91\" matInput [(ngModel)]=\"countryCode\">\r\n <input class=\"m_num\" [(ngModel)]=\"this.payload.mobile\" type=\"text\" (keypress)=\"validateNumber($event)\" matInput required #mobileCheck=\"ngModel\" onKeyPress=\"if(this.value.length==15) return false;\"\r\n pattern=\"^[6-9]\\d{9}$|^[1-9]\\d{9}$\" placeholder=\" Mobile\" matInput [(ngModel)]=\"mobilenumber\">\r\n \r\n </div>\r\n </div>\r\n <div class=\"password\">\r\n <div class=\"label\"> Email <span class=\"required\">*</span></div>\r\n <div class=\"field\">\r\n <input [(ngModel)]=\"payload.email\" class=\"pass-field\" placeholder=\"E-mail\">\r\n \r\n </div>\r\n </div>\r\n <div class=\"password\">\r\n <div class=\"label\"> New Password <span class=\"required\">*</span></div>\r\n <div class=\"field\">\r\n <input [(ngModel)]=\"this.payload.password\" class=\"pass-field\" placeholder=\"Enter New password\" matInput [(ngModel)]=\"newPassword\">\r\n <mat-icon matSuffix (click)=\"newPasswordHide = !newPasswordHide\" style=\"cursor:pointer\"\r\n class=\"eye-icon\">{{newPasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"password\">\r\n <div class=\"label\"> Confirm Password <span class=\"required\">*</span></div>\r\n <div class=\"field\">\r\n <input class=\"pass-field\" placeholder=\" Confirm password\" matInput [(ngModel)]=\"confirmPass\">\r\n <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"password-1\">\r\n <div>\r\n Already have an account?\r\n </div>\r\n <div (click)=\"openLogin()\" class=\"backToLogin\">Login</div>\r\n </div>\r\n </div>\r\n <div class=\"signin\" (click)=\"createPassword()\">\r\n <button class=\"signin-button\" *ngIf=\"this.confirmPass===this.payload.password\">Signup</button>\r\n </div>\r\n </section> \r\n </ng-container> \r\n </div>\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n \r\n\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<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\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>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.login{cursor:pointer}.login:hover{color:#0496ff}.btn:hover{background-color:#000;color:#fff!important}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media only screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:0;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}.loginButton-1{width:100%!important;border:1px solid grey;border-radius:6px 0 0 6px/6px 0px 0px 6px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-2{width:100%!important;border:1px solid grey;border-radius:0 6px 6px 0/0px 6px 6px 0px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-1:hover,.loginButton-2:hover{background-color:#0496ff;color:#fff}.text-center-1{display:flex;justify-content:center;margin:5px}.mobile{border:unset;border-radius:5px;width:42%!important;margin:unset!important;background-color:transparent;font-size:14px!important}.mobile_email{display:flex;justify-content:center}.active-cls{background-color:#0496ff;color:#fff}.active-class{color:#0496ff}.field{display:flex;width:100%;gap:2%;align-items:center}.password{display:flex;flex-direction:column;width:50%}.backToLogin{cursor:pointer}.backToLogin:hover{color:#0496ff}.password-2{display:flex;flex-direction:column;width:80%;margin-left:10%!important;margin-right:13px!important}.password-input{display:flex;align-items:center}.pass-field{margin:unset}.password-1{display:flex;gap:10px}.password{justify-content:start!important;display:flex;flex-direction:column;width:100%;align-items:center}.label{width:100%}.signin{display:flex;justify-content:center;margin-right:16px}.signin-button{width:25%!important;border:1px solid;border-radius:5px}.pass-signin{display:flex;flex-direction:column;gap:20px;margin-left:56px;margin-top:10px}.countrycode{width:20%!important;margin:unset}.m_num{width:58%!important;margin:unset}\n"], dependencies: [{ 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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { 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.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { 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: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
|
4095
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticateUserComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: MAT_BOTTOM_SHEET_DATA, optional: true }, { token: RestService }, { token: i2$3.Router }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i3.MatDialogRef, optional: true }, { token: i5.MatBottomSheetRef, optional: true }, { token: EventsService }, { token: i7.MessageService }, { token: i8.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
4096
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" (click)=\"editSection()\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\r\n <ng-container [ngSwitch]=\"screen\">\r\n <section style=\"padding: 14px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n *ngSwitchCase=\"'LOGIN'\" [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n {{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n <div class=\"text-center-1\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"login\" (click)=\"openLogin()\" ><button class=\"loginButton-1\" [class.active-cls]=\"login\">Login</button></div>\r\n \r\n <div class=\"login\" (click)=\"openSignup()\" ><button class=\"loginButton-2\" [class.active-cls]=\"signup\">Signup</button></div>\r\n \r\n </div>\r\n <div class=\"mobile_email\">\r\n <button class=\"mobile\" (click)=\"mobile_click()\" [class.active-class]=\"m_clicked\">Login using OTP</button>\r\n <button class=\"mobile\" (click)=\"email_click()\" [class.active-class]=\"e_clicked\">Login using Password</button>\r\n </div>\r\n <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\" *ngIf=\"m_clicked\">\r\n <input type=\"email\" placeholder=\"E-mail\" [(ngModel)]=\"passData.email\" (ngModelChange)=\"isEmailValid(passData.email)\" *ngIf=\"e_clicked\">\r\n \r\n <form [formGroup]=\"passwordValidation\">\r\n <div *ngIf=\"e_clicked\" class=\"password-input\">\r\n <input class=\"password-2\" type=\"password-2\" placeholder=\"Password\" [(ngModel)]=\"passData.password\" formControlName=\"passwordValid\" >\r\n <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n \r\n </div>\r\n \r\n\r\n <!-- <div class=\"password\" *ngIf=\"e_clicked\">\r\n \r\n <div class=\"field\">\r\n <input class=\"pass-field\" [(ngModel)]=\"this.passData.password\" placeholder=\"Enter password\" matInput > \r\n <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n </div>\r\n </div> -->\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"m_clicked\">You will receive an OTP in\r\n WhatsApp</p>\r\n <!-- <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"e_clicked\">You will receive an OTP in\r\n Email</p> -->\r\n\r\n <div *ngIf=\"m_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\"\r\n [disabled]=\"!isMobileValid\" *ngIf=\"!buttonLoading\">Login</button>\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n <span>OTP Sent</span>\r\n <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n </button>\r\n \r\n </div>\r\n <div *ngIf=\"e_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" \r\n *ngIf=\"!buttonLoading\" [disabled]=\"emailValid || passwordValidation.invalid\" (click)=\"signinPassword()\">Login</button>\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n <!-- <span>Email Sent</span> -->\r\n <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n </button>\r\n <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\r\n instead</div> -->\r\n </div>\r\n </form>\r\n \r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </section>\r\n <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n have sent via the phone number +{{ countryCode }}{{ mobile\r\n }}</p>\r\n <div class=\"otpContainer\">\r\n <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\r\n (keyup)=\"move($event, idx)\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\r\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"resendOTP()\">Resend code</div>\r\n </div>\r\n\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n </section>\r\n\r\n\r\n <section *ngSwitchCase=\"'SIGNUPOTP'\" style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n have sent via the phone number {{ countryCode }}{{ mobile\r\n }} and E-mail</p>\r\n <div class=\"otpContainer\">\r\n <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\r\n (keyup)=\"move($event, idx)\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifySignupOTP()\">Verify</button>\r\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"resendOTP()\">Resend code</div>\r\n </div>\r\n\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n </section>\r\n\r\n\r\n\r\n \r\n <section *ngSwitchCase=\"'CREATEPASSWORD'\" style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n [ngClass]=\"{'fullSection': isMobile}\">\r\n \r\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n <div>\r\n <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">CREATE AN ACCOUNT</h2>\r\n </div>\r\n <div class=\"pass-signin\">\r\n <div class=\"password\">\r\n <div class=\"label\"> Mobile Number <span class=\"required\">*</span></div>\r\n <div class=\"field\">\r\n <input class=\"countrycode\" [(ngModel)]=\"this.payload.countryCode\" placeholder=\" +91\" matInput [(ngModel)]=\"countryCode\">\r\n <input class=\"m_num\" [(ngModel)]=\"this.payload.mobile\" type=\"text\" (keypress)=\"validateNumber($event)\" matInput required #mobileCheck=\"ngModel\" onKeyPress=\"if(this.value.length==15) return false;\"\r\n pattern=\"^[6-9]\\d{9}$|^[1-9]\\d{9}$\" placeholder=\" Mobile\" matInput [(ngModel)]=\"mobilenumber\">\r\n \r\n </div>\r\n </div>\r\n \r\n <div class=\"password\">\r\n <div class=\"label\"> Email <span class=\"required\">*</span></div>\r\n <div class=\"field\">\r\n <input type=\"email\" [(ngModel)]=\"payload.email\" class=\"pass-field\" placeholder=\"E-mail\" (ngModelChange)=\"isEmailValid(payload.email)\">\r\n \r\n </div>\r\n </div>\r\n <form [formGroup]=\"passwordValidation\">\r\n <div class=\"password\">\r\n <div class=\"label\"> New Password <span class=\"required\">*</span></div>\r\n <div class=\"field\">\r\n <input [(ngModel)]=\"this.payload.password\" class=\"pass-field\" placeholder=\"Enter New password\" matInput [(ngModel)]=\"newPassword\" formControlName=\"passwordValid\">\r\n <mat-icon matSuffix (click)=\"newPasswordHide = !newPasswordHide\" style=\"cursor:pointer\"\r\n class=\"eye-icon\">{{newPasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"password\">\r\n <div class=\"label\"> Confirm Password <span class=\"required\">*</span></div>\r\n <div class=\"field\">\r\n <input class=\"pass-field\" placeholder=\" Confirm password\" matInput [(ngModel)]=\"confirmPass\" (ngModelChange)=\"isConfirmPAsswordValid(confirmPass)\">\r\n <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n </div>\r\n </div>\r\n \r\n <div class=\"password-1\">\r\n <div>\r\n Already have an account?\r\n </div>\r\n <div (click)=\"openLogin()\" class=\"backToLogin\">Login</div>\r\n </div>\r\n </div>\r\n <div class=\"signin\" (click)=\"createPassword()\">\r\n <button class=\"signin-button\" [disabled]=\"passwordValidation.invalid || confirm || emailValid\" >Signup</button>\r\n </div>\r\n \r\n </section> \r\n </ng-container> \r\n </div>\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n \r\n\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<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\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>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.login{cursor:pointer}.login:hover{color:#0496ff}.btn:hover{background-color:#000;color:#fff!important}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media only screen and (max-width: 475px){.onlyDesktop{display:none}.pass-field{width:92%}.pass-signin{margin-left:0!important;margin-top:0!important;gap:15px}.m_num{width:70%}.text-center{text-align:center!important;font-size:26px;font-weight:500}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:80%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:6px;width:95%;right:-2px}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}.loginButton-1{width:100%!important;border:1px solid grey;border-radius:6px 0 0 6px/6px 0px 0px 6px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-2{width:100%!important;border:1px solid grey;border-radius:0 6px 6px 0/0px 6px 6px 0px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-1:hover,.loginButton-2:hover{background-color:#0496ff;color:#fff}.text-center-1{display:flex;justify-content:center;margin:5px}.mobile{border:unset;border-radius:5px;width:48%!important;margin:unset!important;background-color:transparent;font-size:14px!important}.mobile_email{display:flex;justify-content:center}.active-cls{background-color:#0496ff;color:#fff}.active-class{color:#0496ff}.field{display:flex;width:100%;gap:2%;align-items:center}.password{display:flex;flex-direction:column;width:50%}.backToLogin{cursor:pointer}.backToLogin:hover{color:#0496ff}.password-2{display:flex;flex-direction:column;width:80%;margin-left:10%!important;margin-right:13px!important}.password-input{display:flex;align-items:center}.pass-field{margin:unset}.password-1{display:flex;gap:10px}.password{justify-content:start!important;display:flex;flex-direction:column;width:100%;align-items:center}.label{width:100%}.signin{display:flex;justify-content:center;margin-right:16px}.signin-button{width:25%!important;border:1px solid;border-radius:5px}.pass-signin{display:flex;flex-direction:column;gap:20px;margin-left:56px;margin-top:10px}.countrycode{width:20%!important;margin:unset}.m_num{width:58%!important;margin:unset}\n"], dependencies: [{ 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.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.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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { 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.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { 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: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "directive", type: i10.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type:
|
4097
|
+
// FormGroup,
|
4098
|
+
// FormBuilder,
|
4099
|
+
// Validators,
|
4100
|
+
ReactiveFormsModule }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
4048
4101
|
}
|
4049
4102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticateUserComponent, decorators: [{
|
4050
4103
|
type: Component,
|
@@ -4057,7 +4110,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
4057
4110
|
ButtonDirectiveDirective,
|
4058
4111
|
ToastModule,
|
4059
4112
|
HoverDirective,
|
4060
|
-
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" (click)=\"editSection()\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\r\n <ng-container [ngSwitch]=\"screen\">\r\n <section style=\"padding: 14px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n *ngSwitchCase=\"'LOGIN'\" [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n {{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n <div class=\"text-center-1\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"login\" (click)=\"openLogin()\" ><button class=\"loginButton-1\" [class.active-cls]=\"login\">Login</button></div>\r\n \r\n <div class=\"login\" (click)=\"openSignup()\" ><button class=\"loginButton-2\" [class.active-cls]=\"signup\">Signup</button></div>\r\n \r\n </div>\r\n <div class=\"mobile_email\">\r\n <button class=\"mobile\" (click)=\"mobile_click()\" [class.active-class]=\"m_clicked\">Login using OTP</button>\r\n <button class=\"mobile\" (click)=\"email_click()\" [class.active-class]=\"e_clicked\">Login using Password</button>\r\n </div>\r\n <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\" *ngIf=\"m_clicked\">\r\n <input type=\"email\" placeholder=\"E-mail\" [(ngModel)]=\"passData.email\" (ngModelChange)=\"isEmailValid(this.passData.email)\" *ngIf=\"e_clicked\">\r\n <div *ngIf=\"e_clicked\" class=\"password-input\">\r\n <input class=\"password-2\" type=\"password-2\" placeholder=\"Password\" [(ngModel)]=\"passData.password\" >\r\n <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n \r\n </div>\r\n\r\n <!-- <div class=\"password\" *ngIf=\"e_clicked\">\r\n \r\n <div class=\"field\">\r\n <input class=\"pass-field\" [(ngModel)]=\"this.passData.password\" placeholder=\"Enter password\" matInput > \r\n <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n </div>\r\n </div> -->\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"m_clicked\">You will receive an OTP in\r\n WhatsApp</p>\r\n <!-- <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"e_clicked\">You will receive an OTP in\r\n Email</p> -->\r\n\r\n <div *ngIf=\"m_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\"\r\n [disabled]=\"!isMobileValid\" *ngIf=\"!buttonLoading\">Login</button>\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n <span>OTP Sent</span>\r\n <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n </button>\r\n \r\n </div>\r\n <div *ngIf=\"e_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" \r\n *ngIf=\"!buttonLoading\" [disabled]=\"emailValid\" (click)=\"signinPassword()\">Login</button>\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n <!-- <span>Email Sent</span> -->\r\n <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n </button>\r\n <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\r\n instead</div> -->\r\n </div>\r\n \r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </section>\r\n <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n have sent via the phone number +{{ countryCode }}{{ mobile\r\n }}</p>\r\n <div class=\"otpContainer\">\r\n <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\r\n (keyup)=\"move($event, idx)\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\r\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"resendOTP()\">Resend code</div>\r\n </div>\r\n\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n </section>\r\n\r\n\r\n <section *ngSwitchCase=\"'SIGNUPOTP'\" style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n have sent via the phone number {{ countryCode }}{{ mobile\r\n }} and E-mail</p>\r\n <div class=\"otpContainer\">\r\n <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\r\n (keyup)=\"move($event, idx)\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifySignupOTP()\">Verify</button>\r\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"resendOTP()\">Resend code</div>\r\n </div>\r\n\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n </section>\r\n\r\n\r\n\r\n \r\n <section *ngSwitchCase=\"'CREATEPASSWORD'\" style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n <div>\r\n <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">CREATE AN ACCOUNT</h2>\r\n </div>\r\n <div class=\"pass-signin\">\r\n <div class=\"password\">\r\n <div class=\"label\"> Mobile Number <span class=\"required\">*</span></div>\r\n <div class=\"field\">\r\n <input class=\"countrycode\" [(ngModel)]=\"this.payload.countryCode\" placeholder=\" +91\" matInput [(ngModel)]=\"countryCode\">\r\n <input class=\"m_num\" [(ngModel)]=\"this.payload.mobile\" type=\"text\" (keypress)=\"validateNumber($event)\" matInput required #mobileCheck=\"ngModel\" onKeyPress=\"if(this.value.length==15) return false;\"\r\n pattern=\"^[6-9]\\d{9}$|^[1-9]\\d{9}$\" placeholder=\" Mobile\" matInput [(ngModel)]=\"mobilenumber\">\r\n \r\n </div>\r\n </div>\r\n <div class=\"password\">\r\n <div class=\"label\"> Email <span class=\"required\">*</span></div>\r\n <div class=\"field\">\r\n <input [(ngModel)]=\"payload.email\" class=\"pass-field\" placeholder=\"E-mail\">\r\n \r\n </div>\r\n </div>\r\n <div class=\"password\">\r\n <div class=\"label\"> New Password <span class=\"required\">*</span></div>\r\n <div class=\"field\">\r\n <input [(ngModel)]=\"this.payload.password\" class=\"pass-field\" placeholder=\"Enter New password\" matInput [(ngModel)]=\"newPassword\">\r\n <mat-icon matSuffix (click)=\"newPasswordHide = !newPasswordHide\" style=\"cursor:pointer\"\r\n class=\"eye-icon\">{{newPasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"password\">\r\n <div class=\"label\"> Confirm Password <span class=\"required\">*</span></div>\r\n <div class=\"field\">\r\n <input class=\"pass-field\" placeholder=\" Confirm password\" matInput [(ngModel)]=\"confirmPass\">\r\n <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"password-1\">\r\n <div>\r\n Already have an account?\r\n </div>\r\n <div (click)=\"openLogin()\" class=\"backToLogin\">Login</div>\r\n </div>\r\n </div>\r\n <div class=\"signin\" (click)=\"createPassword()\">\r\n <button class=\"signin-button\" *ngIf=\"this.confirmPass===this.payload.password\">Signup</button>\r\n </div>\r\n </section> \r\n </ng-container> \r\n </div>\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n \r\n\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<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\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>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.login{cursor:pointer}.login:hover{color:#0496ff}.btn:hover{background-color:#000;color:#fff!important}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media only screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:0;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}.loginButton-1{width:100%!important;border:1px solid grey;border-radius:6px 0 0 6px/6px 0px 0px 6px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-2{width:100%!important;border:1px solid grey;border-radius:0 6px 6px 0/0px 6px 6px 0px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-1:hover,.loginButton-2:hover{background-color:#0496ff;color:#fff}.text-center-1{display:flex;justify-content:center;margin:5px}.mobile{border:unset;border-radius:5px;width:42%!important;margin:unset!important;background-color:transparent;font-size:14px!important}.mobile_email{display:flex;justify-content:center}.active-cls{background-color:#0496ff;color:#fff}.active-class{color:#0496ff}.field{display:flex;width:100%;gap:2%;align-items:center}.password{display:flex;flex-direction:column;width:50%}.backToLogin{cursor:pointer}.backToLogin:hover{color:#0496ff}.password-2{display:flex;flex-direction:column;width:80%;margin-left:10%!important;margin-right:13px!important}.password-input{display:flex;align-items:center}.pass-field{margin:unset}.password-1{display:flex;gap:10px}.password{justify-content:start!important;display:flex;flex-direction:column;width:100%;align-items:center}.label{width:100%}.signin{display:flex;justify-content:center;margin-right:16px}.signin-button{width:25%!important;border:1px solid;border-radius:5px}.pass-signin{display:flex;flex-direction:column;gap:20px;margin-left:56px;margin-top:10px}.countrycode{width:20%!important;margin:unset}.m_num{width:58%!important;margin:unset}\n"] }]
|
4113
|
+
FormsModule,
|
4114
|
+
MatFormFieldModule,
|
4115
|
+
// FormGroup,
|
4116
|
+
// FormBuilder,
|
4117
|
+
// Validators,
|
4118
|
+
ReactiveFormsModule,
|
4119
|
+
], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <div [style.height.vh]=\"isMobile ? '40' : ''\" [id]=\"data?.id\" (click)=\"editSection()\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [attr.style]=\"customClass\">\r\n <ng-container [ngSwitch]=\"screen\">\r\n <section style=\"padding: 14px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n *ngSwitchCase=\"'LOGIN'\" [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n {{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Welcome</h2>\r\n <div class=\"text-center-1\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"login\" (click)=\"openLogin()\" ><button class=\"loginButton-1\" [class.active-cls]=\"login\">Login</button></div>\r\n \r\n <div class=\"login\" (click)=\"openSignup()\" ><button class=\"loginButton-2\" [class.active-cls]=\"signup\">Signup</button></div>\r\n \r\n </div>\r\n <div class=\"mobile_email\">\r\n <button class=\"mobile\" (click)=\"mobile_click()\" [class.active-class]=\"m_clicked\">Login using OTP</button>\r\n <button class=\"mobile\" (click)=\"email_click()\" [class.active-class]=\"e_clicked\">Login using Password</button>\r\n </div>\r\n <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\" *ngIf=\"m_clicked\">\r\n <input type=\"email\" placeholder=\"E-mail\" [(ngModel)]=\"passData.email\" (ngModelChange)=\"isEmailValid(passData.email)\" *ngIf=\"e_clicked\">\r\n \r\n <form [formGroup]=\"passwordValidation\">\r\n <div *ngIf=\"e_clicked\" class=\"password-input\">\r\n <input class=\"password-2\" type=\"password-2\" placeholder=\"Password\" [(ngModel)]=\"passData.password\" formControlName=\"passwordValid\" >\r\n <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n \r\n </div>\r\n \r\n\r\n <!-- <div class=\"password\" *ngIf=\"e_clicked\">\r\n \r\n <div class=\"field\">\r\n <input class=\"pass-field\" [(ngModel)]=\"this.passData.password\" placeholder=\"Enter password\" matInput > \r\n <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n </div>\r\n </div> -->\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"m_clicked\">You will receive an OTP in\r\n WhatsApp</p>\r\n <!-- <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"e_clicked\">You will receive an OTP in\r\n Email</p> -->\r\n\r\n <div *ngIf=\"m_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"generateOTP()\"\r\n [disabled]=\"!isMobileValid\" *ngIf=\"!buttonLoading\">Login</button>\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n <span>OTP Sent</span>\r\n <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n </button>\r\n \r\n </div>\r\n <div *ngIf=\"e_clicked\" class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" \r\n *ngIf=\"!buttonLoading\" [disabled]=\"emailValid || passwordValidation.invalid\" (click)=\"signinPassword()\">Login</button>\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" *ngIf=\"buttonLoading\">\r\n <!-- <span>Email Sent</span> -->\r\n <img src=\"https://i.imghippo.com/files/3ScyK1726294453.gif\" alt=\"\" style=\"height: 35px;\">\r\n </button>\r\n <!-- <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Use email\r\n instead</div> -->\r\n </div>\r\n </form>\r\n \r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </section>\r\n <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n have sent via the phone number +{{ countryCode }}{{ mobile\r\n }}</p>\r\n <div class=\"otpContainer\">\r\n <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\r\n (keyup)=\"move($event, idx)\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifyOTP()\">Verify</button>\r\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"resendOTP()\">Resend code</div>\r\n </div>\r\n\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n </section>\r\n\r\n\r\n <section *ngSwitchCase=\"'SIGNUPOTP'\" style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">Verify OTP</h2>\r\n <p class=\"text-center\" [style.color]=\"data?.styles?.background?.accentColor\">Enter the 6-digit that we\r\n have sent via the phone number {{ countryCode }}{{ mobile\r\n }} and E-mail</p>\r\n <div class=\"otpContainer\">\r\n <ng-container *ngFor=\"let _ of [].constructor(6); let idx = index\">\r\n <input type=\"number\" class=\"otp\" max=\"1\" [id]=\"'otp_'+idx\" [(ngModel)]=\"otpData[idx]\"\r\n (keyup)=\"move($event, idx)\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"verifySignupOTP()\">Verify</button>\r\n <div class=\"alternate-opt text-center\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"resendOTP()\">Resend code</div>\r\n </div>\r\n\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n </section>\r\n\r\n\r\n\r\n \r\n <section *ngSwitchCase=\"'CREATEPASSWORD'\" style=\"padding: 15px;\"\r\n class=\"d-flex flex-column align-item-center justify-content-center position-relative h-100\"\r\n [ngClass]=\"{'fullSection': isMobile}\">\r\n \r\n <h5 class=\"text-center onlyDesktop\">{{data?.content?.siteName?.value}}</h5>\r\n <div>\r\n <h2 class=\"text-center\" [style.borderColor]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">CREATE AN ACCOUNT</h2>\r\n </div>\r\n <div class=\"pass-signin\">\r\n <div class=\"password\">\r\n <div class=\"label\"> Mobile Number <span class=\"required\">*</span></div>\r\n <div class=\"field\">\r\n <input class=\"countrycode\" [(ngModel)]=\"this.payload.countryCode\" placeholder=\" +91\" matInput [(ngModel)]=\"countryCode\">\r\n <input class=\"m_num\" [(ngModel)]=\"this.payload.mobile\" type=\"text\" (keypress)=\"validateNumber($event)\" matInput required #mobileCheck=\"ngModel\" onKeyPress=\"if(this.value.length==15) return false;\"\r\n pattern=\"^[6-9]\\d{9}$|^[1-9]\\d{9}$\" placeholder=\" Mobile\" matInput [(ngModel)]=\"mobilenumber\">\r\n \r\n </div>\r\n </div>\r\n \r\n <div class=\"password\">\r\n <div class=\"label\"> Email <span class=\"required\">*</span></div>\r\n <div class=\"field\">\r\n <input type=\"email\" [(ngModel)]=\"payload.email\" class=\"pass-field\" placeholder=\"E-mail\" (ngModelChange)=\"isEmailValid(payload.email)\">\r\n \r\n </div>\r\n </div>\r\n <form [formGroup]=\"passwordValidation\">\r\n <div class=\"password\">\r\n <div class=\"label\"> New Password <span class=\"required\">*</span></div>\r\n <div class=\"field\">\r\n <input [(ngModel)]=\"this.payload.password\" class=\"pass-field\" placeholder=\"Enter New password\" matInput [(ngModel)]=\"newPassword\" formControlName=\"passwordValid\">\r\n <mat-icon matSuffix (click)=\"newPasswordHide = !newPasswordHide\" style=\"cursor:pointer\"\r\n class=\"eye-icon\">{{newPasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"password\">\r\n <div class=\"label\"> Confirm Password <span class=\"required\">*</span></div>\r\n <div class=\"field\">\r\n <input class=\"pass-field\" placeholder=\" Confirm password\" matInput [(ngModel)]=\"confirmPass\" (ngModelChange)=\"isConfirmPAsswordValid(confirmPass)\">\r\n <mat-icon matSuffix (click)=\"PasswordHide = !PasswordHide\" style=\"cursor:pointer\"\r\n class=\"eye-icon\">{{PasswordHide ? 'visibility_off' : 'visibility'}}</mat-icon>\r\n </div>\r\n </div>\r\n \r\n <div class=\"password-1\">\r\n <div>\r\n Already have an account?\r\n </div>\r\n <div (click)=\"openLogin()\" class=\"backToLogin\">Login</div>\r\n </div>\r\n </div>\r\n <div class=\"signin\" (click)=\"createPassword()\">\r\n <button class=\"signin-button\" [disabled]=\"passwordValidation.invalid || confirm || emailValid\" >Signup</button>\r\n </div>\r\n \r\n </section> \r\n </ng-container> \r\n </div>\r\n <div class=\"close-btn onlyDesktop\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n <div class=\"back-btn onlyDesktop\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n \r\n\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<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\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>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}button:disabled{background-color:#d3d3d3!important}.btn{border:1.5px solid transparent}.login{cursor:pointer}.login:hover{color:#0496ff}.btn:hover{background-color:#000;color:#fff!important}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}@media only screen and (max-width: 475px){.onlyDesktop{display:none}.pass-field{width:92%}.pass-signin{margin-left:0!important;margin-top:0!important;gap:15px}.m_num{width:70%}.text-center{text-align:center!important;font-size:26px;font-weight:500}.verify-otp{text-align:left!important;margin-top:8%}.otpContainer{width:100vw;margin-left:-20px;right:10px;justify-content:space-between;padding:0 5px!important}.otpContainer .otp{height:45px!important;width:45px!important;margin:0!important}button,input{width:80%!important}.fullSection{justify-content:start!important}.action-btn{position:relative;bottom:6px;width:95%;right:-2px}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}.loginButton-1{width:100%!important;border:1px solid grey;border-radius:6px 0 0 6px/6px 0px 0px 6px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-2{width:100%!important;border:1px solid grey;border-radius:0 6px 6px 0/0px 6px 6px 0px;font-size:18px!important;font-weight:100;background-color:transparent;padding:1px 20px}.loginButton-1:hover,.loginButton-2:hover{background-color:#0496ff;color:#fff}.text-center-1{display:flex;justify-content:center;margin:5px}.mobile{border:unset;border-radius:5px;width:48%!important;margin:unset!important;background-color:transparent;font-size:14px!important}.mobile_email{display:flex;justify-content:center}.active-cls{background-color:#0496ff;color:#fff}.active-class{color:#0496ff}.field{display:flex;width:100%;gap:2%;align-items:center}.password{display:flex;flex-direction:column;width:50%}.backToLogin{cursor:pointer}.backToLogin:hover{color:#0496ff}.password-2{display:flex;flex-direction:column;width:80%;margin-left:10%!important;margin-right:13px!important}.password-input{display:flex;align-items:center}.pass-field{margin:unset}.password-1{display:flex;gap:10px}.password{justify-content:start!important;display:flex;flex-direction:column;width:100%;align-items:center}.label{width:100%}.signin{display:flex;justify-content:center;margin-right:16px}.signin-button{width:25%!important;border:1px solid;border-radius:5px}.pass-signin{display:flex;flex-direction:column;gap:20px;margin-left:56px;margin-top:10px}.countrycode{width:20%!important;margin:unset}.m_num{width:58%!important;margin:unset}\n"] }]
|
4061
4120
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
4062
4121
|
type: Optional
|
4063
4122
|
}, {
|
@@ -4072,7 +4131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
4072
4131
|
type: Optional
|
4073
4132
|
}] }, { type: i5.MatBottomSheetRef, decorators: [{
|
4074
4133
|
type: Optional
|
4075
|
-
}] }, { type: EventsService }, { type: i7.MessageService }], propDecorators: { data: [{
|
4134
|
+
}] }, { type: EventsService }, { type: i7.MessageService }, { type: i8.FormBuilder }], propDecorators: { data: [{
|
4076
4135
|
type: Input
|
4077
4136
|
}], index: [{
|
4078
4137
|
type: Input
|
@@ -4453,7 +4512,7 @@ class CustomerReviewComponent {
|
|
4453
4512
|
return (value / this.customerReviews?.length) * 100;
|
4454
4513
|
}
|
4455
4514
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CustomerReviewComponent, deps: [{ token: i2$3.ActivatedRoute }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
|
4456
|
-
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" }, ngImport: i0, template: "<section class=\"mainContainer\" style=\"gap: 20px;\">\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\">\r\n <img loading=\"lazy\" alt=\"\" style=\"height: 30px; width: fit-content;border-radius: 50%;margin-right: 10px;\">\r\n <span>{{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 </ng-container>\r\n </div>\r\n </div>\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%}.customer-reviews{border-bottom:1px solid lightgray;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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i6.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }] }); }
|
4515
|
+
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" }, 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\">\r\n <img loading=\"lazy\" alt=\"\" style=\"height: 30px; width: fit-content;border-radius: 50%;margin-right: 10px;\">\r\n <span>{{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 </ng-container>\r\n </div>\r\n </div>\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%}.customer-reviews{border-bottom:1px solid lightgray;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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: ProgressBarModule }, { kind: "component", type: i6.ProgressBar, selector: "p-progressBar", inputs: ["value", "showValue", "styleClass", "style", "unit", "mode", "color"] }] }); }
|
4457
4516
|
}
|
4458
4517
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CustomerReviewComponent, decorators: [{
|
4459
4518
|
type: Component,
|
@@ -4462,7 +4521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
4462
4521
|
FormsModule,
|
4463
4522
|
CommonModule,
|
4464
4523
|
ProgressBarModule
|
4465
|
-
], template: "<section class=\"mainContainer\" style=\"gap: 20px;\">\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\">\r\n <img loading=\"lazy\" alt=\"\" style=\"height: 30px; width: fit-content;border-radius: 50%;margin-right: 10px;\">\r\n <span>{{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 </ng-container>\r\n </div>\r\n </div>\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%}.customer-reviews{border-bottom:1px solid lightgray;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"] }]
|
4524
|
+
], 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\">\r\n <img loading=\"lazy\" alt=\"\" style=\"height: 30px; width: fit-content;border-radius: 50%;margin-right: 10px;\">\r\n <span>{{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 </ng-container>\r\n </div>\r\n </div>\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%}.customer-reviews{border-bottom:1px solid lightgray;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"] }]
|
4466
4525
|
}], ctorParameters: () => [{ type: i2$3.ActivatedRoute }, { type: RestService }], propDecorators: { data: [{
|
4467
4526
|
type: Input
|
4468
4527
|
}], index: [{
|
@@ -8144,7 +8203,7 @@ class ProductDescComponent extends BaseSection {
|
|
8144
8203
|
return window.innerWidth <= 475;
|
8145
8204
|
}
|
8146
8205
|
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$3.Router }, { token: i2$3.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i7.MessageService }, { token: i1.Meta }, { token: i1.Title }, { token: i5.MatBottomSheet }], target: i0.ɵɵFactoryTarget.Component }); }
|
8147
|
-
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" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], 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\" (click)=\"editSection()\">\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\" [style.height.vh]=\"!isMobile ? 100 : ''\">\r\n <div><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\" [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 *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 *ngFor=\"let varient of varients | keyvalue\">\r\n <div>\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\"\r\n 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\r\n <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\r\n (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 *ngIf=\"responseData?.rating == 0\">\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 <div class=\"tab-group\">\r\n <div class=\"tab\">Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large\" *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 <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\" (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\" [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()\" [disabled]=\"productReview == 0 || reviewTitle?.length == 0 || reviewDescription?.length == 0\">Submit 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\" [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<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?.discountedPrice}}</div>\r\n <div class=\"tax-text\">(excluding 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'\" [magnification]=\"2\"\r\n [lensHeight]=\"100\" [lensWidth]=\"100\" 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 </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> -->", 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:100%;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}.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}.mobile-footer{display:none}@media (min-width: 1024px){.height{height:min-content;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}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{height:25%;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{height:100%;width:100%}.above-height{padding:0 20px}.product-heading{font-size:25px}}.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{height:min-content;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}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.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.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"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { 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: "component", type: CustomerReviewComponent, selector: "simpo-customer-review", inputs: ["data", "index", "edit", "delete"] }] }); }
|
8206
|
+
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" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], 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\" (click)=\"editSection()\">\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\" [style.height.vh]=\"!isMobile ? 100 : ''\">\r\n <div><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\" [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 *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 *ngFor=\"let varient of varients | keyvalue\">\r\n <div>\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\"\r\n 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\r\n <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\r\n (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 <div class=\"tab-group\">\r\n <div class=\"tab\">Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large\" *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 <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\" (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\" [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()\" [disabled]=\"productReview == 0 || reviewTitle?.length == 0 || reviewDescription?.length == 0\">Submit 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\" [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<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?.discountedPrice}}</div>\r\n <div class=\"tax-text\">(excluding 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'\" [magnification]=\"2\"\r\n [lensHeight]=\"100\" [lensWidth]=\"100\" 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 </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> -->", 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:100%;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}.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{height:min-content;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}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{height:25%;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{height:100%;width:100%}.above-height{padding:0 20px}.product-heading{font-size:25px}}.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{height:min-content;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}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.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.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"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { 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: "component", type: CustomerReviewComponent, selector: "simpo-customer-review", inputs: ["data", "index", "edit", "delete"] }] }); }
|
8148
8207
|
}
|
8149
8208
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, decorators: [{
|
8150
8209
|
type: Component,
|
@@ -8169,7 +8228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
|
|
8169
8228
|
SpeedDialModule,
|
8170
8229
|
ToastModule,
|
8171
8230
|
CustomerReviewComponent
|
8172
|
-
], providers: [MessageService], 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\" (click)=\"editSection()\">\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\" [style.height.vh]=\"!isMobile ? 100 : ''\">\r\n <div><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\" [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 *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 *ngFor=\"let varient of varients | keyvalue\">\r\n <div>\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\"\r\n 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\r\n <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\r\n (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 *ngIf=\"responseData?.rating == 0\">\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 <div class=\"tab-group\">\r\n <div class=\"tab\">Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large\" *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 <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\" (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\" [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()\" [disabled]=\"productReview == 0 || reviewTitle?.length == 0 || reviewDescription?.length == 0\">Submit 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\" [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<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?.discountedPrice}}</div>\r\n <div class=\"tax-text\">(excluding 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'\" [magnification]=\"2\"\r\n [lensHeight]=\"100\" [lensWidth]=\"100\" 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 </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> -->", 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:100%;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}.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}.mobile-footer{display:none}@media (min-width: 1024px){.height{height:min-content;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}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{height:25%;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{height:100%;width:100%}.above-height{padding:0 20px}.product-heading{font-size:25px}}.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{height:min-content;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}}\n"] }]
|
8231
|
+
], providers: [MessageService], 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\" (click)=\"editSection()\">\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\" [style.height.vh]=\"!isMobile ? 100 : ''\">\r\n <div><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\" [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 *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 *ngFor=\"let varient of varients | keyvalue\">\r\n <div>\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\"\r\n 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\r\n <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\r\n (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 <div class=\"tab-group\">\r\n <div class=\"tab\">Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large\" *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 <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\" (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\" [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()\" [disabled]=\"productReview == 0 || reviewTitle?.length == 0 || reviewDescription?.length == 0\">Submit 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\" [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<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?.discountedPrice}}</div>\r\n <div class=\"tax-text\">(excluding 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'\" [magnification]=\"2\"\r\n [lensHeight]=\"100\" [lensWidth]=\"100\" 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 </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> -->", 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:100%;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}.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{height:min-content;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}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{height:25%;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{height:100%;width:100%}.above-height{padding:0 20px}.product-heading{font-size:25px}}.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{height:min-content;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}}\n"] }]
|
8173
8232
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
8174
8233
|
type: Inject,
|
8175
8234
|
args: [PLATFORM_ID]
|