simpo-component-library 1.6.103 → 1.6.104

Sign up to get free protection for your applications and to get access to all the features.
Files changed (16) hide show
  1. package/esm2022/lib/ecommerce/sections/cart/cart.component.mjs +71 -10
  2. package/esm2022/lib/ecommerce/sections/customer-review/customer-review.component.mjs +1 -1
  3. package/esm2022/lib/ecommerce/sections/product-desc/product-desc.component.mjs +6 -4
  4. package/esm2022/lib/services/rest.service.mjs +7 -1
  5. package/fesm2022/simpo-component-library.mjs +141 -75
  6. package/fesm2022/simpo-component-library.mjs.map +1 -1
  7. package/lib/directive/background-directive.d.ts +1 -1
  8. package/lib/directive/button-directive.directive.d.ts +1 -1
  9. package/lib/directive/color.directive.d.ts +1 -1
  10. package/lib/ecommerce/sections/cart/cart.component.d.ts +18 -0
  11. package/lib/ecommerce/sections/customer-review/customer-review.component.d.ts +2 -2
  12. package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
  13. package/lib/services/rest.service.d.ts +2 -0
  14. package/package.json +1 -1
  15. package/simpo-component-library-1.6.104.tgz +0 -0
  16. package/simpo-component-library-1.6.103.tgz +0 -0
package/fesm2022/simpo-component-library.mjs CHANGED
@@ -13,7 +13,7 @@ import { FormsModule } from '@angular/forms';
13
13
  import * as i13 from 'ngx-skeleton-loader';
14
14
  import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
15
15
  import * as i1 from '@angular/platform-browser';
16
- import * as i13$1 from 'primeng/toast';
16
+ import * as i17 from 'primeng/toast';
17
17
  import { ToastModule } from 'primeng/toast';
18
18
  import * as i7 from 'primeng/api';
19
19
  import { MessageService } from 'primeng/api';
@@ -25,14 +25,16 @@ import Swal from 'sweetalert2';
25
25
  import * as i5 from '@angular/material/bottom-sheet';
26
26
  import { MAT_BOTTOM_SHEET_DATA, MatBottomSheetModule } from '@angular/material/bottom-sheet';
27
27
  import { MatMenuModule } from '@angular/material/menu';
28
+ import * as i3$1 from 'primeng/rating';
29
+ import { RatingModule } from 'primeng/rating';
30
+ import * as i6 from 'primeng/progressbar';
31
+ import { ProgressBarModule } from 'primeng/progressbar';
28
32
  import * as i2$4 from '@angular/material/snack-bar';
29
33
  import { MatSnackBarModule } from '@angular/material/snack-bar';
30
34
  import * as mapboxgl from 'mapbox-gl';
31
35
  import { isBlurhashValid, decode } from 'blurhash';
32
36
  import * as i14 from 'ngx-image-zoom';
33
37
  import { NgxImageZoomModule } from 'ngx-image-zoom';
34
- import * as i15 from 'primeng/rating';
35
- import { RatingModule } from 'primeng/rating';
36
38
  import * as i16 from 'primeng/speeddial';
37
39
  import { SpeedDialModule } from 'primeng/speeddial';
38
40
  import * as i14$1 from '@angular/material/slider';
@@ -43,8 +45,6 @@ import { MatRadioModule } from '@angular/material/radio';
43
45
  import { CdkDrag, moveItemInArray } from '@angular/cdk/drag-drop';
44
46
  import * as i4 from 'primeng/timeline';
45
47
  import { TimelineModule } from 'primeng/timeline';
46
- import * as i6 from 'primeng/progressbar';
47
- import { ProgressBarModule } from 'primeng/progressbar';
48
48
 
49
49
  class ButtonElementComponent {
50
50
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ButtonElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -3341,6 +3341,12 @@ class RestService {
3341
3341
  const businessId = localStorage.getItem("bId") ?? localStorage.getItem("businessId") ?? "";
3342
3342
  return this.http.post(this.BASE_URL + `ecommerce/user/resend?mobile=${mobile}&countryCode=${countryCode}&businessId=${businessId}`, null);
3343
3343
  }
3344
+ applicableDiscountList(cartId) {
3345
+ return this.http.get(this.BASE_URL + `ecommerce/order/discount-coupon/${cartId}/applicability/list`);
3346
+ }
3347
+ removeDiscountFromCart(cartId) {
3348
+ return this.http.put(this.BASE_URL + `ecommerce/order/discount-coupon/${cartId}/cart/remove`, null);
3349
+ }
3344
3350
  addItemToDB(userCart) {
3345
3351
  return this.http.post(this.BASE_URL + `ecommerce/order/cart`, userCart);
3346
3352
  }
@@ -3703,7 +3709,7 @@ class UserBasicInfoComponent {
3703
3709
  return this.email?.includes("@") && this.email.includes(".com") || (this.email?.length == 0);
3704
3710
  }
3705
3711
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserBasicInfoComponent, deps: [{ token: RestService }, { token: i2$3.Router }, { token: i3.MatDialogRef }, { token: StorageServiceService }, { token: i7.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
3706
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserBasicInfoComponent, isStandalone: true, selector: "simpo-user-basic-info", providers: [MessageService], ngImport: i0, template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n <div class=\"d-flex flex-wrap justify-content-between\">\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">First Name</div>\r\n <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\r\n </div>\r\n <!-- <div class=\"form-control-group-3\">\r\n <div class=\"label\">Middle Name</div>\r\n <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n </div> -->\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Last Name</div>\r\n <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\r\n </div>\r\n\r\n <div class=\"form-control-group\" *ngIf=\"isEdit\">\r\n <div class=\"label required\">Mobile</div>\r\n <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Email</div>\r\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\r\n </div>\r\n \r\n <div class=\"form-control-group-full\">\r\n <div class=\"label\">Select Gender</div>\r\n <div class=\"d-flex align-items-center\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\r\n (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\r\n (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"action-btn\">\r\n <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\r\n <button (click)=\"saveProfile()\">Save Profile</button>\r\n </div>\r\n</section>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:100%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:relative;bottom:0;right:0;display:flex;align-items:center;justify-content:flex-end;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}@media screen and (max-width: 475px){.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
3712
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserBasicInfoComponent, isStandalone: true, selector: "simpo-user-basic-info", providers: [MessageService], ngImport: i0, template: "<section style=\"padding: 20px\" class=\"position-relative\">\r\n <div class=\"d-flex flex-wrap justify-content-between\">\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">First Name</div>\r\n <input type=\"text\" placeholder=\"Enter first name\" [(ngModel)]=\"firstName\" (keydown)=\"validateName($event)\">\r\n </div>\r\n <!-- <div class=\"form-control-group-3\">\r\n <div class=\"label\">Middle Name</div>\r\n <input type=\"text\" placeholder=\"Enter middle name\" [(ngModel)]=\"middleName\">\r\n </div> -->\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Last Name</div>\r\n <input type=\"text\" placeholder=\"Enter last name\" [(ngModel)]=\"lastName\" (keydown)=\"validateName($event)\">\r\n </div>\r\n\r\n <div class=\"form-control-group\" *ngIf=\"isEdit\">\r\n <div class=\"label required\">Mobile</div>\r\n <input type=\"number\" placeholder=\"Enter mobile\" [(ngModel)]=\"mobile\" disabled>\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Email</div>\r\n <input type=\"text\" placeholder=\"Enter email\" [(ngModel)]=\"email\">\r\n <span class=\"error-msg\" [style.visibility]=\"isEmailValid ? 'hidden' : 'visible'\">Please enter valid email</span>\r\n </div>\r\n \r\n <div class=\"form-control-group-full\">\r\n <div class=\"label\">Select Gender</div>\r\n <div class=\"d-flex align-items-center\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" src=\"https://img.icons8.com/?size=100&id=108296&format=png&color=000000\" alt=\"\"\r\n (click)=\"gender = 'MALE'\" [ngClass]=\"{'active': gender == 'MALE' }\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" src=\"https://img.icons8.com/?size=100&id=108295&format=png&color=000000\" alt=\"\"\r\n (click)=\"gender = 'FEMALE'\" [ngClass]=\"{'active': gender == 'FEMALE'}\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"action-btn\">\r\n <span class=\"skip-btn\" (click)=\"close()\">{{!isEdit ? 'Skip' : 'Close'}}</span>\r\n <button (click)=\"saveProfile()\">Save Profile</button>\r\n </div>\r\n</section>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>", styles: [".form-control-group,.form-control-group-3,.form-control-group-full{width:100%}:is(.form-control-group,.form-control-group-3,.form-control-group-full)>input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.label{color:#000}.form-control-group-3{width:32%!important}.form-control-group-full{width:100%}img{height:60px;width:60px;object-fit:cover;margin:0 5px;border:2px solid transparent;cursor:pointer;border-radius:50%}.active{border:2px solid #0267C1}.form-control-group{margin:10px 0}.action-btn{position:relative;bottom:0;right:0;display:flex;align-items:center;justify-content:flex-end;gap:20px}.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}.required:after{content:\"*\";color:tomato}.error-msg{color:tomato}@media screen and (max-width: 475px){.action-btn .skip-btn{color:#0267c1;cursor:pointer}.action-btn button{width:100px!important;border:none;background-color:#0267c1;color:#fff;cursor:pointer;border-radius:3px;padding:8px 0;font-size:14px!important;font-weight:500!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 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"] }] }); }
3707
3713
  }
3708
3714
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserBasicInfoComponent, decorators: [{
3709
3715
  type: Component,
@@ -4016,7 +4022,7 @@ class AuthenticateUserComponent extends BaseSection {
4016
4022
  return window.innerWidth <= 475;
4017
4023
  }
4018
4024
  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 }); }
4019
- 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: i13$1.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"] }] }); }
4025
+ 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"] }] }); }
4020
4026
  }
4021
4027
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticateUserComponent, decorators: [{
4022
4028
  type: Component,
@@ -4389,6 +4395,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
4389
4395
  type: Input
4390
4396
  }] } });
4391
4397
 
4398
+ class CustomerReviewComponent {
4399
+ constructor(activatedRoute, restService) {
4400
+ this.activatedRoute = activatedRoute;
4401
+ this.restService = restService;
4402
+ this.productId = null;
4403
+ this.customerReviews = [];
4404
+ this.totalRating = 4;
4405
+ this.totalRatinsCount = 0;
4406
+ this.overallRatingCount = null;
4407
+ }
4408
+ ngOnInit() {
4409
+ this.activatedRoute.queryParams.subscribe((qParam) => {
4410
+ this.productId = qParam["id"];
4411
+ this.getAllReviews();
4412
+ });
4413
+ }
4414
+ getAllReviews() {
4415
+ if (!this.productId)
4416
+ return;
4417
+ this.restService.getAllReviews(this.productId).subscribe((response) => {
4418
+ this.customerReviews = response.data?.userReviews;
4419
+ this.totalRating = response.data?.averageRating;
4420
+ this.overallRatingCount = response.data?.overallRatingCount;
4421
+ this.totalRatinsCount = this.customerReviews?.length;
4422
+ });
4423
+ }
4424
+ getKeys(object) {
4425
+ if (!object)
4426
+ return [];
4427
+ return Object.keys(object);
4428
+ }
4429
+ getPercentage(value) {
4430
+ value = Number(value ?? '1');
4431
+ return (value / this.customerReviews?.length) * 100;
4432
+ }
4433
+ 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 }); }
4434
+ 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"] }] }); }
4435
+ }
4436
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CustomerReviewComponent, decorators: [{
4437
+ type: Component,
4438
+ args: [{ selector: 'simpo-customer-review', standalone: true, imports: [
4439
+ RatingModule,
4440
+ FormsModule,
4441
+ CommonModule,
4442
+ ProgressBarModule
4443
+ ], 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"] }]
4444
+ }], ctorParameters: () => [{ type: i2$3.ActivatedRoute }, { type: RestService }], propDecorators: { data: [{
4445
+ type: Input
4446
+ }], index: [{
4447
+ type: Input
4448
+ }], edit: [{
4449
+ type: Input
4450
+ }], delete: [{
4451
+ type: Input
4452
+ }] } });
4453
+
4392
4454
  class OrderedItems {
4393
4455
  constructor(json, varientId) {
4394
4456
  this.itemId = json?.["itemId"] ?? "";
@@ -4532,6 +4594,18 @@ class CartComponent extends BaseSection {
4532
4594
  this.userDetails = null;
4533
4595
  this.USER_CART_ITEMS = null;
4534
4596
  this.selectedAddressIdx = 0;
4597
+ this.enteredCouponCode = "";
4598
+ this.couponList = [
4599
+ {
4600
+ discountType: "PERCENTAGE",
4601
+ discountName: "OYO",
4602
+ discountDescription: "Testing",
4603
+ applicable: true,
4604
+ validFrom: new Date(),
4605
+ validTo: new Date(),
4606
+ status: true
4607
+ }
4608
+ ];
4535
4609
  this.cartInfo = {
4536
4610
  orderedItems: null,
4537
4611
  businessId: localStorage.getItem("bId") ?? localStorage.getItem("businessId"),
@@ -4563,6 +4637,7 @@ class CartComponent extends BaseSection {
4563
4637
  }
4564
4638
  });
4565
4639
  if (this.storageService.getUser()) {
4640
+ this.getCouponList();
4566
4641
  this.userDetails = this.storageService.getUser();
4567
4642
  this.cartInfo.userDetails = {
4568
4643
  "userId": this.userDetails?.userId,
@@ -4644,6 +4719,16 @@ class CartComponent extends BaseSection {
4644
4719
  console.log(this.responseData);
4645
4720
  this.styles = this.data?.styles;
4646
4721
  }
4722
+ getCouponList() {
4723
+ this.restService.applicableDiscountList(this.cartInfo.cartId).subscribe((response) => {
4724
+ this.couponList = response.data;
4725
+ });
4726
+ }
4727
+ removeCoupon() {
4728
+ this.restService.removeDiscountFromCart(this.cartInfo.cartId).subscribe((response) => {
4729
+ this.calculateCart();
4730
+ });
4731
+ }
4647
4732
  getIndexDBData() {
4648
4733
  this.storageService.getUserCart().then((cartResponse) => {
4649
4734
  console.log(cartResponse);
@@ -4904,6 +4989,41 @@ class CartComponent extends BaseSection {
4904
4989
  closeWindow() {
4905
4990
  this.dialogRef.close();
4906
4991
  }
4992
+ openDialog(container) {
4993
+ if (!!this.userDetails)
4994
+ this.matDialog.open(container);
4995
+ else {
4996
+ this.messageService.add({ severity: 'info', summary: 'Login', detail: 'Please login with mobile number to apply coupon' });
4997
+ }
4998
+ }
4999
+ searchIfApplicable() { }
5000
+ applyCoupon(coupon) {
5001
+ this.cartInfo.billdetails.couponCode = coupon.couponCode;
5002
+ this.cartInfo.billdetails.couponId = coupon.couponId;
5003
+ const restResponse = this.restService.addItemToDB(this.cartInfo).toPromise();
5004
+ restResponse.then((response) => {
5005
+ this.calculateCart();
5006
+ });
5007
+ }
5008
+ calculateCart() {
5009
+ const deliveryOption = JSON.parse(localStorage.getItem("deliveryOptions") ?? "{}");
5010
+ this.cartInfo.billdetails.totalGrossValue = 0;
5011
+ this.cartInfo.billdetails.totalTax = 0;
5012
+ this.cartInfo.billdetails.deliveryCharges = 0;
5013
+ this.cartInfo.billdetails.totalNetValue = 0;
5014
+ this.cartInfo.totalAmount = 0;
5015
+ if (this.USER_CART_ITEMS) {
5016
+ this.USER_CART_ITEMS.forEach((item) => {
5017
+ this.cartInfo.billdetails.totalGrossValue += (item.discountedPrice * (item.quantity ?? 1));
5018
+ this.cartInfo.billdetails.totalTax += (item.quantity * (item.itemTax ?? 0));
5019
+ });
5020
+ this.cartInfo.billdetails.deliveryCharges = (deliveryOption?.minOrderAmount > this.cartInfo.billdetails.totalGrossValue) ? 0 : deliveryOption?.deliveryChanges;
5021
+ this.cartInfo.billdetails.totalNetValue = this.cartInfo.billdetails.totalGrossValue - this.cartInfo.billdetails.deliveryCharges;
5022
+ this.cartInfo.totalAmount = this.cartInfo.billdetails.totalNetValue + this.cartInfo.billdetails.totalTax + this.cartInfo.billdetails.deliveryChanges;
5023
+ this.cartInfo.orderedItems = this.USER_CART_ITEMS;
5024
+ }
5025
+ this.responseData = this.cartInfo;
5026
+ }
4907
5027
  get getAddressList() {
4908
5028
  return this.userDetails ? [...this.userDetails?.addressDetailsList] : [];
4909
5029
  }
@@ -4914,9 +5034,9 @@ class CartComponent extends BaseSection {
4914
5034
  return BUSINESS_CONSTANTS.CURRENCY;
4915
5035
  }
4916
5036
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$3.Router }, { token: RestService }, { token: i3.MatDialog }, { token: StorageServiceService }, { token: i7.MessageService }, { token: i5.MatBottomSheet }, { token: MAT_DIALOG_DATA, optional: true }, { token: i3.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
4917
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n <ng-container *ngIf=\"data\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [attr.class]=\"isMobile ? 'py-5' : ''\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" [attr.style]=\"customClass\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container [ngSwitch]=\"currentTab\">\r\n <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n <div class=\"my-bag\">\r\n My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n <div class=\"cart-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"item-parent d-flex\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\"> \r\n <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <div class=\"fw-bold\">{{ varient }} : </div>\r\n <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n <div class=\"fw-normal\" style=\"margin-left: 5px;\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"item-quantity\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto; width: 0px; \">\r\n <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n </ng-container>\r\n <div class=\"right-panel\">\r\n <div class=\"my-bag\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalTax ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n </ng-container>\r\n <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div class=\"empty-cart-container\">\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n </ng-container>\r\n <!-- <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n </div> -->\r\n </div>\r\n </div>\r\n </section>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></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\r\n </section>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data\">\r\n <section class=\"cart-window\">\r\n <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n <div class=\"d-flex align-items-center\">\r\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n <span>Your Cart</span>\r\n </div>\r\n <div class=\"saving\"></div>\r\n </div>\r\n <div class=\"offers\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n <span>Avail Offers / Coupons</span>\r\n </div>\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n <div class=\"small-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n <div class=\"small-item\">\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"small-product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n <div class=\"small-item-quantity\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </div>\r\n <div class=\"small-item-price\">\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n </div>\r\n <!-- <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"fotter-sec\">\r\n <div class=\"delivery-add d-flex\">\r\n <mat-icon>home</mat-icon>\r\n <div class=\"address\">Tetsting</div>\r\n </div>\r\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n </div>\r\n </section>\r\n </ng-container>\r\n</ng-container>\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", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.item-parent{margin:10px 0;height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;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}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel{width:100%}.right-panel{width:100%;z-index:1000}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}}.mobile-fixed{color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { 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: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type:
5037
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n <ng-container *ngIf=\"data\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [attr.class]=\"isMobile ? 'py-5' : ''\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container [ngSwitch]=\"currentTab\">\r\n <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n <div class=\"my-bag\">\r\n My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n <div class=\"cart-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"item-parent d-flex\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\"> \r\n <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <div class=\"fw-bold\">{{ varient }} : </div>\r\n <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n <div class=\"fw-normal\" style=\"margin-left: 5px;\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"item-quantity\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto; width: 0px; \">\r\n <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n </ng-container>\r\n <div class=\"right-panel\">\r\n <div class=\"my-bag\">\r\n Coupon\r\n </div>\r\n <div class=\"coupons\" (click)=\"openDialog(CouponList)\">\r\n <ng-container *ngIf=\"!!responseData.billdetails?.couponId\">\r\n <div class=\"d-flex flex-column\">\r\n <span style=\"font-weight: 500;\">Apply Coupon</span>\r\n <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n </div>\r\n <div [style.color]=\"styles?.background?.color\">Apply</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"responseData.billdetails?.couponId\">\r\n <div class=\"d-flex flex-column\">\r\n <span style=\"font-weight: 500;\">Coupon</span>\r\n <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n </div>\r\n <div [style.color]=\"styles?.background?.color\" (click)=\"removeCoupon()\">Remove</div>\r\n </ng-container>\r\n </div>\r\n <div class=\"my-bag\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalTax ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n </ng-container>\r\n <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div class=\"empty-cart-container\">\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n </ng-container>\r\n <!-- <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n </div> -->\r\n </div>\r\n </div>\r\n </section>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></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\r\n </section>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data\">\r\n <section class=\"cart-window\">\r\n <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n <div class=\"d-flex align-items-center\">\r\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n <span>Your Cart</span>\r\n </div>\r\n <div class=\"saving\"></div>\r\n </div>\r\n <div class=\"offers\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n <span>Avail Offers / Coupons</span>\r\n </div>\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n <div class=\"small-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n <div class=\"small-item\">\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"small-product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n <div class=\"small-item-quantity\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </div>\r\n <div class=\"small-item-price\">\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n </div>\r\n <!-- <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"fotter-sec\">\r\n <div class=\"delivery-add d-flex\">\r\n <mat-icon>home</mat-icon>\r\n <div class=\"address\">Tetsting</div>\r\n </div>\r\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n </div>\r\n </section>\r\n </ng-container>\r\n</ng-container>\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<ng-template #CouponList>\r\n <section class=\"coupons-listing-section\">\r\n <div class=\"coupon-heading\">\r\n <div class=\"back-btn\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"header-text\">Apply Coupon</div>\r\n </div>\r\n <div class=\"coupon-search-sec\">\r\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n </div>\r\n <div class=\"coupon-listing\">\r\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n <div class=\"coupon-details\"\r\n [ngStyle]=\"{'background-color': couponDetails.discountType === 'PERCENTAGE' ? '#FFF2F4' : (couponDetails.discountType === 'FIXED_AMOUNT' ? '#EEF9FF' : '#EDFFFA')}\">\r\n <div class=\"details__coupon-heading\">\r\n <div class=\"coupon-brief\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name\"\r\n [ngStyle]=\"{'color': couponDetails.discountType === 'PERCENTAGE' ? '#DB1A1A' : (couponDetails.discountType === 'FIXED_AMOUNT' ? '#056B9B' : '#097D5F')}\">\r\n {{ couponDetails.discountName | uppercase }}</div>\r\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn\" \r\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\" (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n </div> -->\r\n </div>\r\n <ng-container *ngIf=\"couponDetails.status\">\r\n <div class=\"details-divider\"></div>\r\n <ul class=\"details__coupon-terms\">\r\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n <div class=\"empty-screen__secondary-text\">\r\n Looks like there are no coupons at the moment\r\n </div>\r\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n </div>\r\n </ng-template>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;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}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel{width:100%}.right-panel{width:100%;z-index:1000}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}}.mobile-fixed{color:#fff}@media screen and (min-width: 480px){.coupons-listing-section{height:80vh!important}}.coupons-listing-section{height:100vh;padding-top:0;position:relative;z-index:100;background:#d3d3d3}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{cursor:pointer;font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}\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.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.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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { 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: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type:
4918
5038
  //DIRECTIVE
4919
- 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: "component", type: AddressComponent, selector: "simpo-address", inputs: ["responseData", "data", "index", "customClass", "edit", "delete", "isCart"], outputs: ["selectedAddress"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
5039
+ 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: "component", type: AddressComponent, selector: "simpo-address", inputs: ["responseData", "data", "index", "customClass", "edit", "delete", "isCart"], outputs: ["selectedAddress"] }, { 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"] }] }); }
4920
5040
  }
4921
5041
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartComponent, decorators: [{
4922
5042
  type: Component,
@@ -4934,8 +5054,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
4934
5054
  ContentFitDirective,
4935
5055
  HoverDirective,
4936
5056
  AddressComponent,
4937
- ToastModule
4938
- ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n <ng-container *ngIf=\"data\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [attr.class]=\"isMobile ? 'py-5' : ''\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" [attr.style]=\"customClass\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container [ngSwitch]=\"currentTab\">\r\n <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n <div class=\"my-bag\">\r\n My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n <div class=\"cart-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"item-parent d-flex\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\"> \r\n <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <div class=\"fw-bold\">{{ varient }} : </div>\r\n <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n <div class=\"fw-normal\" style=\"margin-left: 5px;\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"item-quantity\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto; width: 0px; \">\r\n <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n </ng-container>\r\n <div class=\"right-panel\">\r\n <div class=\"my-bag\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalTax ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n </ng-container>\r\n <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div class=\"empty-cart-container\">\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n </ng-container>\r\n <!-- <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n </div> -->\r\n </div>\r\n </div>\r\n </section>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></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\r\n </section>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data\">\r\n <section class=\"cart-window\">\r\n <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n <div class=\"d-flex align-items-center\">\r\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n <span>Your Cart</span>\r\n </div>\r\n <div class=\"saving\"></div>\r\n </div>\r\n <div class=\"offers\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n <span>Avail Offers / Coupons</span>\r\n </div>\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n <div class=\"small-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n <div class=\"small-item\">\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"small-product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n <div class=\"small-item-quantity\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </div>\r\n <div class=\"small-item-price\">\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n </div>\r\n <!-- <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"fotter-sec\">\r\n <div class=\"delivery-add d-flex\">\r\n <mat-icon>home</mat-icon>\r\n <div class=\"address\">Tetsting</div>\r\n </div>\r\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n </div>\r\n </section>\r\n </ng-container>\r\n</ng-container>\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", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.item-parent{margin:10px 0;height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;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}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel{width:100%}.right-panel{width:100%;z-index:1000}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}}.mobile-fixed{color:#fff}\n"] }]
5057
+ ToastModule,
5058
+ CustomerReviewComponent
5059
+ ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n <ng-container *ngIf=\"data\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [attr.class]=\"isMobile ? 'py-5' : ''\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n </div>\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <ng-container [ngSwitch]=\"currentTab\">\r\n <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\r\n <div class=\"my-bag\">\r\n My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n <div class=\"cart-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"item-parent d-flex\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\"> \r\n <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <div class=\"fw-bold\">{{ varient }} : </div>\r\n <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n <div class=\"fw-normal\" style=\"margin-left: 5px;\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"item-quantity\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-4 position-relative\" style=\"margin-left: auto; width: 0px; \">\r\n <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity) | number: '1.0-2'}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n </div>\r\n <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n </ng-container>\r\n <div class=\"right-panel\">\r\n <div class=\"my-bag\">\r\n Coupon\r\n </div>\r\n <div class=\"coupons\" (click)=\"openDialog(CouponList)\">\r\n <ng-container *ngIf=\"!!responseData.billdetails?.couponId\">\r\n <div class=\"d-flex flex-column\">\r\n <span style=\"font-weight: 500;\">Apply Coupon</span>\r\n <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n </div>\r\n <div [style.color]=\"styles?.background?.color\">Apply</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"responseData.billdetails?.couponId\">\r\n <div class=\"d-flex flex-column\">\r\n <span style=\"font-weight: 500;\">Coupon</span>\r\n <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n </div>\r\n <div [style.color]=\"styles?.background?.color\" (click)=\"removeCoupon()\">Remove</div>\r\n </ng-container>\r\n </div>\r\n <div class=\"my-bag\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalTax ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n <div class=\"price-parent-block\"\r\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n <div class=\"price-type\">Delivery Charge</div>\r\n <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\">\r\n <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n <div class=\"price-value\" style=\"font-weight: 600;\"><span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n </ng-container>\r\n \r\n <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n </ng-container>\r\n <!-- <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div class=\"empty-cart-container\">\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n </ng-container>\r\n <!-- <div class=\"description d-flex mt-4\">\r\n Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n </div> -->\r\n </div>\r\n </div>\r\n </section>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></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\r\n </section>\r\n </ng-container>\r\n <ng-container *ngIf=\"!data\">\r\n <section class=\"cart-window\">\r\n <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n <div class=\"d-flex align-items-center\">\r\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n <span>Your Cart</span>\r\n </div>\r\n <div class=\"saving\"></div>\r\n </div>\r\n <div class=\"offers\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n <span>Avail Offers / Coupons</span>\r\n </div>\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n <div class=\"small-items\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n <div class=\"small-item\">\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"small-product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n </div>\r\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n <div class=\"small-item-quantity\">\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n </div>\r\n <div class=\"small-item-price\">\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n </div>\r\n <!-- <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"fotter-sec\">\r\n <div class=\"delivery-add d-flex\">\r\n <mat-icon>home</mat-icon>\r\n <div class=\"address\">Tetsting</div>\r\n </div>\r\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n </div>\r\n </section>\r\n </ng-container>\r\n</ng-container>\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<ng-template #CouponList>\r\n <section class=\"coupons-listing-section\">\r\n <div class=\"coupon-heading\">\r\n <div class=\"back-btn\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"header-text\">Apply Coupon</div>\r\n </div>\r\n <div class=\"coupon-search-sec\">\r\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n </div>\r\n <div class=\"coupon-listing\">\r\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n <div class=\"coupon-details\"\r\n [ngStyle]=\"{'background-color': couponDetails.discountType === 'PERCENTAGE' ? '#FFF2F4' : (couponDetails.discountType === 'FIXED_AMOUNT' ? '#EEF9FF' : '#EDFFFA')}\">\r\n <div class=\"details__coupon-heading\">\r\n <div class=\"coupon-brief\">\r\n <div class=\"coupon-brief__left-sec\">\r\n <div class=\"coupon-name\"\r\n [ngStyle]=\"{'color': couponDetails.discountType === 'PERCENTAGE' ? '#DB1A1A' : (couponDetails.discountType === 'FIXED_AMOUNT' ? '#056B9B' : '#097D5F')}\">\r\n {{ couponDetails.discountName | uppercase }}</div>\r\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n </div>\r\n <div class=\"coupon-brief__right-sec\">\r\n <div class=\"apply-offer-btn\" \r\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\" (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n </div>\r\n </div>\r\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n </div> -->\r\n </div>\r\n <ng-container *ngIf=\"couponDetails.status\">\r\n <div class=\"details-divider\"></div>\r\n <ul class=\"details__coupon-terms\">\r\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <div class=\"empty-screen-container\">\r\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n <div class=\"empty-screen__secondary-text\">\r\n Looks like there are no coupons at the moment\r\n </div>\r\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n </div>\r\n </ng-template>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;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}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel{width:100%}.right-panel{width:100%;z-index:1000}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}}.mobile-fixed{color:#fff}@media screen and (min-width: 480px){.coupons-listing-section{height:80vh!important}}.coupons-listing-section{height:100vh;padding-top:0;position:relative;z-index:100;background:#d3d3d3}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{cursor:pointer;font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}\n"] }]
4939
5060
  }], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$3.Router }, { type: RestService }, { type: i3.MatDialog }, { type: StorageServiceService }, { type: i7.MessageService }, { type: i5.MatBottomSheet }, { type: undefined, decorators: [{
4940
5061
  type: Optional
4941
5062
  }, {
@@ -7134,7 +7255,7 @@ class FeaturedProductsComponent extends BaseSection {
7134
7255
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$3.Router }, { token: CartService }, { token: i5.MatBottomSheet }, { token: StorageServiceService }, { token: i7.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
7135
7256
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", customClass: "customClass", delete: "delete" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [simpoBackground]=\"styles?.background\" (click)=\"editSection()\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"d-flex jc-space align-end\">\r\n <div>\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"body-large view-all\" *ngIf=\"content?.display?.showButton && screenWidth > 475\" (click)=\"proceedToProductList()\">{{viewAllButton?.content?.label ?? 'See All'}} ></div>\r\n </div>\r\n <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"product-parent position-relative\" *ngIf=\"responseData && responseData?.length\"\r\n [simpoWrapContainer]=\"styles?.direction\" #container>\r\n <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n </ng-container>\r\n <div\r\n *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\" [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\" [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\" [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n </ng-container>\r\n <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"showRightArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors && false\">\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\r\n </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\"\r\n alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\r\n (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"price body-large d-flex\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <div class=\"discounted-price\">\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.discountedPrice}}\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"!product.itemVariant?.length\">\r\n <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative\" [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : '230' ) : ''\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <!-- <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\r\n class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\r\n (mouseleave)=\"product.prviewIdx = 0\"> -->\r\n <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\" [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n \r\n </div>\r\n <div class=\"mt-15 w-100\">\r\n <div class=\"product-name heading-large text-left trim-text w-100\" [id]=\"data?.id\"\r\n [simpoColor]=\"styles?.background?.color\">\r\n {{product.name }}</div>\r\n <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n </div>\r\n</ng-template>\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>", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:10000001;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;height:fit-content;cursor:pointer;position:relative;display:flex;flex-direction:column;justify-content:space-between}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}\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: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "ngmodule", type: FormsModule }, { 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: "directive", type:
7136
7257
  //directive
7137
- SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: SimpoWrapComntainer, selector: "[simpoWrapContainer]", inputs: ["simpoWrapContainer"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: ImageLoadingComponent, selector: "image-loading", inputs: ["hash", "imageUrl", "index", "product", "theme"] }] }); }
7258
+ SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: SimpoWrapComntainer, selector: "[simpoWrapContainer]", inputs: ["simpoWrapContainer"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { 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: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: ImageLoadingComponent, selector: "image-loading", inputs: ["hash", "imageUrl", "index", "product", "theme"] }] }); }
7138
7259
  }
7139
7260
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: FeaturedProductsComponent, decorators: [{
7140
7261
  type: Component,
@@ -7683,7 +7804,7 @@ class ProductDescComponent extends BaseSection {
7683
7804
  return window.innerWidth <= 475;
7684
7805
  }
7685
7806
  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 }); }
7686
- 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 <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.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: i15.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: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
7807
+ 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.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"] }] }); }
7687
7808
  }
7688
7809
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, decorators: [{
7689
7810
  type: Component,
@@ -7706,8 +7827,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
7706
7827
  SociaIconsComponent,
7707
7828
  RatingModule,
7708
7829
  SpeedDialModule,
7709
- ToastModule
7710
- ], 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 <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"] }]
7830
+ ToastModule,
7831
+ CustomerReviewComponent
7832
+ ], 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"] }]
7711
7833
  }], ctorParameters: () => [{ type: Object, decorators: [{
7712
7834
  type: Inject,
7713
7835
  args: [PLATFORM_ID]
@@ -8164,7 +8286,7 @@ class ProductListComponent extends BaseSection {
8164
8286
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: StorageServiceService }, { token: i5.MatBottomSheet }, { token: i3.MatDialog }, { token: CartService }, { token: i7.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
8165
8287
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:scroll": "onWindowScroll($event)", "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div>\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\" [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\">\r\n\r\n <!-- <div *ngIf=\"isMobile\" class=\"back-to-home\" cdkDrag (click)=\"goToCart()\">\r\n <mat-icon>home</mat-icon>\r\n </div> -->\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\r\n <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\" >\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 25%; padding: 0rem 2rem 0rem 1rem ;\" >\r\n <div class=\"filter body-large\" [style.color]=\"styles?.background?.accentColor\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n Clear all\r\n </div>\r\n </div>\r\n <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\" style=\"width: 70%;margin-left: 10px; margin-right: 2%;\">\r\n <div class=\"fs-6 fw-normal\" [style.color]=\"styles?.background?.accentColor\">Showing {{(pageNo -1)*size}}-{{minSize}} of {{ totalCount }} Results</div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 10px;\" [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n <select (change)=\"applyFilter($event, 'SORT')\"> \r\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex w-100 onlyMobile\" style=\"gap: 5px; overflow-x: auto;\" [style.color]=\"styles?.background?.accentColor\">\r\n <ng-container *ngFor=\"let filter of filterList\">\r\n <div class=\"d-flex justify-content-between w-100 chip\" [style.color]=\"styles?.background?.color\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; margin-left: 5px;\" (click)=\"removeFilter(filter)\">X</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"filter-side onlyDesktop\">\r\n <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n </div>\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\" >\r\n <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor: pointer;\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"></simpo-small-product-listing>\r\n </ng-container>\r\n </div>\r\n <simpo-pagnination style=\"width: 100%; margin-top: 30px; overflow-x: scroll; \" [totalPages]=\"totalPages\" [currentPage]=\"pageNo\" (paginationChange)=\"paginationChange($event)\"></simpo-pagnination>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\" >\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles?.background?.accentColor\">\r\n Product list is empty\r\n </div>\r\n <div class=\"description d-flex justify-content-center mt-4\" [style.color]=\"styles?.background?.accentColor\">\r\n Looks like no item is present with filter. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </div>\r\n\r\n <div class=\"bottom-filter\"[style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n <mat-icon>sort</mat-icon>\r\n <span>Sort by</span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>Filter</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></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<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<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #FilterSection>\r\n <section>\r\n <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n <ng-container *ngFor=\"let filter of filterList\">\r\n <div class=\"d-flex justify-content-between w-90 chip\" [style.color]=\"styles?.background?.color\" [style.backgroundColor]=\"styles?.background?.accentColor\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"categories?.length\" >\r\n <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n <h6><b>Shop by categories</b></h6>\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\" [style.color]=\"styles?.background?.accentColor\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n <div class=\"trim-text\">{{category.option | uppercase}}</div>\r\n </div>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\" [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"categories heading-small\">\r\n Shop by collections\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n <div class=\"trim-text\">{{collection.option | uppercase}}</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"price-section\">\r\n <div class=\"categories heading-small\" [style.color]=\"styles?.background?.accentColor\">\r\n Shop by price\r\n </div>\r\n <div>\r\n <mat-slider class=\"mat-slider\" [min]=\"minProductPrice\" [max]=\"maxProductPrice\" style=\"width: 87%;\">\r\n <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n </mat-slider>\r\n </div>\r\n <div class=\"price-button-section\">\r\n <div class=\"button-section\">\r\n <button (click)=\"applyFilter()\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\">Filter</button>\r\n </div>\r\n <div class=\"price-range\">\r\n Price: <span [innerHtml]='currency'></span>{{ pricingMin }} - <span [innerHtml]='currency'></span>{{ pricingMax | formateAmount }}\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #CategoryFilterSection>\r\n <section>\r\n <ng-container *ngFor=\"let category of categories\">\r\n <div class=\"category\">\r\n <img [src]=\"category.imgUrl\">\r\n <span>{{ category.option }}</span>\r\n </div>\r\n </ng-container>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n <section style=\"padding: 10px\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n <span>Sort by</span>\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <mat-radio-group class=\"d-flex flex-column\">\r\n <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"applyFilter($event, 'SORT')\">{{sortingType.name}}</mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\" class=\"default-image position-relative\" (click)=\"proceedToProductDesc(product.itemId)\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"product?.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n </div>\r\n <div class=\"mt-2 w-100\">\r\n <div class=\"product-name heading-large w-100 text-left trim-text\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\" [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\" [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\" (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex align-item-center justify-content-between\">\r\n <div class=\"price body-large text-left d-flex align-items-center\">\r\n <div class=\"discounted-price\"[style.color]=\"styles?.background?.accentColor\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.discountedPrice}}\r\n </div>\r\n </div>\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\" (click)=\"addItemToCart($event, product, 'ADD')\">{{button?.content?.label ?? 'Add to Cart'}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\">\r\n <span (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span>{{product.quantity}}</span>\r\n <span (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:40vh;width:100%}.categories-heading-small{padding:0rem 0rem 0rem 1rem}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:100%;height:40vh}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn button{height:35px;font-size:16px!important}.fav-icon{position:absolute;z-index:1000;padding:5px;right:3px;top:3px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.discounted-price{margin-top:-3px}.filter-side{width:25%;position:sticky;top:0;height:fit-content}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem .75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{padding:8px 15px;border-radius:3px;margin:3px 0;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%;margin-left:10px}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:30px;width:30px;border-radius:50%;cursor:pointer;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:10px!important}.product{padding:5px!important;margin-top:10px!important}.out-of-stock{font-size:12px!important}.discounted-price,.add-to-cart-btn button{font-size:14px!important}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:block!important}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:10000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:220px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;padding:5px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}@media (min-width: 475px) and (max-width: 1024px){.price-button-section{display:flex;flex-direction:column-reverse}.categories-section{padding:.8rem 0rem}.category-options{padding:.75rem 1rem}.categories{padding:1rem}.top-section{width:25%;padding:0rem 2rem 0rem 1rem}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px;margin-left:10%}}\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: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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: "ngmodule", type: MatSliderModule }, { kind: "component", type: i14$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i14$1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"], outputs: ["paginationChange"] }, { kind: "directive", type:
8166
8288
  //directive
8167
- AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { 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: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i16$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i16$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: FormateAmount, name: "formateAmount" }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass"] }] }); }
8289
+ AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { 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: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i16$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i16$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "pipe", type: FormateAmount, name: "formateAmount" }, { 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: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass"] }] }); }
8168
8290
  }
8169
8291
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductListComponent, decorators: [{
8170
8292
  type: Component,
@@ -8459,7 +8581,7 @@ class WhislistComponent extends BaseSection {
8459
8581
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: WhislistComponent, deps: [{ token: CartService }, { token: EventsService }, { token: StorageServiceService }, { token: RestService }, { token: i7.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
8460
8582
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: WhislistComponent, isStandalone: true, selector: "simpo-whislist", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" [attr.style]=\"customClass\">\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"left-panel\" [ngClass]=\"{ 'mobile-height': isMobile && responseData?.orderedItems?.length === 1 }\">\r\n <div class=\"my-bag\"[style.color]=\"styles?.background?.accentColor\">\r\n My Wishlist&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n </div>\r\n\r\n <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n <div class=\"cart-items\" [ngClass]=\"{ 'mobile-height': isMobile && (responseData?.orderedItems?.length ?? 0) === 1, 'multiple-items': (responseData?.orderedItems?.length ?? 0) > 1 }\">\r\n <mat-icon class=\"delete-btn\" (click)=\"deleteFromWhislist(item)\">close</mat-icon>\r\n <div class=\"d-flex item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100 item-desc\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\" [style.color]=\"styles?.background?.accentColor\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\" [style.color]=\"styles?.background?.accentColor\">\r\n <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n </div>\r\n <ng-container *ngIf=\"item.itemVariant\"> \r\n <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n <div class=\"fw-bold\"[style.color]=\"styles?.background?.accentColor\">{{ varient }} : </div>\r\n <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n <div class=\"fw-normal\" style=\"margin-left: 5px;\"[style.color]=\"styles?.background?.accentColor\"> {{ item.itemVariant.properties[varient] | uppercase }}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"d-flex action-btn\" class=\"options\" style=\"gap: 5px; \" > \r\n <div class=\"item-quantity\" *ngIf=\"item.quantity\" [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"count\">\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\" [style.color]=\"styles?.background?.accentColor\">Add Quantity\r\n </div>\r\n <div class=\"item-quantity\" (click)=\"moveToCart(item)\" [style.color]=\"styles?.background?.accentColor\">Move to Cart</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"position-relative itemPrice\" style=\"margin-left: auto; width: 30%;\">\r\n <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span>\r\n {{(item.discountedPrice) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n <div class=\"empty-cart-container\">\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [style.color]=\"styles.background.accentColor\">\r\n Your Whislist is empty\r\n </div>\r\n <div class=\"description d-flex mt-4\" [style.color]=\"styles.background.accentColor\">\r\n Looks like you have not added anything to your Whislist. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\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\r\n </section>\r\n</ng-container>\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>", styles: [".cart-parent{display:flex;flex-wrap:wrap;margin-top:15px;gap:20px}.item-desc{margin-left:10px!important}.left-panel{width:100%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;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}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.options{display:flex}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}.delete-btn{display:none}.count{width:100%;display:flex;justify-content:space-between}@media only screen and (max-width: 475px){.cart-parent{flex-direction:column}.delete-btn{display:flex!important;justify-content:center;align-items:center;padding:5px;background-color:#d3d3d3;border-radius:50%;position:absolute;top:-10px;right:-5px;font-size:18px;color:#000}.total-container{padding-top:5px!important;padding-bottom:5px!important;height:calc(100vh - 130px)}.item-parent{flex-direction:row!important;flex-wrap:nowrap!important}.cart-items{width:100%;position:relative}.left-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-desc{width:73%}.itemPrice{display:none!important}.action-btn{flex-wrap:wrap}.count{display:flex;gap:20px}.item-quantity{width:100%;justify-content:center}.options{flex-direction:column}.empty-cart-container{height:calc(100vh - 130px)}}@media (min-width:768px) and (max-width:1024px){.options{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: 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: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "directive", type:
8461
8583
  //DIRECTIVE
8462
- BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "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: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
8584
+ BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "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: 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"] }] }); }
8463
8585
  }
8464
8586
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: WhislistComponent, decorators: [{
8465
8587
  type: Component,
@@ -8929,7 +9051,7 @@ class UserProfileComponent extends BaseSection {
8929
9051
  return BUSINESS_CONSTANTS.CURRENCY;
8930
9052
  }
8931
9053
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$3.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i3.MatDialog }, { token: i5.MatBottomSheet }, { token: i2$2.CookieService }, { token: i7.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
8932
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" [ngStyle]=\"{'height': isMobile ? '100vh' : '90vh', 'z-index': isMobile ? '100000000' : ''}\" [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-3 profile-box\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.order]=\"styles?.swap ? '1' : '0'\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100\" class=\"profile-icon\">\r\n <div class=\"profile-detials\" >\r\n <h4 class=\"font-weight-bold\" [style.color]=\"styles?.background?.accentColor\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.mobile?.length\">\r\n <mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span> \r\n <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('MOBILE')\">edit</mat-icon> -->\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.email?.length\">\r\n <mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span> \r\n <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('EMAIL')\">edit</mat-icon> -->\r\n </h6>\r\n </div>\r\n </div>\r\n <div class=\"tabs\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n <!-- <mat-icon [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.icon}}</mat-icon> -->\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\" style=\"height: 20px;\" [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\" [simpoBackground]=\"styles?.background\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\" *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\" [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\r\n </div>\r\n \r\n </ng-container>\r\n </section>\r\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button> \r\n </div>\r\n </ng-container>\r\n \r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n \r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n <h1 class=\"onlyDesktop\">My Orders</h1>\r\n <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n </ng-container>\r\n </div>\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\" (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h1 class=\"title-text\">My Address</h1>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\" [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"address\" [style.width]=\"getProductWidth\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n <span class=\"address-type\">{{address.addressType}}</span>\r\n </div>\r\n <div class=\"address-det trim-text\">{{address.addressLine1}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\">\r\n <mat-icon (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery</div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\r\n <div class=\"top\">\r\n <span class=\"font-weight-normal\">{{order.orderNum}}</span>\r\n <mat-icon>arrow_forward_ios</mat-icon>\r\n </div>\r\n <div class=\"middle my-2\">\r\n <span>{{order.createdTimeStamp | date: 'medium'}}</span>\r\n <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"bottom\">\r\n <span class=\"font-weight-normal\">Amount: <span> <span [innerHTML]=\"currency\"></span> {{ order.billDetails.totalGrossValue }}</span></span>\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #WishlistDetails>\r\n <h1 class=\"onlyDesktop\">My Wishlist</h1>\r\n <div class=\"wishlist-list\">\r\n <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"cart-items\">\r\n <div class=\"d-flex item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-8 h-100 item-desc\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n </div>\r\n <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\r\n <div class=\"item-quantity\" *ngIf=\"item.quantity\">\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n </div>\r\n <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add to Quantity</div>\r\n <div class=\"item-quantity\" (click)=\"moveToCart(item)\">Move to Cart</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"position-relative d-flex flex-column justify-content-between iemPrice\" style=\"right: 5px\">\r\n <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span> {{(item.discountedPrice) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\" *ngIf=\"!isMobile\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\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<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></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: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;box-shadow:#0000000d 0 0 0 1px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:#0000000d 0 0 0 1px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;min-height:40vh;max-height:71vh;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{border:1px solid lightgray;box-shadow:#00000029 0 1px 4px}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}@media screen and (max-width: 475px){.title-text{font-size:24px}.tab-selected div{font-weight:600!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}\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: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }] }); }
9054
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" [ngStyle]=\"{'height': isMobile ? '100vh' : '90vh', 'z-index': isMobile ? '100000000' : ''}\" [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-3 profile-box\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.order]=\"styles?.swap ? '1' : '0'\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100\" class=\"profile-icon\">\r\n <div class=\"profile-detials\" >\r\n <h4 class=\"font-weight-bold\" [style.color]=\"styles?.background?.accentColor\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.mobile?.length\">\r\n <mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span> \r\n <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('MOBILE')\">edit</mat-icon> -->\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.email?.length\">\r\n <mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span> \r\n <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('EMAIL')\">edit</mat-icon> -->\r\n </h6>\r\n </div>\r\n </div>\r\n <div class=\"tabs\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n <!-- <mat-icon [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.icon}}</mat-icon> -->\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\" style=\"height: 20px;\" [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\" [simpoBackground]=\"styles?.background\">\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n </div>\r\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n <ng-container *ngSwitchCase=\"''\">\r\n <section class=\"top-sec\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\" *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n </div>\r\n </section>\r\n <section class=\"list-sec\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\" [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\r\n </div>\r\n \r\n </ng-container>\r\n </section>\r\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button> \r\n </div>\r\n </ng-container>\r\n \r\n <ng-container *ngSwitchCase=\"'Orders'\">\r\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Address'\">\r\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Account Details'\">\r\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Logout'\">\r\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\r\n \r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n <h1 class=\"onlyDesktop\">My Orders</h1>\r\n <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n <ng-container *ngFor=\"let tab of tabs\">\r\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n </ng-container>\r\n </div>\r\n <div class=\"order-list\">\r\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-template #showEmptyScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\" (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2\">\r\n <h1 class=\"title-text\">My Address</h1>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\" [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n <div class=\"address\" [style.width]=\"getProductWidth\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n <span class=\"address-type\">{{address.addressType}}</span>\r\n </div>\r\n <div class=\"address-det trim-text\">{{address.addressLine1}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\">\r\n <mat-icon (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-template #showEmptyAddress>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery</div>\r\n <!-- </ng-container> -->\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\r\n <div class=\"top\">\r\n <span class=\"font-weight-normal\">{{order.orderNum}}</span>\r\n <mat-icon>arrow_forward_ios</mat-icon>\r\n </div>\r\n <div class=\"middle my-2\">\r\n <span>{{order.createdTimeStamp | date: 'medium'}}</span>\r\n <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"bottom\">\r\n <span class=\"font-weight-normal\">Amount: <span> <span [innerHTML]=\"currency\"></span> {{ order.billDetails.totalGrossValue }}</span></span>\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #WishlistDetails>\r\n <h1 class=\"onlyDesktop\">My Wishlist</h1>\r\n <div class=\"wishlist-list\">\r\n <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"cart-items\">\r\n <div class=\"d-flex item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-8 h-100 item-desc\">\r\n <div class=\"lh-23\">\r\n <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n <div class=\"price-with-tax\">\r\n <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n </div>\r\n <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\r\n <div class=\"item-quantity\" *ngIf=\"item.quantity\">\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n <span>{{item.quantity}}</span>\r\n <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n </div>\r\n <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add to Quantity</div>\r\n <div class=\"item-quantity\" (click)=\"moveToCart(item)\">Move to Cart</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"position-relative d-flex flex-column justify-content-between iemPrice\" style=\"right: 5px\">\r\n <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span> {{(item.discountedPrice) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\" *ngIf=\"!isMobile\">delete</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-template #showEmptyWishlistScreen>\r\n <section class=\"empty-cart m-auto\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container *ngFor=\"let text of content?.inputText\">\r\n <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-template>\r\n</ng-template>\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<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></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: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;box-shadow:#0000000d 0 0 0 1px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:#0000000d 0 0 0 1px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;min-height:40vh;max-height:71vh;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{border:1px solid lightgray;box-shadow:#00000029 0 1px 4px}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}@media screen and (max-width: 475px){.title-text{font-size:24px}.tab-selected div{font-weight:600!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}\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: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { 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: "pipe", type: GenderIcon, name: "genderIcon" }] }); }
8933
9055
  }
8934
9056
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserProfileComponent, decorators: [{
8935
9057
  type: Component,
@@ -9053,7 +9175,7 @@ class VerifyComponent extends BaseSection {
9053
9175
  }, 100);
9054
9176
  }
9055
9177
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: VerifyComponent, deps: [{ token: RestService }, { token: i2$3.Router }, { token: StorageServiceService }, { token: i7.MessageService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
9056
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: VerifyComponent, isStandalone: true, selector: "simpo-verify-payment", inputs: { data: "data", responseData: "responseData", edit: "edit", index: "index", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"d-flex flex-column align-items-center justify-content-center\" style=\"height: 100vh;\" [simpoBackground]=\"styles?.background\" (click)=\"editSection()\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\r\n <span class=\"font-bold\">{{loadingText}}</span>\r\n</section>\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></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: ["span{color:#000;font-weight:600;font-size:larger}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
9178
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: VerifyComponent, isStandalone: true, selector: "simpo-verify-payment", inputs: { data: "data", responseData: "responseData", edit: "edit", index: "index", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"d-flex flex-column align-items-center justify-content-center\" style=\"height: 100vh;\" [simpoBackground]=\"styles?.background\" (click)=\"editSection()\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"getImageUrl\" style=\"height: 200px; width: 200px;\" [alt]=\"content?.image?.altText\">\r\n <span class=\"font-bold\">{{loadingText}}</span>\r\n</section>\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></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: ["span{color:#000;font-weight:600;font-size:larger}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i17.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }] }); }
9057
9179
  }
9058
9180
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: VerifyComponent, decorators: [{
9059
9181
  type: Component,
@@ -9550,62 +9672,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
9550
9672
  type: Input
9551
9673
  }] } });
9552
9674
 
9553
- class CustomerReviewComponent {
9554
- constructor(activatedRoute, restService) {
9555
- this.activatedRoute = activatedRoute;
9556
- this.restService = restService;
9557
- this.productId = null;
9558
- this.customerReviews = [];
9559
- this.totalRating = 4;
9560
- this.totalRatinsCount = 0;
9561
- this.overallRatingCount = null;
9562
- }
9563
- ngOnInit() {
9564
- this.activatedRoute.queryParams.subscribe((qParam) => {
9565
- this.productId = qParam["id"];
9566
- this.getAllReviews();
9567
- });
9568
- }
9569
- getAllReviews() {
9570
- if (!this.productId)
9571
- return;
9572
- this.restService.getAllReviews(this.productId).subscribe((response) => {
9573
- this.customerReviews = response.data?.userReviews;
9574
- this.totalRating = response.data?.averageRating;
9575
- this.overallRatingCount = response.data?.overallRatingCount;
9576
- this.totalRatinsCount = this.customerReviews?.length;
9577
- });
9578
- }
9579
- getKeys(object) {
9580
- if (!object)
9581
- return [];
9582
- return Object.keys(object);
9583
- }
9584
- getPercentage(value) {
9585
- value = Number(value ?? '1');
9586
- return (value / this.customerReviews?.length) * 100;
9587
- }
9588
- 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 }); }
9589
- 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: i15.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"] }] }); }
9590
- }
9591
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CustomerReviewComponent, decorators: [{
9592
- type: Component,
9593
- args: [{ selector: 'simpo-customer-review', standalone: true, imports: [
9594
- RatingModule,
9595
- FormsModule,
9596
- CommonModule,
9597
- ProgressBarModule
9598
- ], 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"] }]
9599
- }], ctorParameters: () => [{ type: i2$3.ActivatedRoute }, { type: RestService }], propDecorators: { data: [{
9600
- type: Input
9601
- }], index: [{
9602
- type: Input
9603
- }], edit: [{
9604
- type: Input
9605
- }], delete: [{
9606
- type: Input
9607
- }] } });
9608
-
9609
9675
  class AuthenticationRequiredComponent {
9610
9676
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: AuthenticationRequiredComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
9611
9677
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: AuthenticationRequiredComponent, isStandalone: true, selector: "simpo-authentication-required", ngImport: i0, template: "<section>\r\n <div class=\"main\"> \t\r\n <input type=\"checkbox\" id=\"chk\" aria-hidden=\"true\">\r\n\r\n <div class=\"signup\">\r\n <form>\r\n <label for=\"chk\" aria-hidden=\"true\">Sign up</label>\r\n <input type=\"text\" name=\"txt\" placeholder=\"User name\" required=\"\">\r\n <input type=\"email\" name=\"email\" placeholder=\"Email\" required=\"\">\r\n <input type=\"password\" name=\"password\" placeholder=\"Password\" required=\"\">\r\n <input type=\"password\" name=\"confPassword\" placeholder=\"Confirm Password\" required=\"\">\r\n <button>Sign up</button>\r\n </form>\r\n </div>\r\n\r\n <div class=\"login\">\r\n <form>\r\n <label for=\"chk\" aria-hidden=\"true\">Login</label>\r\n <input type=\"email\" name=\"email\" placeholder=\"Email\" required=\"\">\r\n <input type=\"password\" name=\"pswd\" placeholder=\"Password\" required=\"\">\r\n <button>Login</button>\r\n </form>\r\n </div>\r\n </div>\r\n</section>", styles: ["section{margin:0;padding:0;display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:Jost,sans-serif;background:linear-gradient(to bottom,#0f0c29,#302b63,#24243e)}.main{width:350px;height:500px;background:red;overflow:hidden;background:url(https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38) no-repeat center/ cover;border-radius:10px;box-shadow:5px 20px 50px #000}#chk{display:none}.signup{position:relative;width:100%;height:100%}label{color:#fff;font-size:2.3em;justify-content:center;display:flex;margin:50px 50px 20px;font-weight:700;cursor:pointer;transition:.5s ease-in-out}input{width:80%;height:10px;background:#e0dede;justify-content:center;display:flex;margin:20px auto;padding:18px;border:none;outline:none;border-radius:5px}button{width:80%!important;height:40px;margin:10px auto;justify-content:center;display:block;color:#fff;background:#573b8a;font-size:1em;font-weight:700;outline:none;border:none;border-radius:5px;transition:.2s ease-in;cursor:pointer}button:hover{background:#6d44b8}.login{height:460px;background:#eee;border-radius:60%/10%;transform:translateY(-180px);transition:.8s ease-in-out}.login label{color:#573b8a;transform:scale(.6)}#chk:checked~.login{transform:translateY(-500px)}#chk:checked~.login label{transform:scale(1)}#chk:checked~.signup label{transform:scale(.6)}\n"] }); }