simpo-component-library 1.4.10 → 1.4.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/esm2022/lib/ecommerce/json/user-cart.json +14 -1
  2. package/esm2022/lib/ecommerce/json/user-details.json +2 -1
  3. package/esm2022/lib/ecommerce/sections/address/address.component.mjs +148 -0
  4. package/esm2022/lib/ecommerce/sections/authenticate-user/authenticate-user.component.mjs +15 -9
  5. package/esm2022/lib/ecommerce/sections/cart/cart.component.mjs +49 -13
  6. package/esm2022/lib/ecommerce/sections/featured-products/featured-products.component.mjs +8 -3
  7. package/esm2022/lib/ecommerce/sections/product-desc/product-desc.component.mjs +23 -6
  8. package/esm2022/lib/ecommerce/sections/user-profile/user-profile.component.mjs +15 -16
  9. package/esm2022/lib/ecommerce/sections/user-profile/user-profile.modal.mjs +1 -1
  10. package/esm2022/lib/ecommerce/styles/cart.modal.mjs +1 -1
  11. package/esm2022/lib/sections/navbar-section/navbar-section.component.mjs +4 -4
  12. package/esm2022/lib/services/cart.service.mjs +4 -2
  13. package/esm2022/lib/services/rest.service.mjs +32 -4
  14. package/fesm2022/simpo-component-library.mjs +315 -78
  15. package/fesm2022/simpo-component-library.mjs.map +1 -1
  16. package/lib/directive/background-directive.d.ts +1 -1
  17. package/lib/directive/button-directive.directive.d.ts +1 -1
  18. package/lib/directive/color.directive.d.ts +1 -1
  19. package/lib/ecommerce/sections/address/address.component.d.ts +38 -0
  20. package/lib/ecommerce/sections/authenticate-user/authenticate-user.component.d.ts +4 -2
  21. package/lib/ecommerce/sections/cart/cart.component.d.ts +8 -1
  22. package/lib/ecommerce/sections/featured-products/featured-products.component.d.ts +2 -1
  23. package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +4 -0
  24. package/lib/ecommerce/sections/user-profile/user-profile.component.d.ts +6 -5
  25. package/lib/ecommerce/sections/user-profile/user-profile.modal.d.ts +14 -0
  26. package/lib/ecommerce/styles/cart.modal.d.ts +3 -2
  27. package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
  28. package/lib/services/rest.service.d.ts +7 -0
  29. package/package.json +1 -1
  30. package/simpo-component-library-1.4.11.tgz +0 -0
  31. package/simpo-component-library-1.4.12.tgz +0 -0
  32. package/simpo-component-library-1.4.10.tgz +0 -0
package/fesm2022/simpo-component-library.mjs CHANGED
@@ -6,25 +6,27 @@ import { MatGridListModule } from '@angular/material/grid-list';
6
6
  import * as i2$1 from '@angular/material/button';
7
7
  import { MatButtonModule } from '@angular/material/button';
8
8
  import { MatIconModule, MatIcon } from '@angular/material/icon';
9
- import * as i2$2 from '@angular/material/dialog';
9
+ import * as i3 from '@angular/material/dialog';
10
10
  import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
11
- import * as i2$3 from '@angular/forms';
11
+ import * as i2$2 from '@angular/forms';
12
12
  import { FormsModule } from '@angular/forms';
13
13
  import * as i1 from '@angular/platform-browser';
14
14
  import { map } from 'rxjs';
15
15
  import * as i1$1 from '@angular/common/http';
16
16
  import { HttpClientModule } from '@angular/common/http';
17
- import * as i2$4 from '@angular/router';
18
- import * as i2$5 from '@angular/material/snack-bar';
19
- import * as i2$6 from 'ngx-skeleton-loader';
17
+ import * as i2$3 from '@angular/router';
18
+ import * as i2$4 from '@angular/material/snack-bar';
19
+ import * as i2$5 from 'ngx-skeleton-loader';
20
20
  import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
21
21
  import * as mapboxgl from 'mapbox-gl';
22
- import * as i8 from '@angular/material/slider';
22
+ import * as i8 from 'ngx-image-zoom';
23
+ import { NgxImageZoomModule } from 'ngx-image-zoom';
24
+ import * as i8$1 from '@angular/material/slider';
23
25
  import { MatSliderModule } from '@angular/material/slider';
24
26
  import { MatSelectModule } from '@angular/material/select';
25
- import * as i2$7 from 'primeng/timeline';
27
+ import * as i2$6 from 'primeng/timeline';
26
28
  import { TimelineModule } from 'primeng/timeline';
27
- import * as i3 from 'primeng/api';
29
+ import * as i3$1 from 'primeng/api';
28
30
 
29
31
  class ButtonElementComponent {
30
32
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ButtonElementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -1067,7 +1069,7 @@ class HoverElementsComponent {
1067
1069
  event.stopPropagation();
1068
1070
  }
1069
1071
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: HoverElementsComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
1070
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: HoverElementsComponent, isStandalone: true, selector: "simpo-hover-elements", inputs: { data: "data", index: "index", editOptions: "editOptions", isMerged: "isMerged" }, outputs: { edit: "edit" }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\" *ngIf=\"editOptions\">\r\n <div class=\"top-btn\" [ngClass]=\"{'adjust-top-btn': isMerged && index == 1}\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button class=\"add_btn_top\" (click)=\"addSection('ABOVE', $event)\">Add Section +</button>\r\n </div>\r\n <section class=\"hover-tab\" [ngClass]=\"{'adjustPosition': isMerged && index == 1}\">\r\n <div class=\"tabs-section\" [ngStyle]=\"{'z-index' : data.sectionType === 'header' ? '10000' : '1000'}\">\r\n <div class=\"edit-tab\">\r\n <button (click)=\"editSection()\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1076_52409)\">\r\n <path\r\n d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\r\n fill=\"#0267c1\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1076_52409\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"edit-text\">\r\n Edit\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"vr-line\"></div>\r\n <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'blogList'\">\r\n <button (click)=\"restyleSection($event)\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M4.01108 19.9525C4.27565 20.0656 4.58327 19.9712 4.7378 19.7271L11.7691 8.55522C11.8829 8.3744 11.8898 8.14608 11.7868 7.95956C11.6838 7.77245 11.4869 7.65628 11.2735 7.65628H6.58085L8.32608 0.730146C8.39647 0.450341 8.25397 0.161357 7.98905 0.0474897C7.72585 -0.0657916 7.41628 0.0291694 7.26233 0.272919L0.231082 11.4448C0.117215 11.6256 0.11034 11.8539 0.213348 12.0405C0.316355 12.2276 0.513191 12.3437 0.726629 12.3437H5.41928L3.67405 19.2699C3.60366 19.5497 3.74612 19.8387 4.01108 19.9525Z\"\r\n fill=\"#0267c1\" />\r\n </svg>\r\n <span class=\"edit-text\">\r\n Restyle\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"vr-line\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\"></div>\r\n <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button (click)=\"changeContent($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path stroke=\"#0267c1\" stroke-linecap=\"round\" stroke-width=\"1.5\" d=\"M11 12h7m-7-8h7m-7 4h7M2 16h16\">\r\n </path>\r\n <path stroke=\"#0267c1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m2 12 .85714-2.28571M8 12l-.85714-2.28571m0 0L5 4 2.85714 9.71429m4.28572 0H2.85714\"></path>\r\n </svg>\r\n <span class=\"edit-text\">Change Content</span>\r\n </button>\r\n </div>\r\n <div class=\"vr-line\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'blogList'\"></div>\r\n <div class=\"remainin-sections\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button class=\"copy\" (click)=\"duplicateSection($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path\r\n d=\"M9 2c-1.10457 0-2 .89543-2 2v8c0 1.1046.89543 2 2 2h6c1.1046 0 2-.8954 2-2V6.41421c0-.53043-.2107-1.03914-.5858-1.41421L14 2.58579C13.6249 2.21071 13.1162 2 12.5858 2H9Z\">\r\n </path>\r\n <path d=\"M3 8c0-1.10457.89543-2 2-2v10h8c0 1.1046-.8954 2-2 2H5c-1.10457 0-2-.8954-2-2V8Z\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"moveUp($event)\" [disabled]=\"index == 1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M3.29289 9.70711c-.39052-.39053-.39052-1.02369 0-1.41422l6-6c.39053-.39052 1.02371-.39052 1.41421 0l6 6c.3905.39053.3905 1.02369 0 1.41422-.3905.39049-1.0237.39049-1.4142 0L11 5.41421V17c0 .5523-.4477 1-1 1-.55228 0-1-.4477-1-1V5.41421l-4.29289 4.2929c-.39053.39049-1.02369.39049-1.41422 0Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"moveDown($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M16.7071 10.2929c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.02368.3905-1.41421 0l-6-6c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.39053 1.02369-.39053 1.41422 0L9 14.5858V3c0-.55228.44772-1 1-1 .5523 0 1 .44772 1 1v11.5858l4.2929-4.2929c.3905-.39053 1.0237-.39053 1.4142 0Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"deleteSection($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </section>\r\n <div class=\"bottom-btn\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button class=\"add_btn\" (click)=\"addSection('BELOW', $event)\">Add Section +</button>\r\n </div>\r\n</mat-dialog-content>\r\n", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:30px;top:20px;height:auto}.adjustPosition{top:200px}.bottom-btn{position:absolute;top:100%;z-index:1001;border-bottom:4px solid #0267c1;width:100%}.bottom-btn .add_btn{width:140px!important;height:36px;background-color:#0267c1;border-radius:4px;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;position:absolute;top:100%;left:50%;box-shadow:#00000059 0 5px 15px}.adjust-top-btn{top:170px!important}.top-btn{position:absolute;top:0%;z-index:1001;width:100%;border-bottom:4px solid #0267c1}.top-btn .add_btn_top{top:0!important;width:140px!important;height:36px;background-color:#0267c1;border-radius:4px;position:absolute;left:50%;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;z-index:1001;box-shadow:#00000059 0 5px 15px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:60px;background-color:#fff;z-index:1000}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.regenerate{margin-left:10px;display:flex;justify-content:center;align-items:center}.regenerate button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.remainin-sections{margin-left:10px;display:flex;justify-content:center;align-items:center}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}@media only screen and (max-width: 475px){.tabs-section{position:relative;left:27px;height:53px}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
1072
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: HoverElementsComponent, isStandalone: true, selector: "simpo-hover-elements", inputs: { data: "data", index: "index", editOptions: "editOptions", isMerged: "isMerged" }, outputs: { edit: "edit" }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\" *ngIf=\"editOptions\">\r\n <div class=\"top-btn\" [ngClass]=\"{'adjust-top-btn': isMerged && index == 1}\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button class=\"add_btn_top\" (click)=\"addSection('ABOVE', $event)\">Add Section +</button>\r\n </div>\r\n <section class=\"hover-tab\" [ngClass]=\"{'adjustPosition': isMerged && index == 1}\">\r\n <div class=\"tabs-section\" [ngStyle]=\"{'z-index' : data.sectionType === 'header' ? '10000' : '1000'}\">\r\n <div class=\"edit-tab\">\r\n <button (click)=\"editSection()\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1076_52409)\">\r\n <path\r\n d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\r\n fill=\"#0267c1\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1076_52409\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"edit-text\">\r\n Edit\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"vr-line\"></div>\r\n <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'blogList'\">\r\n <button (click)=\"restyleSection($event)\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path\r\n d=\"M4.01108 19.9525C4.27565 20.0656 4.58327 19.9712 4.7378 19.7271L11.7691 8.55522C11.8829 8.3744 11.8898 8.14608 11.7868 7.95956C11.6838 7.77245 11.4869 7.65628 11.2735 7.65628H6.58085L8.32608 0.730146C8.39647 0.450341 8.25397 0.161357 7.98905 0.0474897C7.72585 -0.0657916 7.41628 0.0291694 7.26233 0.272919L0.231082 11.4448C0.117215 11.6256 0.11034 11.8539 0.213348 12.0405C0.316355 12.2276 0.513191 12.3437 0.726629 12.3437H5.41928L3.67405 19.2699C3.60366 19.5497 3.74612 19.8387 4.01108 19.9525Z\"\r\n fill=\"#0267c1\" />\r\n </svg>\r\n <span class=\"edit-text\">\r\n Restyle\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"vr-line\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\"></div>\r\n <div class=\"regenerate\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button (click)=\"changeContent($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path stroke=\"#0267c1\" stroke-linecap=\"round\" stroke-width=\"1.5\" d=\"M11 12h7m-7-8h7m-7 4h7M2 16h16\">\r\n </path>\r\n <path stroke=\"#0267c1\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\"\r\n d=\"m2 12 .85714-2.28571M8 12l-.85714-2.28571m0 0L5 4 2.85714 9.71429m4.28572 0H2.85714\"></path>\r\n </svg>\r\n <span class=\"edit-text\">Change Content</span>\r\n </button>\r\n </div>\r\n <div class=\"vr-line\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'blogList'\"></div>\r\n <div class=\"remainin-sections\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button class=\"copy\" (click)=\"duplicateSection($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path\r\n d=\"M9 2c-1.10457 0-2 .89543-2 2v8c0 1.1046.89543 2 2 2h6c1.1046 0 2-.8954 2-2V6.41421c0-.53043-.2107-1.03914-.5858-1.41421L14 2.58579C13.6249 2.21071 13.1162 2 12.5858 2H9Z\">\r\n </path>\r\n <path d=\"M3 8c0-1.10457.89543-2 2-2v10h8c0 1.1046-.8954 2-2 2H5c-1.10457 0-2-.8954-2-2V8Z\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"moveUp($event)\" [disabled]=\"index == 1\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M3.29289 9.70711c-.39052-.39053-.39052-1.02369 0-1.41422l6-6c.39053-.39052 1.02371-.39052 1.41421 0l6 6c.3905.39053.3905 1.02369 0 1.41422-.3905.39049-1.0237.39049-1.4142 0L11 5.41421V17c0 .5523-.4477 1-1 1-.55228 0-1-.4477-1-1V5.41421l-4.29289 4.2929c-.39053.39049-1.02369.39049-1.41422 0Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"moveDown($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M16.7071 10.2929c.3905.3905.3905 1.0237 0 1.4142l-6 6c-.3905.3905-1.02368.3905-1.41421 0l-6-6c-.39052-.3905-.39052-1.0237 0-1.4142.39053-.39053 1.02369-.39053 1.41422 0L9 14.5858V3c0-.55228.44772-1 1-1 .5523 0 1 .44772 1 1v11.5858l4.2929-4.2929c.3905-.39053 1.0237-.39053 1.4142 0Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n <button class=\"up-arrow\" (click)=\"deleteSection($event)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </section>\r\n <div class=\"bottom-btn\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header' && data.sectionType != 'blogList'\">\r\n <button class=\"add_btn\" (click)=\"addSection('BELOW', $event)\">Add Section +</button>\r\n </div>\r\n</mat-dialog-content>\r\n", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:30px;top:20px;height:auto}.adjustPosition{top:200px}.bottom-btn{position:absolute;top:100%;z-index:1001;border-bottom:4px solid #0267c1;width:100%}.bottom-btn .add_btn{width:140px!important;height:36px;background-color:#0267c1;border-radius:4px;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;position:absolute;top:100%;left:50%;box-shadow:#00000059 0 5px 15px}.adjust-top-btn{top:170px!important}.top-btn{position:absolute;top:0%;z-index:1001;width:100%;border-bottom:4px solid #0267c1}.top-btn .add_btn_top{top:0!important;width:140px!important;height:36px;background-color:#0267c1;border-radius:4px;position:absolute;left:50%;transform:translate(-50%,-50%);color:#fff;cursor:pointer;border:none;outline:none;z-index:1001;box-shadow:#00000059 0 5px 15px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:60px;background-color:#fff;z-index:1000}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.regenerate{margin-left:10px;display:flex;justify-content:center;align-items:center}.regenerate button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.remainin-sections{margin-left:10px;display:flex;justify-content:center;align-items:center}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}@media only screen and (max-width: 475px){.tabs-section{position:relative;left:27px;height:53px}}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
1071
1073
  }
1072
1074
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: HoverElementsComponent, decorators: [{
1073
1075
  type: Component,
@@ -1096,7 +1098,7 @@ class DeleteHoverElementComponent {
1096
1098
  this._eventService.delete.emit({ index: this.data });
1097
1099
  }
1098
1100
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: DeleteHoverElementComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
1099
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: DeleteHoverElementComponent, isStandalone: true, selector: "simpo-delete-hover-element", inputs: { index: "index", data: "data" }, outputs: { edit: "edit" }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\">\r\n <section class=\"hover-tab\">\r\n <div class=\"tabs-section\">\r\n <div class=\"edit-tab\">\r\n <button (click)=\"editSection()\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1076_52409)\">\r\n <path\r\n d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\r\n fill=\"#0267c1\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1076_52409\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"edit-text\">\r\n Edit\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"vr-line\"></div>\r\n <div class=\"remainin-sections\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\r\n <button class=\"up-arrow\" (click)=\"deleteSection()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </section>\r\n</mat-dialog-content>\r\n", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:5px;top:20px;height:auto}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:46px;background-color:#fff;z-index:1001}.remainin-sections{display:flex;justify-content:center;align-items:center;position:relative;right:6px}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
1101
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: DeleteHoverElementComponent, isStandalone: true, selector: "simpo-delete-hover-element", inputs: { index: "index", data: "data" }, outputs: { edit: "edit" }, ngImport: i0, template: "<mat-dialog-content class=\"mat-typography\">\r\n <section class=\"hover-tab\">\r\n <div class=\"tabs-section\">\r\n <div class=\"edit-tab\">\r\n <button (click)=\"editSection()\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <g clip-path=\"url(#clip0_1076_52409)\">\r\n <path\r\n d=\"M2 11.4997V13.9997H4.5L11.8733 6.62638L9.37333 4.12638L2 11.4997ZM13.8067 4.69305C14.0667 4.43305 14.0667 4.01305 13.8067 3.75305L12.2467 2.19305C11.9867 1.93305 11.5667 1.93305 11.3067 2.19305L10.0867 3.41305L12.5867 5.91305L13.8067 4.69305Z\"\r\n fill=\"#0267c1\" />\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_1076_52409\">\r\n <rect width=\"18\" height=\"18\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n <span class=\"edit-text\">\r\n Edit\r\n </span>\r\n </button>\r\n </div>\r\n <div class=\"vr-line\"></div>\r\n <div class=\"remainin-sections\" *ngIf=\"data.sectionType != 'footer' && data.sectionType != 'header'\">\r\n <button class=\"up-arrow\" (click)=\"deleteSection()\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"#434443\" viewBox=\"0 0 18 18\" width=\"18\" height=\"18\"\r\n class=\"icon w-5 h-5\" aria-hidden=\"true\">\r\n <path fill-rule=\"evenodd\"\r\n d=\"M9 2c-.37877 0-.72503.214-.89443.55279L7.38197 4H4c-.55228 0-1 .44772-1 1s.44772 1 1 1v10c0 1.1046.89543 2 2 2h8c1.1046 0 2-.8954 2-2V6c.5523 0 1-.44772 1-1s-.4477-1-1-1h-3.382l-.7236-1.44721C11.725 2.214 11.3788 2 11 2H9ZM7 8c0-.55228.44772-1 1-1s1 .44772 1 1v6c0 .5523-.44772 1-1 1s-1-.4477-1-1V8Zm5-1c-.5523 0-1 .44772-1 1v6c0 .5523.4477 1 1 1s1-.4477 1-1V8c0-.55228-.4477-1-1-1Z\"\r\n clip-rule=\"evenodd\"></path>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n </section>\r\n</mat-dialog-content>\r\n", styles: [".hover-tab{display:flex;justify-content:flex-end;align-items:center;position:absolute;right:5px;top:20px;height:auto}.edit-tab{display:flex;align-items:center;justify-content:center}.edit-tab button{border:none;outline:none;cursor:pointer;background-color:transparent;padding:0;display:flex;justify-content:center;align-items:center}.edit-text{font-size:14px;color:#0267c1;font-weight:500;position:relative;left:4px}.vr-line{border-left:1px solid #e8e8e8;height:25px;margin-left:14px}.tabs-section{width:auto;padding:15px 10px;box-shadow:#63636333 0 2px 8px;border-radius:6px;display:flex;align-items:center;height:46px;background-color:#fff;z-index:1001}.remainin-sections{display:flex;justify-content:center;align-items:center;position:relative;right:6px}.remainin-sections :is(.copy,.up-arrow){border:none;outline:none;cursor:pointer;background-color:transparent;padding:0}.remainin-sections :is(.copy:hover,.up-arrow:hover) svg{fill:#0267c1}.up-arrow{margin-left:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
1100
1102
  }
1101
1103
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: DeleteHoverElementComponent, decorators: [{
1102
1104
  type: Component,
@@ -1159,7 +1161,7 @@ class InputFieldsComponent {
1159
1161
  this.enteredValue = value;
1160
1162
  }
1161
1163
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: InputFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1162
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: InputFieldsComponent, isStandalone: true, selector: "simpo-input-fields", inputs: { feild: "feild", opacity: "opacity", bgColor: "bgColor", sectionId: "sectionId" }, usesOnChanges: true, ngImport: i0, template: "<section [ngSwitch]=\"feild.type\" class=\"mt-15\">\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'text'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"text\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'address'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"text\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'email'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"email\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'password'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"password\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'rating'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <div class=\"d-flex\">\r\n <span class=\"fa fa-star\" *ngFor=\"let _ of [].constructor(5); let idx = index\" [ngClass]=\"{'checked': idx < (ratingHoverIndex ?? feild.value) }\" (mouseenter)=\"ratingHoverIndex = idx +1\" (mouseleave)=\"ratingHoverIndex = null\" (click)=\"feild.value = idx +1\"></span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'date'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"date\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'checkbox'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <div class=\"d-flex align-items-center flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let checkbox of feild.options\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n <input type=\"checkbox\" [attr.id]=\"checkbox.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"checkbox.status\">\r\n <label [attr.for]=\"checkbox.value\" class=\"mb-0 mt-1 checkboxFont\">{{ checkbox.value }}</label>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'number'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"number\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'money'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"text\" class=\"p-2\" value=\"$\" (keydown)=\"handleMoneyInput($event)\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'desc'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <textarea class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\"></textarea>\r\n </div>\r\n <div class=\"d-flex flex-column mr-2 position-relative\" *ngSwitchCase=\"'dropdown'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n\r\n <div class=\"position-relative d-flex align-items-center\"> \r\n <input type=\"text\" readonly [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [value]=\"enteredValue\" (click)=\"selectedDropdown = feild.value\" [(ngModel)]=\"feild.inputValue\" class=\"w-100\">\r\n <mat-icon class=\"down-arrow\">{{feild.value != selectedDropdown ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}}</mat-icon>\r\n </div>\r\n <div class=\"container-list position-absolute\" [hidden]=\"feild.value != selectedDropdown\">\r\n <ng-container *ngFor=\"let option of feild.options\">\r\n <div class=\"container\" [ngClass]=\"{'container-selected': option.value == selectedDropdown}\" (click)=\"selectDropdown(option.value)\">{{ option.value }}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: ["input,textarea,select{border-radius:5px;border:none;outline:none;padding:8px 8px 8px 10px!important;font-size:large;background-color:#000;font-weight:400}.checkboxFont{font-size:16px;font-weight:400}.down-arrow{position:absolute;right:5px}.fa-star{opacity:.3;cursor:pointer;font-size:20px}input[type=checkbox]{height:18px;width:18px}.checked{opacity:1;color:#daa520}.input-field-label{font-size:16px;font-weight:400}.mt-15{margin-top:15px}.container-list{box-shadow:0 0 3px #999;background-color:#fff;border-radius:5px;padding:3px 0;font-weight:400;overflow:hidden;position:absolute;top:70px;width:100%;z-index:1}.container-list .container{cursor:pointer;padding:10px;font-size:18px}.container-list .container-selected{color:#fff;background-color:purple}.container-list .container:hover{color:#fff;background-color:purple;width:100%;font-weight:600!important}sup{color:red}\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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: i2$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
1164
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: InputFieldsComponent, isStandalone: true, selector: "simpo-input-fields", inputs: { feild: "feild", opacity: "opacity", bgColor: "bgColor", sectionId: "sectionId" }, usesOnChanges: true, ngImport: i0, template: "<section [ngSwitch]=\"feild.type\" class=\"mt-15\">\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'text'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"text\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'address'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"text\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'email'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"email\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'password'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"password\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'rating'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <div class=\"d-flex\">\r\n <span class=\"fa fa-star\" *ngFor=\"let _ of [].constructor(5); let idx = index\" [ngClass]=\"{'checked': idx < (ratingHoverIndex ?? feild.value) }\" (mouseenter)=\"ratingHoverIndex = idx +1\" (mouseleave)=\"ratingHoverIndex = null\" (click)=\"feild.value = idx +1\"></span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'date'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"date\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'checkbox'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <div class=\"d-flex align-items-center flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let checkbox of feild.options\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n <input type=\"checkbox\" [attr.id]=\"checkbox.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"checkbox.status\">\r\n <label [attr.for]=\"checkbox.value\" class=\"mb-0 mt-1 checkboxFont\">{{ checkbox.value }}</label>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'number'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"number\" class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'money'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <input type=\"text\" class=\"p-2\" value=\"$\" (keydown)=\"handleMoneyInput($event)\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\">\r\n </div>\r\n <div class=\"d-flex flex-column mr-2\" *ngSwitchCase=\"'desc'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n <textarea class=\"p-2\" [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [(ngModel)]=\"feild.inputValue\"></textarea>\r\n </div>\r\n <div class=\"d-flex flex-column mr-2 position-relative\" *ngSwitchCase=\"'dropdown'\">\r\n <label [attr.for]=\"feild.value\" [simpoColor]=\"bgColor\" [id]=\"sectionId\" class=\"input-field-label\">{{ feild.value }} <sup *ngIf=\"feild.required\">*</sup></label>\r\n\r\n <div class=\"position-relative d-flex align-items-center\"> \r\n <input type=\"text\" readonly [attr.id]=\"feild.value\" [style.background]=\"colorCode\" [style.color]=\"getTextColor\" [value]=\"enteredValue\" (click)=\"selectedDropdown = feild.value\" [(ngModel)]=\"feild.inputValue\" class=\"w-100\">\r\n <mat-icon class=\"down-arrow\">{{feild.value != selectedDropdown ? 'keyboard_arrow_down' : 'keyboard_arrow_up'}}</mat-icon>\r\n </div>\r\n <div class=\"container-list position-absolute\" [hidden]=\"feild.value != selectedDropdown\">\r\n <ng-container *ngFor=\"let option of feild.options\">\r\n <div class=\"container\" [ngClass]=\"{'container-selected': option.value == selectedDropdown}\" (click)=\"selectDropdown(option.value)\">{{ option.value }}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</section>\r\n", styles: ["input,textarea,select{border-radius:5px;border:none;outline:none;padding:8px 8px 8px 10px!important;font-size:large;background-color:#000;font-weight:400}.checkboxFont{font-size:16px;font-weight:400}.down-arrow{position:absolute;right:5px}.fa-star{opacity:.3;cursor:pointer;font-size:20px}input[type=checkbox]{height:18px;width:18px}.checked{opacity:1;color:#daa520}.input-field-label{font-size:16px;font-weight:400}.mt-15{margin-top:15px}.container-list{box-shadow:0 0 3px #999;background-color:#fff;border-radius:5px;padding:3px 0;font-weight:400;overflow:hidden;position:absolute;top:70px;width:100%;z-index:1}.container-list .container{cursor:pointer;padding:10px;font-size:18px}.container-list .container-selected{color:#fff;background-color:purple}.container-list .container:hover{color:#fff;background-color:purple;width:100%;font-weight:600!important}sup{color:red}\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
1163
1165
  }
1164
1166
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: InputFieldsComponent, decorators: [{
1165
1167
  type: Component,
@@ -1917,7 +1919,7 @@ class TextSectionComponent extends BaseSection {
1917
1919
  this._eventService.editSection.emit({ data: this.data });
1918
1920
  }, 100);
1919
1921
  }
1920
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextSectionComponent, deps: [{ token: i2$2.MatDialog }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
1922
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: TextSectionComponent, deps: [{ token: i3.MatDialog }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
1921
1923
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: TextSectionComponent, isStandalone: true, selector: "simpo-text-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"main-section\" [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"body-section\">\r\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element>\r\n </div>\r\n <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\"\r\n [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\" [color]=\"styles?.background?.accentColor\" [sectionId]=\"data?.id\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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</div>\r\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center}}\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: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: TextElementComponent, selector: "simpo-text-element", inputs: ["textData", "textLabel"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type:
1922
1924
  //directive
1923
1925
  AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
@@ -1949,7 +1951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
1949
1951
  PositionLayoutDirectiveDirective,
1950
1952
  TextBackgroundDirectiveDirective
1951
1953
  ], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" (click)=\"editSection()\">\r\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"main-section\" [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"body-section\">\r\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element>\r\n </div>\r\n <div class=\"d-flex gap-2 d-md-flex mt-15\" *ngIf=\"data?.action?.display\"\r\n [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\" [color]=\"styles?.background?.accentColor\" [sectionId]=\"data?.id\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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</div>\r\n", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center}}\n"] }]
1952
- }], ctorParameters: () => [{ type: i2$2.MatDialog }, { type: EventsService }], propDecorators: { data: [{
1954
+ }], ctorParameters: () => [{ type: i3.MatDialog }, { type: EventsService }], propDecorators: { data: [{
1953
1955
  type: Input
1954
1956
  }], index: [{
1955
1957
  type: Input
@@ -2984,6 +2986,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
2984
2986
  }] } });
2985
2987
 
2986
2988
  var orderedItems$1 = [
2989
+ {
2990
+ itemId: "1ef50089-2cf0-6bdf-8ea9-b51e0a912f33",
2991
+ businessId: "21",
2992
+ itemName: "Anime T-Shirt",
2993
+ brandName: "Excee",
2994
+ imgUrl: "https://dev-beeos.s3.amazonaws.com/library-media/291611c1707983189501product-details-2.jpg.jpg",
2995
+ price: 120,
2996
+ itemTax: 10,
2997
+ quantity: 2,
2998
+ discountedPrice: 20,
2999
+ taxAfterDiscount: 10
3000
+ }
2987
3001
  ];
2988
3002
  var cartType$1 = "CART";
2989
3003
  var billdetails$1 = {
@@ -3028,7 +3042,8 @@ var user = {
3028
3042
  },
3029
3043
  businessId: "",
3030
3044
  gender: "",
3031
- id: "",
3045
+ userId: "",
3046
+ profilePic: "",
3032
3047
  contact: {
3033
3048
  countryCode: "",
3034
3049
  email: "",
@@ -3036,7 +3051,7 @@ var user = {
3036
3051
  name: ""
3037
3052
  }
3038
3053
  };
3039
- var UserDetails = {
3054
+ var UserInfo = {
3040
3055
  user: user
3041
3056
  };
3042
3057
 
@@ -3060,10 +3075,9 @@ class RestService {
3060
3075
  this.environmentTypeSubscriber?.unsubscribe();
3061
3076
  }
3062
3077
  getFeaturedProduct(collectionId) {
3063
- let subIndustryId = JSON.parse(localStorage.getItem("bDetails") ?? "{}")?.subIndustryId;
3078
+ let subIndustryId = localStorage.getItem("subindustryId");
3064
3079
  if (!subIndustryId)
3065
- subIndustryId = JSON.parse(localStorage.getItem("websiteData") ?? "{}")?.subIndustryId;
3066
- subIndustryId = "1eecee8d-efba-62f8-b7b5-b9742fceb17f";
3080
+ subIndustryId = "1eecee8d-efba-62f8-b7b5-b9742fceb17f";
3067
3081
  return this.http.get(this.BASE_URL + `ecommerce/product/collection/id?collectionId=${collectionId || ''}&subIndustryId=${subIndustryId || ''}`).pipe(map((response) => response.data?.map((product) => new Product(product))));
3068
3082
  }
3069
3083
  getProductDetails(productId = null) {
@@ -3104,6 +3118,15 @@ class RestService {
3104
3118
  };
3105
3119
  return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload);
3106
3120
  }
3121
+ getProductByCategoryId(categoryId) {
3122
+ const payload = {
3123
+ "businessId": localStorage.getItem("bId"),
3124
+ "categoryId": [categoryId],
3125
+ "pageNo": 0,
3126
+ "pageSize": 10
3127
+ };
3128
+ return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload);
3129
+ }
3107
3130
  generateOTP(mobile, countryCode) {
3108
3131
  const businessId = localStorage.getItem("bId") ?? "";
3109
3132
  return this.http.post(this.BASE_URL + `ecommerce/user/otp/trigger?mobile=${mobile}&countryCode=${countryCode}&businessId=${businessId}`, null);
@@ -3112,6 +3135,10 @@ class RestService {
3112
3135
  const businessId = localStorage.getItem("bId") ?? "";
3113
3136
  return this.http.put(this.BASE_URL + `ecommerce/user/authenticate?mobile=${mobile}&otp=${otp}&businessId=${businessId}`, null);
3114
3137
  }
3138
+ resendOTP(mobile, countryCode) {
3139
+ const businessId = localStorage.getItem("bId") ?? "";
3140
+ return this.http.post(this.BASE_URL + `ecommerce/user/resend?mobile=${mobile}&countryCode=${countryCode}&businessId=${businessId}`, null);
3141
+ }
3115
3142
  addItemToDB(userCart) {
3116
3143
  return this.http.post(this.BASE_URL + `ecommerce/order/cart`, userCart);
3117
3144
  }
@@ -3121,8 +3148,24 @@ class RestService {
3121
3148
  placeOrder(cartId) {
3122
3149
  return this.http.post(this.BASE_URL + `ecommerce/order/order?cartId=${cartId}`, null);
3123
3150
  }
3151
+ getUserInfo(userId) {
3152
+ return this.http.put(this.BASE_URL + `ecommerce/user/get/user?userId=${userId}`, null);
3153
+ }
3154
+ addUserAddress(user) {
3155
+ return this.http.put(this.BASE_URL + `ecommerce/user/update/user`, user);
3156
+ }
3124
3157
  toggleItemCartToFav() {
3125
3158
  }
3159
+ // Payment
3160
+ createPaymentToken(payload) {
3161
+ return this.http.post(this.BASE_URL + `ecommerce/payment/order`, payload);
3162
+ }
3163
+ refundPayment(orderId, payload) {
3164
+ return this.http.post(this.BASE_URL + `ecommerce/payment/refund/bank?orderId=${orderId}`, payload);
3165
+ }
3166
+ checkPaymentStatus(payload) {
3167
+ return this.http.post(this.BASE_URL + `ecommerce/payment/status`, payload);
3168
+ }
3126
3169
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RestService, deps: [{ token: i1$1.HttpClient }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
3127
3170
  static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RestService, providedIn: 'root' }); }
3128
3171
  }
@@ -3134,9 +3177,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
3134
3177
  }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: EventsService }] });
3135
3178
 
3136
3179
  class AuthenticateUserComponent {
3137
- constructor(matData, restService, dialogRef) {
3180
+ constructor(matData, restService, router, dialogRef) {
3138
3181
  this.matData = matData;
3139
3182
  this.restService = restService;
3183
+ this.router = router;
3140
3184
  this.dialogRef = dialogRef;
3141
3185
  // @Input() index? : number;
3142
3186
  // @Input() edit? : boolean;
@@ -3172,19 +3216,23 @@ class AuthenticateUserComponent {
3172
3216
  verifyOTP() {
3173
3217
  this.restService.verifyOTP(this.mobile ?? "", this.otpString).subscribe((response) => {
3174
3218
  // localStorage.setItem("userId", response.userId);
3175
- UserDetails.user = response.data;
3219
+ UserInfo.user = response.data;
3176
3220
  if (this.dialogRef)
3177
3221
  this.dialogRef.close();
3222
+ else
3223
+ this.router.navigate(['/']);
3178
3224
  });
3179
3225
  }
3180
3226
  resendOTP() {
3181
- // this.restService.re
3227
+ this.restService.resendOTP(this.mobile ?? "", this.countryCode ?? "").subscribe((response) => {
3228
+ this.otpString = "";
3229
+ });
3182
3230
  }
3183
3231
  get isMobile() {
3184
3232
  return window.innerWidth <= 475;
3185
3233
  }
3186
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AuthenticateUserComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: RestService }, { token: i2$2.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
3187
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", responseData: "responseData" }, ngImport: i0, template: "<div [style.height.vh]=\"isMobile ? '90' : ''\">\r\n <ng-container [ngSwitch]=\"screen\">\r\n <section style=\"padding: 15px;\"\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\">Excee Fashion</h5>\r\n <h2 class=\"text-center\">Welcome</h2>\r\n <p class=\"text-center\">Log or Signup in to your account</p>\r\n <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n <p class=\"text-center\">You will receive an SMS verification</p>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"generateOTP()\">Continue</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 <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\" [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n <h2 class=\"text-center\">Verify OTP</h2>\r\n <p class=\"text-center\">Enter the 6-digit that we 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\" (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\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"verifyOTP()\">Continue</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\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n </section>\r\n </ng-container>\r\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}.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 screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:absolute;bottom:50px;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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: i2$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
3234
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AuthenticateUserComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: RestService }, { token: i2$3.Router }, { token: i3.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
3235
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data", responseData: "responseData" }, ngImport: i0, template: "<div [style.height.vh]=\"isMobile ? '90' : ''\">\r\n <ng-container [ngSwitch]=\"screen\">\r\n <section style=\"padding: 15px;\"\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\">Excee Fashion</h5>\r\n <h2 class=\"text-center\">Welcome</h2>\r\n <p class=\"text-center\">Log or Signup in to your account</p>\r\n <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n <p class=\"text-center\">You will receive an SMS verification</p>\r\n\r\n <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"generateOTP()\">Continue</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 <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\" [ngClass]=\"{'fullSection': isMobile}\">\r\n <h5 class=\"text-center onlyDesktop\">Excee Fashion</h5>\r\n <h2 class=\"text-center\">Verify OTP</h2>\r\n <p class=\"text-center\">Enter the 6-digit that we 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\" (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\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"verifyOTP()\">Continue</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\" (click)=\"goBack()\">\r\n <mat-icon>keyboard_backspace</mat-icon>\r\n </div>\r\n </section>\r\n </ng-container>\r\n</div>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}.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 screen and (max-width: 475px){.onlyDesktop{display:none}.text-center{text-align:left!important}button,input{width:100%!important}.fullSection{justify-content:start!important}.action-btn{position:absolute;bottom:50px;width:95%}.action-btn .text-center{text-align:center!important}.otpContainer{margin-top:20px;position:relative;right:10px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
3188
3236
  }
3189
3237
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AuthenticateUserComponent, decorators: [{
3190
3238
  type: Component,
@@ -3199,7 +3247,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
3199
3247
  }, {
3200
3248
  type: Inject,
3201
3249
  args: [MAT_DIALOG_DATA]
3202
- }] }, { type: RestService }, { type: i2$2.MatDialogRef, decorators: [{
3250
+ }] }, { type: RestService }, { type: i2$3.Router }, { type: i3.MatDialogRef, decorators: [{
3203
3251
  type: Optional
3204
3252
  }] }], propDecorators: { data: [{
3205
3253
  type: Input
@@ -3228,7 +3276,7 @@ class NavbarSectionComponent {
3228
3276
  this.router.navigate(['/whislist']);
3229
3277
  }
3230
3278
  goToAccount() {
3231
- if (UserDetails.user.id.length > 0) {
3279
+ if (UserInfo.user.userId?.length > 0) {
3232
3280
  this.router.navigate(['/profile']);
3233
3281
  }
3234
3282
  else {
@@ -3341,8 +3389,8 @@ class NavbarSectionComponent {
3341
3389
  object.forEach((key) => keys.push(Object.values(key)));
3342
3390
  return [...new Set(keys)];
3343
3391
  }
3344
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }, { token: i2$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
3345
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n <div class=\"container-fluid position-relative \">\r\n <div class=\"w-50 left-logo-text d-flex\">\r\n <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n <li *ngFor=\"let value of getValues(content?.ecomLinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n <i class=\"fa fa-search mx-2\" aria-hidden=\"true\"></i>\r\n <mat-icon class=\"mx-2\">add_shopping_cart</mat-icon>\r\n <mat-icon class=\"mx-2\">person_outline</mat-icon>\r\n </div>\r\n <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <hr>\r\n <hr>\r\n <hr>\r\n </button>\r\n </div>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\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]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n <div class=\"inner-height p-4\">\r\n <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title-row\">\r\n <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\"\r\n *ngIf=\"content?.logo?.isImage\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n </div>\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n <div class=\"d-flex flex-column gap-4 w-100\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\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]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-4\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n <div class=\"input-group\">\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)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon>favorite_border</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Favourite</span>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon>add_shopping_cart</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <mat-icon>person_outline</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Account</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </nav>\r\n </div>\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>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;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-right:25px}.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}.mat-icon{color:#000}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
3392
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
3393
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n <div class=\"container-fluid position-relative \">\r\n <div class=\"w-50 left-logo-text d-flex\">\r\n <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n <li *ngFor=\"let value of getValues(content?.ecomLinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n <i class=\"fa fa-search mx-2\" aria-hidden=\"true\"></i>\r\n <mat-icon class=\"mx-2\">add_shopping_cart</mat-icon>\r\n <mat-icon class=\"mx-2\">person_outline</mat-icon>\r\n </div>\r\n <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <hr>\r\n <hr>\r\n <hr>\r\n </button>\r\n </div>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\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]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n <div class=\"inner-height p-4\">\r\n <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title-row\">\r\n <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\"\r\n *ngIf=\"content?.logo?.isImage\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n </div>\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n <div class=\"d-flex flex-column gap-4 w-100\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\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]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-4\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n <div class=\"input-group\">\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)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon>favorite_border</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Favourite</span>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon>add_shopping_cart</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <mat-icon>person_outline</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Account</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </nav>\r\n </div>\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>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;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-right:25px}.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}.mat-icon{color:#000}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
3346
3394
  }
3347
3395
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarSectionComponent, decorators: [{
3348
3396
  type: Component,
@@ -3373,8 +3421,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
3373
3421
  PositionLayoutDirectiveDirective,
3374
3422
  TextBackgroundDirectiveDirective,
3375
3423
  ColorDirective
3376
- ], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n <div class=\"container-fluid position-relative \">\r\n <div class=\"w-50 left-logo-text d-flex\">\r\n <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n <li *ngFor=\"let value of getValues(content?.ecomLinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n <i class=\"fa fa-search mx-2\" aria-hidden=\"true\"></i>\r\n <mat-icon class=\"mx-2\">add_shopping_cart</mat-icon>\r\n <mat-icon class=\"mx-2\">person_outline</mat-icon>\r\n </div>\r\n <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <hr>\r\n <hr>\r\n <hr>\r\n </button>\r\n </div>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\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]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n <div class=\"inner-height p-4\">\r\n <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title-row\">\r\n <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\"\r\n *ngIf=\"content?.logo?.isImage\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n </div>\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n <div class=\"d-flex flex-column gap-4 w-100\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\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]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-4\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n <div class=\"input-group\">\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)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon>favorite_border</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Favourite</span>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon>add_shopping_cart</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <mat-icon>person_outline</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Account</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </nav>\r\n </div>\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>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;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-right:25px}.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}.mat-icon{color:#000}\n"] }]
3377
- }], ctorParameters: () => [{ type: EventsService }, { type: i2$4.Router }, { type: i2$4.ActivatedRoute }, { type: i2$2.MatDialog }], propDecorators: { data: [{
3424
+ ], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n <div class=\"container-fluid position-relative \">\r\n <div class=\"w-50 left-logo-text d-flex\">\r\n <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n <li *ngFor=\"let value of getValues(content?.ecomLinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n </ul>\r\n </ng-container>\r\n </div>\r\n\r\n </div>\r\n <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n <i class=\"fa fa-search mx-2\" aria-hidden=\"true\"></i>\r\n <mat-icon class=\"mx-2\">add_shopping_cart</mat-icon>\r\n <mat-icon class=\"mx-2\">person_outline</mat-icon>\r\n </div>\r\n <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n <hr>\r\n <hr>\r\n <hr>\r\n </button>\r\n </div>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"navbar-nav align-items-center\">\r\n <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\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]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n <div class=\"inner-height p-4\">\r\n <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n <div class=\"d-flex flex-column w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"title-row\">\r\n <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\"\r\n *ngIf=\"content?.logo?.isImage\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n loading=\"lazy\">\r\n </div>\r\n\r\n </div>\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n <div class=\"d-flex flex-column gap-4 w-100\">\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex flex-column\">\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]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n <div style=\"position: relative;margin-right: 10px;\">\r\n <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex mt-4\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n <div class=\"input-group\">\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)=\"searchProducts()\">\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon>favorite_border</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Favourite</span>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon>add_shopping_cart</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <mat-icon>person_outline</mat-icon>\r\n <span class=\"text-dark fw-normal fs-6\">Account</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </nav>\r\n </div>\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>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;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-right:25px}.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}.mat-icon{color:#000}\n"] }]
3425
+ }], ctorParameters: () => [{ type: EventsService }, { type: i2$3.Router }, { type: i2$3.ActivatedRoute }, { type: i3.MatDialog }], propDecorators: { data: [{
3378
3426
  type: Input
3379
3427
  }], nextComponent: [{
3380
3428
  type: Input
@@ -3467,7 +3515,7 @@ class ContactUsComponent extends BaseSection {
3467
3515
  canShowContactField(field) {
3468
3516
  return Object.hasOwn(field, "status") ? field.status : true;
3469
3517
  }
3470
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ContactUsComponent, deps: [{ token: EventsService }, { token: PLATFORM_ID }, { token: i2$5.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
3518
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ContactUsComponent, deps: [{ token: EventsService }, { token: PLATFORM_ID }, { token: i2$4.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
3471
3519
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "screenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div *ngIf=\"content?.image?.showImage === false\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly\" style=\"gap: 3rem;\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 pt-5\">\r\n <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\" >\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\" *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"w-100\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button>\r\n </div>\r\n <!-- <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button }}</button> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage === true\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"g-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n <img [src]=\"content?.image?.url\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [simpoCorner]=\"styles?.corners\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n class=\"d-block mx-lg-auto img-fluid h-100\" [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\"\r\n loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\" [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\">\r\n <div class=\"d-flex flex-column\">\r\n <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\" [feild]=\"feild\"\r\n [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"w-100\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"buttonClick()\">{{ content?.contactField?.button\r\n }}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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</div>\r\n", styles: [".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}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column-reverse}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { 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: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: InputFieldsComponent, selector: "simpo-input-fields", inputs: ["feild", "opacity", "bgColor", "sectionId"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "directive", type:
3472
3520
  //directive
3473
3521
  AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }] }); }
@@ -3503,7 +3551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
3503
3551
  }], ctorParameters: () => [{ type: EventsService }, { type: Object, decorators: [{
3504
3552
  type: Inject,
3505
3553
  args: [PLATFORM_ID]
3506
- }] }, { type: i2$5.MatSnackBar }], propDecorators: { data: [{
3554
+ }] }, { type: i2$4.MatSnackBar }], propDecorators: { data: [{
3507
3555
  type: Input
3508
3556
  }], index: [{
3509
3557
  type: Input
@@ -3518,7 +3566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
3518
3566
 
3519
3567
  class SkeletonLoaderSectionComponent {
3520
3568
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SkeletonLoaderSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
3521
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: SkeletonLoaderSectionComponent, isStandalone: true, selector: "simpo-skeleton-loader-section", inputs: { sectionType: "sectionType" }, ngImport: i0, template: "<div class=\"p-15\" style=\"width: 100%;\">\r\n <div class=\"skeleton-parent\"\r\n *ngIf=\"sectionType === 'service' || sectionType === 'teammember' || sectionType === 'imagegrid'\">\r\n <div class=\"skeleton\">\r\n <ngx-skeleton-loader 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 class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton\">\r\n <ngx-skeleton-loader 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 class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton\">\r\n <ngx-skeleton-loader 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 class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"banner-skeleton\" *ngIf=\"sectionType === 'banner' || sectionType === 'text_image'\">\r\n <div style=\"width: 50%;\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '90%',\r\n height: '400px',\r\n 'border-radius': '10px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"second-section-wrapper\" style=\"width: 50%;padding-top: 50px;\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div style=\"margin-top: 50px;\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '130px',\r\n height: '45px',\r\n 'border-radius': '10px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-skeleton\" *ngIf=\"sectionType === 'text'\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div style=\"margin-top: 50px;\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '130px',\r\n height: '45px',\r\n 'border-radius': '10px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n\r\n <div class=\"testimonial-skeleton\" *ngIf=\"sectionType === 'testimonial'\">\r\n <div>\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{ width: '80px', height: '80px' }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\" style=\"margin-top: 20px;\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div style=\"margin-top: 50px;\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '130px',\r\n height: '45px',\r\n 'border-radius': '10px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n\r\n <div class=\"image-skeleton\"\r\n *ngIf=\"sectionType === 'imageCarousel' || sectionType === 'image' || sectionType === 'contact us'\">\r\n <ngx-skeleton-loader count=\"1\" [theme]=\"{\r\n 'border-radius': '5px',\r\n height: '50vh',\r\n width: '100%'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n</div>\r\n", styles: [".main-section{position:relative;left:25px}.p-15{padding:15px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border:1px solid #e5e7eb;width:33.33%;border-radius:10px}.banner-skeleton{display:flex;gap:10px}.text-skeleton,.testimonial-skeleton{text-align:center}.image-skeleton{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2$6.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
3569
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: SkeletonLoaderSectionComponent, isStandalone: true, selector: "simpo-skeleton-loader-section", inputs: { sectionType: "sectionType" }, ngImport: i0, template: "<div class=\"p-15\" style=\"width: 100%;\">\r\n <div class=\"skeleton-parent\"\r\n *ngIf=\"sectionType === 'service' || sectionType === 'teammember' || sectionType === 'imagegrid'\">\r\n <div class=\"skeleton\">\r\n <ngx-skeleton-loader 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 class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton\">\r\n <ngx-skeleton-loader 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 class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"skeleton\">\r\n <ngx-skeleton-loader 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 class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"banner-skeleton\" *ngIf=\"sectionType === 'banner' || sectionType === 'text_image'\">\r\n <div style=\"width: 50%;\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '90%',\r\n height: '400px',\r\n 'border-radius': '10px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"second-section-wrapper\" style=\"width: 50%;padding-top: 50px;\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div style=\"margin-top: 50px;\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '130px',\r\n height: '45px',\r\n 'border-radius': '10px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"text-skeleton\" *ngIf=\"sectionType === 'text'\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div style=\"margin-top: 50px;\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '130px',\r\n height: '45px',\r\n 'border-radius': '10px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n\r\n <div class=\"testimonial-skeleton\" *ngIf=\"sectionType === 'testimonial'\">\r\n <div>\r\n <ngx-skeleton-loader appearance=\"circle\" [theme]=\"{ width: '80px', height: '80px' }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\" style=\"margin-top: 20px;\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '80%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div style=\"margin-top: 50px;\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '130px',\r\n height: '45px',\r\n 'border-radius': '10px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n\r\n <div class=\"image-skeleton\"\r\n *ngIf=\"sectionType === 'imageCarousel' || sectionType === 'image' || sectionType === 'contact us'\">\r\n <ngx-skeleton-loader count=\"1\" [theme]=\"{\r\n 'border-radius': '5px',\r\n height: '50vh',\r\n width: '100%'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n</div>\r\n", styles: [".main-section{position:relative;left:25px}.p-15{padding:15px}.wrapper{width:100%;flex:1}.second-section-wrapper{width:100%;height:auto;flex:1}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border:1px solid #e5e7eb;width:33.33%;border-radius:10px}.banner-skeleton{display:flex;gap:10px}.text-skeleton,.testimonial-skeleton{text-align:center}.image-skeleton{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2$5.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }] }); }
3522
3570
  }
3523
3571
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: SkeletonLoaderSectionComponent, decorators: [{
3524
3572
  type: Component,
@@ -3926,7 +3974,7 @@ class RecentBlogPostSectionComponent extends BaseSection {
3926
3974
  }, 100);
3927
3975
  }
3928
3976
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RecentBlogPostSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
3929
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: RecentBlogPostSectionComponent, isStandalone: true, selector: "simpo-recent-blog-post-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", responseData: "responseData" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [ngStyle]=\"{'width' : (responseData.length || 0) == 0 ? '100%' : ''}\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n <div class=\"row\">\r\n <div (click)=\"getBlogById(content.id)\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n class=\"individual-cards\"\r\n *ngFor=\"let content of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\">\r\n <div class=\"image\">\r\n <img [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid h-100\" alt=\"\" *ngIf=\"content.img\"\r\n loading=\"lazy\">\r\n <img [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium title mt-4\">\r\n {{content.postTitle}}\r\n </div>\r\n <div class=\"body-large adate mt-3\">\r\n {{content.createdTimeStamp | date:'EEEE, MMM, d, y'}}\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"responseData?.length == 0\" class=\"row\">\r\n <div class=\"no-blog-post\">\r\n <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\r\n </div>\r\n <div class=\"skeleton\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n <ngx-skeleton-loader 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 class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-section mt-3rem\">\r\n <button class=\"button\" (click)=\"openBlogList()\" simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\"\r\n [buttonStyle]=\"buttonData?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\">{{buttonData?.content?.label}}</button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.individual-cards{padding-bottom:30px}.individual-cards img{width:100%;height:37vh}.title{font-weight:500}.mt-3rem{margin-top:3rem}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2$6.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"] }] }); }
3977
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: RecentBlogPostSectionComponent, isStandalone: true, selector: "simpo-recent-blog-post-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", responseData: "responseData" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" (click)=\"editSection()\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [ngStyle]=\"{'width' : (responseData.length || 0) == 0 ? '100%' : ''}\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value\"></div>\r\n </div>\r\n <div class=\"row\">\r\n <div (click)=\"getBlogById(content.id)\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n class=\"individual-cards\"\r\n *ngFor=\"let content of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\">\r\n <div class=\"image\">\r\n <img [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid h-100\" alt=\"\" *ngIf=\"content.img\"\r\n loading=\"lazy\">\r\n <img [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\"\r\n loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-medium title mt-4\">\r\n {{content.postTitle}}\r\n </div>\r\n <div class=\"body-large adate mt-3\">\r\n {{content.createdTimeStamp | date:'EEEE, MMM, d, y'}}\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"responseData?.length == 0\" class=\"row\">\r\n <div class=\"no-blog-post\">\r\n <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\r\n </div>\r\n <div class=\"skeleton\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n <ngx-skeleton-loader 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 class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-section mt-3rem\">\r\n <button class=\"button\" (click)=\"openBlogList()\" simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\"\r\n [buttonStyle]=\"buttonData?.styles\"\r\n [color]=\"data?.styles?.background?.accentColor\">{{buttonData?.content?.label}}</button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.individual-cards{padding-bottom:30px}.individual-cards img{width:100%;height:37vh}.title{font-weight:500}.mt-3rem{margin-top:3rem}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i2$5.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"] }] }); }
3930
3978
  }
3931
3979
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RecentBlogPostSectionComponent, decorators: [{
3932
3980
  type: Component,
@@ -4666,7 +4714,9 @@ class CartService {
4666
4714
  this.restService.addItemToDB(UserFavourite).subscribe((response) => { });
4667
4715
  }
4668
4716
  storeDBToJSON() {
4669
- const userId = UserDetails.user.id;
4717
+ const userId = UserInfo.user?.userId;
4718
+ if (!userId)
4719
+ return;
4670
4720
  this.restService.getUserItems(userId, "CART").subscribe((response) => {
4671
4721
  UserCart.orderedItems = response.data.orderedItems;
4672
4722
  UserCart.billdetails = response.data.billdetails;
@@ -4696,6 +4746,7 @@ class FeaturedProductsComponent extends BaseSection {
4696
4746
  this.restService = restService;
4697
4747
  this.router = router;
4698
4748
  this.cartService = cartService;
4749
+ this.isRelatedProduct = false;
4699
4750
  this.edit = true;
4700
4751
  this._eventSubscriber = null;
4701
4752
  this.screenWidth = 0;
@@ -4710,7 +4761,9 @@ class FeaturedProductsComponent extends BaseSection {
4710
4761
  this.content = this.data?.content;
4711
4762
  this.styles = this.data?.styles;
4712
4763
  this.button = this.data?.action.buttons[0];
4713
- this.getFeatureProduct();
4764
+ if (this.isRelatedProduct) {
4765
+ this.getFeatureProduct();
4766
+ }
4714
4767
  this._eventSubscriber = this._eventService.featureCollectionList.subscribe((response) => {
4715
4768
  this.getFeatureProduct();
4716
4769
  });
@@ -4761,8 +4814,8 @@ class FeaturedProductsComponent extends BaseSection {
4761
4814
  element?.classList.remove('transition-preivew');
4762
4815
  }, 50);
4763
4816
  }
4764
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$4.Router }, { token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
4765
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" >\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n [style.width]=\"getProductWidth()\">\r\n <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n </div>\r\n <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\r\n </div>\r\n <div class=\"mt-15\">\r\n <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n {{product.name}}</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n &#8377;\r\n {{product.price.sellingPrice}}\r\n </div>\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'ADD')\" *ngIf=\"!isItemFav(product)\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'REMOVE')\" *ngIf=\"isItemFav(product)\">favorite</mat-icon>\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity\" (click)=\"addItemToCart(product, 'ADD')\">{{content?.button}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\">\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 </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.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%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.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}\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: "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"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type:
4817
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$3.Router }, { token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
4818
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" >\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\" class=\"product\"\r\n [style.width]=\"getProductWidth()\">\r\n <div *ngIf=\"!(product.itemImages.length > 0 && product.itemImages[0].imgUrl)\" class=\"default-image\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n </div>\r\n <div *ngIf=\"product.itemImages.length > 0 && product.itemImages[0].imgUrl\"(click)=\"proceedToProductDesc(product.itemId)\">\r\n <img [id]=\"'preview_'+idx\" [src]=\"product.itemImages[product.prviewIdx]?.imgUrl\" alt=\"\" class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\" (mouseleave)=\"product.prviewIdx = 0\">\r\n </div>\r\n <div class=\"mt-15\">\r\n <div class=\"product-name heading-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n {{product.name}}</div>\r\n <div class=\"d-flex justify-content-between\">\r\n <div class=\"price body-large\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\">\r\n &#8377;\r\n {{product.price.sellingPrice}}\r\n </div>\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'ADD')\" *ngIf=\"!isItemFav(product)\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"toggleItemToFav(product, 'REMOVE')\" *ngIf=\"isItemFav(product)\">favorite</mat-icon>\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" *ngIf=\"!product.quantity\" (click)=\"addItemToCart(product, 'ADD')\">{{content?.button}}</button>\r\n <div class=\"quantity\" *ngIf=\"product.quantity\">\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 </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px}.add-product-button{width:20%}.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%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}}.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}\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: "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"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type:
4766
4819
  //directive
4767
4820
  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: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
4768
4821
  }
@@ -4787,12 +4840,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
4787
4840
  }], ctorParameters: () => [{ type: Object, decorators: [{
4788
4841
  type: Inject,
4789
4842
  args: [PLATFORM_ID]
4790
- }] }, { type: EventsService }, { type: RestService }, { type: i2$4.Router }, { type: CartService }], propDecorators: { data: [{
4843
+ }] }, { type: EventsService }, { type: RestService }, { type: i2$3.Router }, { type: CartService }], propDecorators: { data: [{
4791
4844
  type: Input
4792
4845
  }], responseData: [{
4793
4846
  type: Input
4794
4847
  }], index: [{
4795
4848
  type: Input
4849
+ }], isRelatedProduct: [{
4850
+ type: Input
4796
4851
  }], delete: [{
4797
4852
  type: Input
4798
4853
  }], getScreenSize: [{
@@ -4825,7 +4880,7 @@ class FeaturedCategoryComponent extends BaseSection {
4825
4880
  this.responseData = response.filter((category) => category.featuredCollection || true);
4826
4881
  });
4827
4882
  }
4828
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FeaturedCategoryComponent, deps: [{ token: PLATFORM_ID }, { token: i2$4.Router }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
4883
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: FeaturedCategoryComponent, deps: [{ token: PLATFORM_ID }, { token: i2$3.Router }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
4829
4884
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: FeaturedCategoryComponent, isStandalone: true, selector: "simpo-featured-category", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"\r\n [simpoLayout]=\"styles?.layout\">\r\n <div [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\"\r\n [simpoAnimation]=\"styles?.animation\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [innerHTML]=\"item.value\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n </div>\r\n </div>\r\n <img src=\"https://dev-beeos.s3.amazonaws.com/library-media/714126c1707378935732span.png\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <div class=\"category-parent\">\r\n <div *ngFor=\"let data of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]\" (click)=\"redirectToListPage(data.categoryName)\">\r\n <img [src]=\"data.imgUrl[0] ?? 'https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg'\" alt=\"\" class=\"category-image\">\r\n <div class=\"category-name body-large\">{{data.categoryName}}</div>\r\n </div>\r\n </div>\r\n </div>\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", styles: [".mt-15{margin-top:15px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.category-parent{display:flex;margin-top:25px;gap:25px;overflow-x:scroll;justify-content:center;cursor:pointer}.category-image{height:230px;width:230px;border-radius:100%;margin-bottom:15px}.category-parent::-webkit-scrollbar{display:none}.span{width:141px;height:15px}.category-name{color:#222;font-size:16px;line-height:normal;font-weight:600}@media screen and (max-width : 475px){.main-container{padding-left:10px;padding-right:10px}.category-image{height:75px;width:75px}.header{gap:7px}.category-parent{gap:15px;margin-top:15px;padding-left:0!important;padding-right:0!important}.span{width:70.5px;height:7.5px}.category-name{font-size:12px}}\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: "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"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
4830
4885
  //directive
4831
4886
  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: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
@@ -4848,7 +4903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
4848
4903
  }], ctorParameters: () => [{ type: Object, decorators: [{
4849
4904
  type: Inject,
4850
4905
  args: [PLATFORM_ID]
4851
- }] }, { type: i2$4.Router }, { type: RestService }], propDecorators: { data: [{
4906
+ }] }, { type: i2$3.Router }, { type: RestService }], propDecorators: { data: [{
4852
4907
  type: Input
4853
4908
  }], responseData: [{
4854
4909
  type: Input
@@ -4872,6 +4927,7 @@ class ProductDescComponent extends BaseSection {
4872
4927
  this.activatedRoute = activatedRoute;
4873
4928
  this.restService = restService;
4874
4929
  this.cartService = cartService;
4930
+ this.relatedProductData = [];
4875
4931
  if (isPlatformBrowser(this.platformId)) {
4876
4932
  this.getScreenSize();
4877
4933
  }
@@ -4881,6 +4937,7 @@ class ProductDescComponent extends BaseSection {
4881
4937
  this.currentImg = this.responseData?.itemImages[0]?.imgUrl;
4882
4938
  this.button = this.data?.action?.buttons[0];
4883
4939
  this.buttonId = (this.data ? this.data.id : '') + (this.button ? this.button.id : '');
4940
+ this.getProductByCategory();
4884
4941
  this.activatedRoute.queryParams.subscribe((qParam) => {
4885
4942
  const productId = qParam["id"];
4886
4943
  if (productId) {
@@ -4889,6 +4946,7 @@ class ProductDescComponent extends BaseSection {
4889
4946
  if (this.responseData) {
4890
4947
  this.responseData.quantity = this.cartService.getItemQuantity(this.responseData?.itemId);
4891
4948
  this.currentImg = this.responseData?.itemImages[0].imgUrl;
4949
+ this.getProductByCategory();
4892
4950
  }
4893
4951
  });
4894
4952
  }
@@ -4927,14 +4985,23 @@ class ProductDescComponent extends BaseSection {
4927
4985
  get isItemAsFavorite() {
4928
4986
  return this.cartService.getIsItemPresent(this.responseData?.itemId, "FAVOURITE");
4929
4987
  }
4930
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }, { token: RestService }, { token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
4931
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <img [src]=\"currentImg\" alt=\"\" *ngIf=\"currentImg\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!currentImg\">\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <div class=\"heading-large\">{{responseData?.name}}</div>\r\n <div class=\"price\">&#8377; {{responseData?.price?.sellingPrice}}</div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\">{{responseData.brief}}</div>\r\n\r\n <div class=\"button-parent\">\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 <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!responseData?.quantity\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.content?.button}}</button>\r\n </div>\r\n <div class=\"favourite\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\" *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n {{responseData.itemInventory.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *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 </div>\r\n </div>\r\n <div class=\"row prod-desc\">\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?.properties?.description\">{{responseData?.properties?.description}}</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</section>\r\n", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px}.img-list img{height:100px;width:100%;cursor:pointer}.item-img img{height:500px;width:460px}.price{font-weight:600;font-family:Poppins;font-size:20px;margin-top:15px}.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: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}.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}@media screen and (max-width: 500px){.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}}.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:1.5px solid lightgray;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%}\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: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
4988
+ get getFeatureProductData() {
4989
+ return this.data;
4990
+ }
4991
+ getProductByCategory() {
4992
+ this.restService.getProductByCategoryId(this.responseData.categoryId ?? "1ef4ffc0-559e-6ec5-8ea9-65f5dbff53c1").subscribe((response) => {
4993
+ this.relatedProductData = response.data.data;
4994
+ });
4995
+ }
4996
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: RestService }, { token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
4997
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <lib-ngx-image-zoom\r\n [thumbImage]=\"currentImg\" \r\n [fullImage]=\"currentImg\" \r\n [zoomMode]=\"'hover'\"\r\n [magnification]=\"2\" \r\n [lensHeight]=\"100\"\r\n [lensWidth]=\"100\"\r\n style=\"height: 100%; width: 100%;\"\r\n ></lib-ngx-image-zoom>\r\n <!-- <img [src]=\"currentImg\" alt=\"\" *ngIf=\"currentImg\"> -->\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!currentImg\">\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <div class=\"heading-large\">{{responseData?.name}}</div>\r\n <div class=\"price\">&#8377; {{responseData?.price?.sellingPrice}}</div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\">{{responseData.brief}}</div>\r\n\r\n <div class=\"button-parent\">\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 <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!responseData?.quantity\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.content?.button}}</button>\r\n </div>\r\n <div class=\"favourite\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\" *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n {{responseData.itemInventory.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *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 </div>\r\n </div>\r\n <div class=\"row prod-desc\">\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?.properties?.description\">{{responseData?.properties?.description}}</div>\r\n </div>\r\n </section>\r\n <simpo-featured-products [data]=\"getFeatureProductData\" [responseData]=\"relatedProductData\" [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px}.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:460px;overflow:hidden}.item-img img{width:100%}.price{font-weight:600;font-family:Poppins;font-size:20px;margin-top:15px}.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: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}.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}@media screen and (max-width: 500px){.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}}.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:1.5px solid lightgray;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%}\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: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
4932
4998
  //DIRECTIVE
4933
- 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"] }] }); }
4999
+ ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: i8.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", "delete"] }] }); }
4934
5000
  }
4935
5001
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProductDescComponent, decorators: [{
4936
5002
  type: Component,
4937
- args: [{ selector: 'simpo-product-desc', standalone: true, imports: [CommonModule,
5003
+ args: [{ selector: 'simpo-product-desc', standalone: true, imports: [
5004
+ CommonModule,
4938
5005
  FormsModule,
4939
5006
  HttpClientModule,
4940
5007
  SimpoComponentModule,
@@ -4943,12 +5010,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
4943
5010
  ButtonDirectiveDirective,
4944
5011
  AnimationDirective,
4945
5012
  ContentFitDirective,
4946
- HoverDirective
4947
- ], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <img [src]=\"currentImg\" alt=\"\" *ngIf=\"currentImg\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!currentImg\">\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <div class=\"heading-large\">{{responseData?.name}}</div>\r\n <div class=\"price\">&#8377; {{responseData?.price?.sellingPrice}}</div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\">{{responseData.brief}}</div>\r\n\r\n <div class=\"button-parent\">\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 <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!responseData?.quantity\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.content?.button}}</button>\r\n </div>\r\n <div class=\"favourite\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\" *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n {{responseData.itemInventory.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *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 </div>\r\n </div>\r\n <div class=\"row prod-desc\">\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?.properties?.description\">{{responseData?.properties?.description}}</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</section>\r\n", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px}.img-list img{height:100px;width:100%;cursor:pointer}.item-img img{height:500px;width:460px}.price{font-weight:600;font-family:Poppins;font-size:20px;margin-top:15px}.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: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}.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}@media screen and (max-width: 500px){.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}}.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:1.5px solid lightgray;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%}\n"] }]
5013
+ HoverDirective,
5014
+ NgxImageZoomModule,
5015
+ FeaturedProductsComponent
5016
+ ], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n <div class=\"row\">\r\n <div class=\"col-lg-6 col-12\">\r\n <div class=\"prod-img-block\">\r\n <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n <div class=\"item-img\">\r\n <lib-ngx-image-zoom\r\n [thumbImage]=\"currentImg\" \r\n [fullImage]=\"currentImg\" \r\n [zoomMode]=\"'hover'\"\r\n [magnification]=\"2\" \r\n [lensHeight]=\"100\"\r\n [lensWidth]=\"100\"\r\n style=\"height: 100%; width: 100%;\"\r\n ></lib-ngx-image-zoom>\r\n <!-- <img [src]=\"currentImg\" alt=\"\" *ngIf=\"currentImg\"> -->\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!currentImg\">\r\n </div>\r\n <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6 col-12 product-detail\">\r\n <div class=\"heading-large\">{{responseData?.name}}</div>\r\n <div class=\"price\">&#8377; {{responseData?.price?.sellingPrice}}</div>\r\n <div class=\"product-desc body-large\" *ngIf=\"responseData?.brief\">{{responseData.brief}}</div>\r\n\r\n <div class=\"button-parent\">\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 <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n </div>\r\n <div *ngIf=\"!responseData?.quantity\">\r\n <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.content?.button}}</button>\r\n </div>\r\n <div class=\"favourite\">\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\" *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n </div>\r\n </div>\r\n\r\n <div class=\"product-sku\">\r\n <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n {{responseData.itemInventory.openingStock}}</div>\r\n <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *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 </div>\r\n </div>\r\n <div class=\"row prod-desc\">\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?.properties?.description\">{{responseData?.properties?.description}}</div>\r\n </div>\r\n </section>\r\n <simpo-featured-products [data]=\"getFeatureProductData\" [responseData]=\"relatedProductData\" [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px}.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:460px;overflow:hidden}.item-img img{width:100%}.price{font-weight:600;font-family:Poppins;font-size:20px;margin-top:15px}.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: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}.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}@media screen and (max-width: 500px){.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}}.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:1.5px solid lightgray;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%}\n"] }]
4948
5017
  }], ctorParameters: () => [{ type: Object, decorators: [{
4949
5018
  type: Inject,
4950
5019
  args: [PLATFORM_ID]
4951
- }] }, { type: EventsService }, { type: i2$4.Router }, { type: i2$4.ActivatedRoute }, { type: RestService }, { type: CartService }], propDecorators: { data: [{
5020
+ }] }, { type: EventsService }, { type: i2$3.Router }, { type: i2$3.ActivatedRoute }, { type: RestService }, { type: CartService }], propDecorators: { data: [{
4952
5021
  type: Input
4953
5022
  }], responseData: [{
4954
5023
  type: Input
@@ -4982,7 +5051,7 @@ class PagninationComponent {
4982
5051
  this.currentPage = index + 1;
4983
5052
  this.router.navigate([''], { queryParams: { pageNo: this.currentPage } });
4984
5053
  }
4985
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: PagninationComponent, deps: [{ token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
5054
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: PagninationComponent, deps: [{ token: i2$3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
4986
5055
  static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: PagninationComponent, isStandalone: true, selector: "simpo-pagnination", inputs: { totalPages: "totalPages", currentPage: "currentPage" }, ngImport: i0, template: "<section class=\"d-flex w-100 justify-content-center\">\r\n <div class=\"pagniation-btn\" (click)=\"goToPrev()\" [style.visibility]=\"currentPage == 1 ? 'hidden' : 'visible'\">Prev</div>\r\n <ng-container *ngFor=\"let _ of [].constructor(totalPages); let idx = index\">\r\n <span class=\"pagniation-btn\" [ngClass]=\"{'selected-page': (idx +1) == currentPage}\" *ngIf=\"idx < 5\">{{idx +1}}</span>\r\n </ng-container>\r\n <div *ngIf=\"totalPages > 6\" class=\"d-flex align-items-center\">\r\n <span class=\"pagniation-btn fs-2\">...</span>\r\n <span class=\"pagniation-btn\">{{totalPages}}</span>\r\n </div>\r\n <div class=\"pagniation-btn\" (click)=\"goToNext()\" [style.visibility]=\"currentPage == totalPages ? 'hidden' : 'visible'\">Next</div>\r\n</section>", styles: [".pagniation-btn{font-size:14px;padding:5px;border-radius:2px;width:45px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center}.selected-page{background-color:#000;color:#fff}\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"] }] }); }
4987
5056
  }
4988
5057
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: PagninationComponent, decorators: [{
@@ -4990,7 +5059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
4990
5059
  args: [{ selector: 'simpo-pagnination', standalone: true, imports: [
4991
5060
  CommonModule
4992
5061
  ], template: "<section class=\"d-flex w-100 justify-content-center\">\r\n <div class=\"pagniation-btn\" (click)=\"goToPrev()\" [style.visibility]=\"currentPage == 1 ? 'hidden' : 'visible'\">Prev</div>\r\n <ng-container *ngFor=\"let _ of [].constructor(totalPages); let idx = index\">\r\n <span class=\"pagniation-btn\" [ngClass]=\"{'selected-page': (idx +1) == currentPage}\" *ngIf=\"idx < 5\">{{idx +1}}</span>\r\n </ng-container>\r\n <div *ngIf=\"totalPages > 6\" class=\"d-flex align-items-center\">\r\n <span class=\"pagniation-btn fs-2\">...</span>\r\n <span class=\"pagniation-btn\">{{totalPages}}</span>\r\n </div>\r\n <div class=\"pagniation-btn\" (click)=\"goToNext()\" [style.visibility]=\"currentPage == totalPages ? 'hidden' : 'visible'\">Next</div>\r\n</section>", styles: [".pagniation-btn{font-size:14px;padding:5px;border-radius:2px;width:45px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center}.selected-page{background-color:#000;color:#fff}\n"] }]
4993
- }], ctorParameters: () => [{ type: i2$4.Router }], propDecorators: { totalPages: [{
5062
+ }], ctorParameters: () => [{ type: i2$3.Router }], propDecorators: { totalPages: [{
4994
5063
  type: Input
4995
5064
  }], currentPage: [{
4996
5065
  type: Input
@@ -5128,8 +5197,8 @@ class ProductListComponent extends BaseSection {
5128
5197
  get getTotalPage() {
5129
5198
  return Math.ceil(this.totalCount / this.size);
5130
5199
  }
5131
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
5132
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n <div class=\"filter body-large\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\">\r\n Clear all\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing {{pageNo*size +1}}-{{size}} of {{ totalCount }} Results</div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n <div class=\"fs-6 fw-normal mr-3\" style=\"color: #6c757d82;\">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 justify-content-between\">\r\n <div class=\"filter-side\">\r\n\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-100 chip\">\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\">\r\n Shop by categories\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n <div>{{category.option | uppercase}}</div>\r\n </div>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\">\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>{{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\">\r\n Shop by price\r\n </div>\r\n <div>\r\n <mat-slider min=\"0\" max=\"1000\" style=\"width: 250px;\">\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()\">Filter</button>\r\n </div>\r\n <div class=\"price-range\">\r\n Price: ${{ pricingMin }} - ${{ pricingMax }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\" style=\"cursor: pointer;\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\">\r\n <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n </div>\r\n <div class=\"mt-2\">\r\n <div class=\"product-name heading-large text-left\">\r\n {{product.name}}</div>\r\n <div class=\"price body-large text-left\">\r\n ${{product.price.sellingPrice}}\r\n </div>\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\">{{content?.button}}</button>\r\n </div> -->\r\n <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"getTotalPage\" [currentPage]=\"pageNo +1\" ></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 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\">\r\n Product list is empty\r\n </div>\r\n <div class=\"description d-flex justify-content-center mt-4\">\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 </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.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}.add-product-button{width:20%}.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!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}.filter-side{width:20%}.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 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;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%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}.filter-side{display:none}.right-side{width:100%}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}\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: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.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: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i8.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i8.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"] }, { kind: "directive", type:
5200
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
5201
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n <div class=\"filter body-large\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\">\r\n Clear all\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing {{pageNo*size +1}}-{{size}} of {{ totalCount }} Results</div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n <div class=\"fs-6 fw-normal mr-3\" style=\"color: #6c757d82;\">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 justify-content-between\">\r\n <div class=\"filter-side\">\r\n\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-100 chip\">\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\">\r\n Shop by categories\r\n </div>\r\n <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\">\r\n <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n <div>{{category.option | uppercase}}</div>\r\n </div>\r\n </div>\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\">\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>{{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\">\r\n Shop by price\r\n </div>\r\n <div>\r\n <mat-slider min=\"0\" max=\"1000\" style=\"width: 250px;\">\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()\">Filter</button>\r\n </div>\r\n <div class=\"price-range\">\r\n Price: ${{ pricingMin }} - ${{ pricingMax }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\" style=\"cursor: pointer;\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image\">\r\n <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n </div>\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\">\r\n <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n </div>\r\n <div class=\"mt-2\">\r\n <div class=\"product-name heading-large text-left\">\r\n {{product.name}}</div>\r\n <div class=\"price body-large text-left\">\r\n ${{product.price.sellingPrice}}\r\n </div>\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\">{{content?.button}}</button>\r\n </div> -->\r\n <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"getTotalPage\" [currentPage]=\"pageNo +1\" ></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 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\">\r\n Product list is empty\r\n </div>\r\n <div class=\"description d-flex justify-content-center mt-4\">\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 </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.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}.add-product-button{width:20%}.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!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}.filter-side{width:20%}.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 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;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%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}.filter-side{display:none}.right-side{width:100%}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}\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: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i8$1.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i8$1.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"] }, { kind: "directive", type:
5133
5202
  //directive
5134
5203
  AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
5135
5204
  }
@@ -5152,7 +5221,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
5152
5221
  }], ctorParameters: () => [{ type: Object, decorators: [{
5153
5222
  type: Inject,
5154
5223
  args: [PLATFORM_ID]
5155
- }] }, { type: EventsService }, { type: RestService }, { type: i2$4.Router }, { type: i2$4.ActivatedRoute }], propDecorators: { responseData: [{
5224
+ }] }, { type: EventsService }, { type: RestService }, { type: i2$3.Router }, { type: i2$3.ActivatedRoute }], propDecorators: { responseData: [{
5156
5225
  type: Input
5157
5226
  }], data: [{
5158
5227
  type: Input
@@ -5167,20 +5236,184 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
5167
5236
  args: ["window: resize", ["$event"]]
5168
5237
  }] } });
5169
5238
 
5239
+ class AddressComponent {
5240
+ constructor(ngZone, restService
5241
+ // private readonly matDialogRef: MatDialogRef<AddressComponent>
5242
+ ) {
5243
+ this.ngZone = ngZone;
5244
+ this.restService = restService;
5245
+ this.addressList = [];
5246
+ this.address = {
5247
+ "receiverName": "",
5248
+ "receiverMobile": "",
5249
+ "receiverEmail": "",
5250
+ "countryName": "",
5251
+ "stateName": "",
5252
+ "cityName": "",
5253
+ "localityName": "",
5254
+ "addressLine1": "",
5255
+ "landmark": "",
5256
+ "zipCode": "",
5257
+ "stateCode": "",
5258
+ "addressType": "",
5259
+ "geolocation": {
5260
+ "latitude": 0,
5261
+ "longitude": 0
5262
+ }
5263
+ };
5264
+ this.isCart = false;
5265
+ this.latitute = null;
5266
+ this.longitute = null;
5267
+ this.mapCenter = {
5268
+ lat: 0,
5269
+ lng: 0
5270
+ };
5271
+ this.markerPosition = {
5272
+ lat: 0,
5273
+ lng: 0
5274
+ };
5275
+ this.markerOptions = { draggable: true };
5276
+ this.geocoder = new google.maps.Geocoder();
5277
+ this.addessType = [
5278
+ { key: "Home", status: false },
5279
+ { key: "Work", status: false },
5280
+ { key: "Other", status: false }
5281
+ ];
5282
+ }
5283
+ ngOnInit() {
5284
+ this.getCurrentLocation();
5285
+ }
5286
+ ngOnChanges(changes) {
5287
+ this.addressList = this.responseData;
5288
+ debugger;
5289
+ }
5290
+ checkAddressType(address) {
5291
+ this.addessType.forEach((add) => add.status = (add.key == address.key));
5292
+ this.address.addressType = address.key;
5293
+ }
5294
+ close() {
5295
+ }
5296
+ getCurrentLocation() {
5297
+ if (navigator.geolocation) {
5298
+ navigator.geolocation.getCurrentPosition((values) => {
5299
+ this.latitute = values.coords.latitude;
5300
+ this.longitute = values.coords.longitude;
5301
+ });
5302
+ }
5303
+ }
5304
+ getAddress() {
5305
+ this.geocoder.geocode({ location: this.markerPosition }, (results, status) => {
5306
+ if (status === 'OK' && results[0]) {
5307
+ this.ngZone.run(() => {
5308
+ // this.address = results[0].formatted_address;
5309
+ results[0].address_components.forEach((component) => {
5310
+ const types = component.types;
5311
+ if (types.includes("locality")) {
5312
+ // this.city = component.long_name;
5313
+ }
5314
+ if (types.includes("administrative_area_level_1")) {
5315
+ // this.state = component.long_name;
5316
+ }
5317
+ if (types.includes("country")) {
5318
+ // this.selectedCountry = component.long_name;
5319
+ }
5320
+ if (types.includes("postal_code")) {
5321
+ // this.zip = component.long_name;
5322
+ }
5323
+ });
5324
+ });
5325
+ }
5326
+ });
5327
+ }
5328
+ onLocationSelected(location) {
5329
+ this.latitute = location.latitude;
5330
+ this.longitute = location.longitude;
5331
+ // this.setPosition(); // Update map position
5332
+ // this.updateAddressFields();
5333
+ }
5334
+ onAutocompleteSelected(result) {
5335
+ console.log(result);
5336
+ // this.selectedCountry = null;
5337
+ // this.zip = "";
5338
+ // this.state = "";
5339
+ // this.city = "";
5340
+ // this.address = result?.formatted_address;
5341
+ result?.address_components.forEach((data) => {
5342
+ if (data?.types.includes("country")) { }
5343
+ // this.selectedCountry = data.long_name;
5344
+ else if (data?.types.includes("postal_code")) { }
5345
+ // this.zip = data.long_name;
5346
+ else if (data?.types.includes("administrative_area_level_1")) { }
5347
+ // this.state = data.long_name;
5348
+ else if (data?.types.includes("locality")) { }
5349
+ // this.city = data.long_name;
5350
+ });
5351
+ }
5352
+ updateAddress() {
5353
+ const userId = UserInfo.user.userId;
5354
+ const payload = {
5355
+ "userId": "dc915bd4-fa6f-446e-bce2-440b6804af22",
5356
+ "addressDetailsList": this.address
5357
+ };
5358
+ this.restService.addUserAddress(payload).subscribe((response) => {
5359
+ });
5360
+ }
5361
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AddressComponent, deps: [{ token: i0.NgZone }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
5362
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: AddressComponent, isStandalone: true, selector: "simpo-address", inputs: { responseData: "responseData", isCart: "isCart" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"address-sec\">\r\n <div class=\"header\">\r\n <h3>{{isCart ? 'Shipping To' : 'New Address'}}</h3>\r\n <mat-icon (click)=\"close()\" *ngIf=\"!isCart\">close</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!addressList?.length\">\r\n <p (click)=\"getCurrentLocation()\" class=\"d-flex align-items-center\" style=\"cursor: pointer;\">\r\n <mat-icon>my_location</mat-icon>\r\n <span>take my current location</span>\r\n </p>\r\n <div class=\"forms d-flex flex-wrap\">\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Name</div>\r\n <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Mobile</div>\r\n <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverMobile\">\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)]=\"address.receiverEmail\">\r\n </div>\r\n <div class=\"form-control-full-group\">\r\n <div class=\"label\">Address</div>\r\n <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Locality</div>\r\n <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Landmark</div>\r\n <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Pincode</div>\r\n <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">City</div>\r\n <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.city\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">State</div>\r\n <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.state\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Address Type</div>\r\n <div class=\"d-flex\">\r\n <ng-container *ngFor=\"let address of addessType\">\r\n <span class=\"address\" (click)=\"checkAddressType(address)\">{{address.key}}</span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"address-list\" *ngIf=\"addressList.length\">\r\n <ng-container *ngFor=\"let address of addressList\">\r\n <div class=\"address\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address?.recieverName}}</span>\r\n <span class=\"address-type\">{{address?.type}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.addressLine1}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.recieverPhone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"action-btn\" *ngIf=\"!addressList.length\">\r\n <button (click)=\"updateAddress()\">Update</button>\r\n </div>\r\n</section>", styles: [".address-sec{padding:20px;position:relative}.address-sec .header{display:flex;justify-content:space-between;margin-bottom:20px}.mat-icon{cursor:pointer;margin-right:5px}.action-btn{position:absolute;bottom:-50px;right:10px}.action-btn button{background-color:#0267c1;color:#fff;padding:10px;width:200px!important;border:none}.label:after{content:\"*\"}.forms{gap:10px;justify-content:space-between}.form-control-group,.form-control-full-group{width:48%}:is(.form-control-group,.form-control-full-group) input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.form-control-full-group{width:100%!important}.address{width:150px;padding:10px;background-color:#d3d3d35c;color:#000;text-align:center;border-radius:5px;margin:0 5px}.address-active{background-color:#0267c1;color:#fff}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
5363
+ }
5364
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AddressComponent, decorators: [{
5365
+ type: Component,
5366
+ args: [{ selector: 'simpo-address', standalone: true, imports: [
5367
+ MatIcon,
5368
+ CommonModule,
5369
+ FormsModule
5370
+ // MatDialogModule
5371
+ ], template: "<section class=\"address-sec\">\r\n <div class=\"header\">\r\n <h3>{{isCart ? 'Shipping To' : 'New Address'}}</h3>\r\n <mat-icon (click)=\"close()\" *ngIf=\"!isCart\">close</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!addressList?.length\">\r\n <p (click)=\"getCurrentLocation()\" class=\"d-flex align-items-center\" style=\"cursor: pointer;\">\r\n <mat-icon>my_location</mat-icon>\r\n <span>take my current location</span>\r\n </p>\r\n <div class=\"forms d-flex flex-wrap\">\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Name</div>\r\n <input type=\"text\" placeholder=\"Enter name\" [(ngModel)]=\"address.receiverName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Mobile</div>\r\n <input type=\"text\" placeholder=\"Enter mobile\" [(ngModel)]=\"address.receiverMobile\">\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)]=\"address.receiverEmail\">\r\n </div>\r\n <div class=\"form-control-full-group\">\r\n <div class=\"label\">Address</div>\r\n <input type=\"text\" placeholder=\"Enter address\" matGoogleMapsAutocomplete\r\n (onAutocompleteSelected)=\"onAutocompleteSelected($event)\"\r\n (onLocationSelected)=\"onLocationSelected($event)\" [(ngModel)]=\"address.addressLine1\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Locality</div>\r\n <input type=\"text\" placeholder=\"Enter locality\" [(ngModel)]=\"address.localityName\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Landmark</div>\r\n <input type=\"text\" placeholder=\"Enter landmark\" [(ngModel)]=\"address.landmark\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Pincode</div>\r\n <input type=\"text\" placeholder=\"Enter pincode\" [(ngModel)]=\"address.zipCode\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">City</div>\r\n <input type=\"text\" placeholder=\"Enter city\" [(ngModel)]=\"address.city\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">State</div>\r\n <input type=\"text\" placeholder=\"Enter state\" [(ngModel)]=\"address.state\">\r\n </div>\r\n <div class=\"form-control-group\">\r\n <div class=\"label\">Address Type</div>\r\n <div class=\"d-flex\">\r\n <ng-container *ngFor=\"let address of addessType\">\r\n <span class=\"address\" (click)=\"checkAddressType(address)\">{{address.key}}</span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"address-list\" *ngIf=\"addressList.length\">\r\n <ng-container *ngFor=\"let address of addressList\">\r\n <div class=\"address\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address?.recieverName}}</span>\r\n <span class=\"address-type\">{{address?.type}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.addressLine1}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.recieverPhone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\"></div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"action-btn\" *ngIf=\"!addressList.length\">\r\n <button (click)=\"updateAddress()\">Update</button>\r\n </div>\r\n</section>", styles: [".address-sec{padding:20px;position:relative}.address-sec .header{display:flex;justify-content:space-between;margin-bottom:20px}.mat-icon{cursor:pointer;margin-right:5px}.action-btn{position:absolute;bottom:-50px;right:10px}.action-btn button{background-color:#0267c1;color:#fff;padding:10px;width:200px!important;border:none}.label:after{content:\"*\"}.forms{gap:10px;justify-content:space-between}.form-control-group,.form-control-full-group{width:48%}:is(.form-control-group,.form-control-full-group) input{width:100%;padding:10px;border-radius:3px;border:1.5px solid lightgray}.form-control-full-group{width:100%!important}.address{width:150px;padding:10px;background-color:#d3d3d35c;color:#000;text-align:center;border-radius:5px;margin:0 5px}.address-active{background-color:#0267c1;color:#fff}\n"] }]
5372
+ }], ctorParameters: () => [{ type: i0.NgZone }, { type: RestService }], propDecorators: { responseData: [{
5373
+ type: Input
5374
+ }], isCart: [{
5375
+ type: Input
5376
+ }] } });
5377
+
5170
5378
  class CartComponent extends BaseSection {
5171
- constructor(_eventService, cartService) {
5379
+ constructor(_eventService, cartService, router, restService
5380
+ // private readonly matDialog: MatDialog
5381
+ ) {
5172
5382
  super();
5173
5383
  this._eventService = _eventService;
5174
5384
  this.cartService = cartService;
5385
+ this.router = router;
5386
+ this.restService = restService;
5387
+ this.currentTab = "ADDRESS";
5175
5388
  }
5176
5389
  ngOnInit() {
5177
5390
  this.cartService.storeDBToJSON();
5178
5391
  this.responseData = UserCart;
5392
+ console.log("a: ", UserCart, this.responseData);
5179
5393
  this.styles = this.data?.styles;
5180
- }
5394
+ // this.getUserInfo();
5395
+ }
5396
+ // getUserInfo() {
5397
+ // const userId = "dc915bd4-fa6f-446e-bce2-440b6804af22";
5398
+ // return this.restService.getUserInfo(userId).subscribe((response: any)=> {
5399
+ // this.userDetails = response.data;
5400
+ // debugger;
5401
+ // })
5402
+ // }
5181
5403
  proceedToCheckout() {
5182
5404
  if (localStorage.getItem("userId")) {
5183
- this._eventService.redirectToPage.emit({ redirectTo: '/checkout', data: { cartdata: this.responseData } });
5405
+ this.currentTab = "ADDRESS";
5406
+ }
5407
+ else {
5408
+ if (window.innerWidth <= 475)
5409
+ this.router.navigate(['/auth']);
5410
+ else {
5411
+ // this.matDialog.open(AuthenticateUserComponent, {
5412
+ // height: '50vh',
5413
+ // width: '35vw',
5414
+ // data: this.data
5415
+ // });
5416
+ }
5184
5417
  }
5185
5418
  }
5186
5419
  proceedToListPage() {
@@ -5199,23 +5432,30 @@ class CartComponent extends BaseSection {
5199
5432
  }
5200
5433
  this.cartService.addItemToCart(item);
5201
5434
  }
5202
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
5203
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"left-panel\">\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=\"row item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100\">\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 &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n </div>\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;\">\r\n <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\">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=\"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\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\">&#8377; {{responseData.billdetails.totalNetValue}}</div>\r\n </div>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\">&#8377; {{responseData?.billdetails?.totalTax}}</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\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\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;\">&#8377; {{responseData.totalAmount}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\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>\r\n <div class=\"cart-image\">\r\n <img 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\">\r\n Your cart is empty\r\n </div>\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\"></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", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.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}.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;display:flex;width:90px;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%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\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: "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"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
5435
+ get getAddressList() {
5436
+ return this.userDetails ? [...this.userDetails?.addressDetailsList] : [];
5437
+ }
5438
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$3.Router }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
5439
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" >\r\n <div class=\"d-flex align-items-center justify-content-center mb-2\">\r\n <span [ngClass]=\"{'isActive': currentTab == 'BAG'}\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\">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=\"row item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100\">\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 &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n </div>\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;\">\r\n <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\">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\"></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\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\">&#8377; {{responseData.billdetails.totalNetValue}}</div>\r\n </div>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\">&#8377; {{responseData?.billdetails?.totalTax}}</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\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\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;\">&#8377; {{responseData.totalAmount}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\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>\r\n <div class=\"cart-image\">\r\n <img 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\">\r\n Your cart is empty\r\n </div>\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\"></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", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.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}.my-bag span{color:#939393}.item-parent{margin:10px 0}.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}.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;display:flex;width:90px;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%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\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: "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"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
5204
5440
  //DIRECTIVE
5205
- 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"] }] }); }
5441
+ ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: AddressComponent, selector: "simpo-address", inputs: ["responseData", "isCart"] }] }); }
5206
5442
  }
5207
5443
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CartComponent, decorators: [{
5208
5444
  type: Component,
5209
- args: [{ selector: 'simpo-cart', standalone: true, imports: [FormsModule, CommonModule,
5445
+ args: [{ selector: 'simpo-cart', standalone: true, imports: [
5446
+ FormsModule,
5447
+ CommonModule,
5210
5448
  MatIcon,
5449
+ MatDialogModule,
5211
5450
  SimpoComponentModule,
5212
5451
  //DIRECTIVE
5213
5452
  ButtonDirectiveDirective,
5214
5453
  AnimationDirective,
5215
5454
  ContentFitDirective,
5216
- HoverDirective
5217
- ], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"left-panel\">\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=\"row item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100\">\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 &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n </div>\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;\">\r\n <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\">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=\"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\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\">&#8377; {{responseData.billdetails.totalNetValue}}</div>\r\n </div>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\">&#8377; {{responseData?.billdetails?.totalTax}}</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\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\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;\">&#8377; {{responseData.totalAmount}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\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>\r\n <div class=\"cart-image\">\r\n <img 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\">\r\n Your cart is empty\r\n </div>\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\"></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", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.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}.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;display:flex;width:90px;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%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\n"] }]
5218
- }], ctorParameters: () => [{ type: EventsService }, { type: CartService }], propDecorators: { data: [{
5455
+ HoverDirective,
5456
+ AddressComponent,
5457
+ ], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" >\r\n <div class=\"d-flex align-items-center justify-content-center mb-2\">\r\n <span [ngClass]=\"{'isActive': currentTab == 'BAG'}\">Bag</span>\r\n <div class=\"bar\"></div>\r\n <span [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\">Address</span>\r\n <div class=\"bar\"></div>\r\n <span [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\">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=\"row item-parent\">\r\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n </div>\r\n <div class=\"col-md-6 h-100\">\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 &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n </div>\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;\">\r\n <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n <div>\r\n <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\">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\"></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\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n <div class=\"price-type\">Total Price</div>\r\n <div class=\"price-value\">&#8377; {{responseData.billdetails.totalNetValue}}</div>\r\n </div>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\">&#8377; {{responseData?.billdetails?.totalTax}}</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\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\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;\">&#8377; {{responseData.totalAmount}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\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>\r\n <div class=\"cart-image\">\r\n <img 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\">\r\n Your cart is empty\r\n </div>\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\"></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", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.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}.my-bag span{color:#939393}.item-parent{margin:10px 0}.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}.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;display:flex;width:90px;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%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\n"] }]
5458
+ }], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$3.Router }, { type: RestService }], propDecorators: { data: [{
5219
5459
  type: Input
5220
5460
  }], responseData: [{
5221
5461
  type: Input
@@ -5243,7 +5483,7 @@ class CheckoutComponent extends BaseSection {
5243
5483
  this._eventService.placeOrder.emit({ cartData: this.responseData });
5244
5484
  }
5245
5485
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CheckoutComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
5246
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: CheckoutComponent, isStandalone: true, selector: "simpo-checkout", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"row\">\r\n <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\r\n <div class=\"shipping-label heading-large\">Shipping To</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Name</label>\r\n <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Mobile Number</label>\r\n <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Email</label>\r\n <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\r\n class=\"input-field\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\r\n <div class=\"row\">\r\n <div class=\"col-12 input-parent\">\r\n <label for=\"\">Address</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\r\n placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Locality/Area</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\r\n placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Landmark</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\r\n placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Pincode</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">City</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\r\n placeholder=\"Eg: Hyderabad\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">State</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\r\n placeholder=\"Eg: Telanghana\" class=\"input-field\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\r\n <div class=\"shipping-label\">Delivery Address</div>\r\n <div class=\"delivery-address\">\r\n <div style=\"position: absolute;right: 15px;\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\r\n alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\r\n </div>\r\n <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\r\n <div class=\"user-details\" style=\"margin-top: 5px;\">\r\n {{responseData?.userDetails.deliveryAddress?.addressLine1}},\r\n {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\r\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\r\n {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\r\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\r\n {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\r\n <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\r\n style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\r\n </div>\r\n </div>\r\n <div class=\"offset-md-1 col-md-4 col-12 right-section\">\r\n <div class=\"shipping-label heading-large lh-normal\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n <div class=\"price-type\">Total MRP</div>\r\n <div class=\"price-value\">&#8377; {{responseData.billdetails.totalNetValue}}</div>\r\n </div>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\">&#8377; {{responseData?.billdetails?.totalTax}}</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\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\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;\">&#8377; {{responseData.totalAmount}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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", styles: [".container{margin-top:30px}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.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;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.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:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width : 500px){.right-section{margin-top:15px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.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: i2$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
5486
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: CheckoutComponent, isStandalone: true, selector: "simpo-checkout", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"row\">\r\n <div class=\"col-md-7 col-12\" *ngIf=\"editDeliveryAddress\">\r\n <div class=\"shipping-label heading-large\">Shipping To</div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Name</label>\r\n <input [(ngModel)]=\"responseData.userDetails.userName\" type=\"text\" placeholder=\"Enter Name\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Mobile Number</label>\r\n <input [(ngModel)]=\"responseData.userDetails.mobile\" type=\"number\" placeholder=\"Enter number\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Email</label>\r\n <input [(ngModel)]=\"responseData.userDetails.email\" type=\"email\" placeholder=\"Enter email\"\r\n class=\"input-field\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"shipping-label\" style=\"margin-top: 15px;\">Shipping Address</div>\r\n <div class=\"row\">\r\n <div class=\"col-12 input-parent\">\r\n <label for=\"\">Address</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.addressLine1\" type=\"text\"\r\n placeholder=\"Flat/House No, Building, Colony\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Locality/Area</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.localityName\" type=\"text\"\r\n placeholder=\"Eg: Jaybheri Enclave, Gachibowli\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Landmark</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.landmark\" type=\"text\"\r\n placeholder=\"Eg: Near SBI Bank\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">Pincode</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.zipCode\" type=\"number\" placeholder=\"Eg: 500032\"\r\n class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">City</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.cityName\" type=\"text\"\r\n placeholder=\"Eg: Hyderabad\" class=\"input-field\">\r\n </div>\r\n <div class=\"col-md-6 col-12 input-parent\">\r\n <label for=\"\">State</label>\r\n <input [(ngModel)]=\"responseData.userDetails.deliveryAddress.stateName\" type=\"text\"\r\n placeholder=\"Eg: Telanghana\" class=\"input-field\">\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-7 col-12\" *ngIf=\"!editDeliveryAddress\">\r\n <div class=\"shipping-label\">Delivery Address</div>\r\n <div class=\"delivery-address\">\r\n <div style=\"position: absolute;right: 15px;\">\r\n <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/library-media/813827c1709186499689edit%201.png\"\r\n alt=\"\" style=\"cursor: pointer;\" (click)=\"editDeliveryAddress = true\">\r\n </div>\r\n <div class=\"userName\">{{responseData?.userDetails.userName}}</div>\r\n <div class=\"user-details\" style=\"margin-top: 5px;\">\r\n {{responseData?.userDetails.deliveryAddress?.addressLine1}},\r\n {{responseData?.userDetails.deliveryAddress?.localityName}}</div>\r\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.cityName}},\r\n {{responseData?.userDetails.deliveryAddress?.stateName}}</div>\r\n <div class=\"user-details\">{{responseData?.userDetails.deliveryAddress?.countryName}} -\r\n {{responseData?.userDetails.deliveryAddress?.zipCode}}</div>\r\n <div class=\"user-details\" style=\"margin-top: 5px;\">Phone : <span\r\n style=\"font-weight: 500;\">{{responseData?.userDetails.mobile}}</span></div>\r\n </div>\r\n </div>\r\n <div class=\"offset-md-1 col-md-4 col-12 right-section\">\r\n <div class=\"shipping-label heading-large lh-normal\">\r\n Price Details\r\n </div>\r\n <div class=\"price-details\">\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n <div class=\"price-type\">Total MRP</div>\r\n <div class=\"price-value\">&#8377; {{responseData.billdetails.totalNetValue}}</div>\r\n </div>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n <div class=\"price-type\">Total Tax</div>\r\n <div class=\"price-value\">&#8377; {{responseData?.billdetails?.totalTax}}</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\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n </div>\r\n <hr>\r\n <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\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;\">&#8377; {{responseData.totalAmount}}</div>\r\n </div>\r\n\r\n <div class=\"button-parent\">\r\n <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n [color]=\"styles?.background?.accentColor\" (click)=\"placeOrder()\">{{content?.button}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\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", styles: [".container{margin-top:30px}.shipping-label{font-weight:600;font-size:18px;color:#141514;margin-bottom:5px}.input-parent{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}.input-label{font-family:Inter;font-weight:400;font-size:14px;color:#141514}.input-field{height:40px;border:2px solid#D0D5DD;border-radius:5px;padding-left:10px;font-size:14px;outline:none}.my-bag{font-size:16px;font-weight:600;font-family:Poppins;color:#000}.my-bag span{color:#939393}.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;font-family:Poppins}.coupon-desc{color:#939393;font-size:12px;font-family:Poppins;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600;font-family:Poppins}.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:14px;font-family:Poppins;color:#434443}.price-value{font-weight:500;font-family:Poppins;font-size:16px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}.button-parent button{padding-top:7px!important;padding-bottom:7px!important;font-size:16px!important}.delivery-address{border:1px solid#D0D5DD;padding:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;position:relative}.userName{font-size:18px;font-weight:500;font-family:Poppins;color:#000}.user-details{font-weight:400;font-size:16px;font-family:Poppins}.lh-normal{line-height:normal}hr{border:1px solid #E8E8E8}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}@media screen and (max-width : 500px){.right-section{margin-top:15px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$2.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: i2$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$2.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
5247
5487
  //DIRECTIVE
5248
5488
  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"] }] }); }
5249
5489
  }
@@ -5329,7 +5569,7 @@ class OrderDetailsComponent {
5329
5569
  console.log(this.responseData);
5330
5570
  }
5331
5571
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: OrderDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5332
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<section class=\"d-flex justify-content-between\" style=\"width: 80%; margin: auto;\">\r\n <div class=\"left\" style=\"width: 60%;\">\r\n <h1 class=\"fs-3 fw-normal mb-5 d-flex align-items-center onlyDesktop\" style=\"margin-left: -30px;\">\r\n <mat-icon style=\"cursor: pointer;\">keyboard_arrow_left</mat-icon>\r\n <span>Order Details</span>\r\n </h1>\r\n <div class=\"d-flex justify-content-between align-items-end\">\r\n <div class=\"d-flex flex-column\">\r\n <span class=\"text-dark fs-5\">Order {{ responseData.orderId }}</span>\r\n <span class=\"text-muted fs-6\">{{ responseData.orderDate | date }}, {{ responseData.items }} items | &#x20b9; {{responseData.amount}}</span>\r\n </div>\r\n <span class=\"text-dark fw-bold fs-5\">{{responseData.store}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"timeline\">\r\n <p-timeline [value]=\"orderTimiline\">\r\n <ng-template pTemplate=\"content\" let-event>\r\n <div class=\"d-flex\">\r\n <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon> \r\n <div class=\"d-flex flex-column ml-2\">\r\n <span class=\"fw-normal fs-6\">{{ event.name }}</span> \r\n <div class=\"fs-6 text-muted\">{{event.desc}}</div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-timeline>\r\n </div>\r\n <hr />\r\n <div>\r\n <div *ngFor=\"let item of responseData.itemList\" class=\"d-flex\" style=\"gap: 10px; width: 100%;\">\r\n <img [src]=\"item.itemImages[0].imgUrl\" alt=\"\" style=\"height: 85px;width: 85px;\">\r\n <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n <span class=\"text-dark fw-bold fs-6\">{{item.name}}</span>\r\n <span class=\"fs-6\">Size: XS</span>\r\n <div class=\"d-flex justify-content-between fs-6\">\r\n <span>1 X &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n <span> &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <hr />\r\n <div class=\"fs-6\">\r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span class=\"fw-normal\">Item Total</span>\r\n <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n </div>\r\n \r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span>Delivery</span>\r\n <span>FREE</span>\r\n </div>\r\n \r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span class=\"fw-normal\">Grand Total</span>\r\n <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right\" style=\"width: 25%; mt-2\">\r\n <h1 class=\"mb-3 fs-5\">Your Details</h1>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\">Name:</span>\r\n <span class=\"fw-bold pl-2\">Shruti</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\">Phone:</span>\r\n <span class=\"fw-bold pl-2\">940495483938</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\">Address:</span>\r\n <span class=\"fw-bold pl-2\">The 27 building, Jayabheri Enclave</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\">Payment:</span>\r\n <span class=\"fw-bold pl-2\">Manual Payment</span>\r\n </div>\r\n </div>\r\n</section>", styles: [".right{height:240px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}@media screen and (max-width: 475px){.onlyDesktop{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i2$7.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
5572
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: OrderDetailsComponent, isStandalone: true, selector: "simpo-order-details", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<section class=\"d-flex justify-content-between\" style=\"width: 80%; margin: auto;\">\r\n <div class=\"left\" style=\"width: 60%;\">\r\n <h1 class=\"fs-3 fw-normal mb-5 d-flex align-items-center onlyDesktop\" style=\"margin-left: -30px;\">\r\n <mat-icon style=\"cursor: pointer;\">keyboard_arrow_left</mat-icon>\r\n <span>Order Details</span>\r\n </h1>\r\n <div class=\"d-flex justify-content-between align-items-end\">\r\n <div class=\"d-flex flex-column\">\r\n <span class=\"text-dark fs-5\">Order {{ responseData.orderId }}</span>\r\n <span class=\"text-muted fs-6\">{{ responseData.orderDate | date }}, {{ responseData.items }} items | &#x20b9; {{responseData.amount}}</span>\r\n </div>\r\n <span class=\"text-dark fw-bold fs-5\">{{responseData.store}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"timeline\">\r\n <p-timeline [value]=\"orderTimiline\">\r\n <ng-template pTemplate=\"content\" let-event>\r\n <div class=\"d-flex\">\r\n <mat-icon style=\"margin-right: 10px;\">{{ event.icon }}</mat-icon> \r\n <div class=\"d-flex flex-column ml-2\">\r\n <span class=\"fw-normal fs-6\">{{ event.name }}</span> \r\n <div class=\"fs-6 text-muted\">{{event.desc}}</div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-timeline>\r\n </div>\r\n <hr />\r\n <div>\r\n <div *ngFor=\"let item of responseData.itemList\" class=\"d-flex\" style=\"gap: 10px; width: 100%;\">\r\n <img [src]=\"item.itemImages[0].imgUrl\" alt=\"\" style=\"height: 85px;width: 85px;\">\r\n <div class=\"d-flex flex-column justify-content-center\" style=\"gap: 6px; width: 89%;\">\r\n <span class=\"text-dark fw-bold fs-6\">{{item.name}}</span>\r\n <span class=\"fs-6\">Size: XS</span>\r\n <div class=\"d-flex justify-content-between fs-6\">\r\n <span>1 X &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n <span> &#x20b9; <span class=\"text-dark fw-bold\">{{item.price.sellingPrice}}</span></span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <hr />\r\n <div class=\"fs-6\">\r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span class=\"fw-normal\">Item Total</span>\r\n <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n </div>\r\n \r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span>Delivery</span>\r\n <span>FREE</span>\r\n </div>\r\n \r\n <div class=\"d-flex justify-content-between my-2\">\r\n <span class=\"fw-normal\">Grand Total</span>\r\n <span class=\"fw-bold\">&#x20b9; {{responseData.amount}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"right\" style=\"width: 25%; mt-2\">\r\n <h1 class=\"mb-3 fs-5\">Your Details</h1>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\">Name:</span>\r\n <span class=\"fw-bold pl-2\">Shruti</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\">Phone:</span>\r\n <span class=\"fw-bold pl-2\">940495483938</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\">Address:</span>\r\n <span class=\"fw-bold pl-2\">The 27 building, Jayabheri Enclave</span>\r\n </div>\r\n <div class=\"my-2 fs-6\">\r\n <span style=\"margin-right: 10px\">Payment:</span>\r\n <span class=\"fw-bold pl-2\">Manual Payment</span>\r\n </div>\r\n </div>\r\n</section>", styles: [".right{height:240px;padding:15px;background-color:#f8f8f8;border-radius:8px}hr{border-top-width:2px;margin:15px 0}.mat-icon{height:30px;width:30px;font-size:30px}.timeline{margin:25px 0}@media screen and (max-width: 475px){.onlyDesktop{display:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: TimelineModule }, { kind: "component", type: i2$6.Timeline, selector: "p-timeline", inputs: ["value", "style", "styleClass", "align", "layout"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
5333
5573
  }
5334
5574
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: OrderDetailsComponent, decorators: [{
5335
5575
  type: Component,
@@ -5351,16 +5591,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
5351
5591
  }] } });
5352
5592
 
5353
5593
  class UserProfileComponent {
5354
- constructor(router) {
5594
+ constructor(router, restService) {
5355
5595
  this.router = router;
5356
- this.selectedSidePanelTab = "Orders_Details";
5596
+ this.restService = restService;
5597
+ this.selectedSidePanelTab = "Orders";
5357
5598
  this.userDetails = null;
5358
- this.addressList = [{
5359
- name: "Srutika",
5360
- type: "Home",
5361
- address: "the 27 building, Javabheri, Hyderabad",
5362
- phone: "989383943"
5363
- }];
5599
+ this.addressList = [];
5364
5600
  this.sidePanelList = [
5365
5601
  { value: "Orders", icon: "accessibility", status: true, label: "Heading", url: 'order' },
5366
5602
  { value: "Address", icon: "location_on", status: false, label: "Heading", url: 'address' },
@@ -5372,11 +5608,12 @@ class UserProfileComponent {
5372
5608
  }
5373
5609
  ngOnInit() {
5374
5610
  if (this.responseData?.userDetails) {
5375
- this.userDetails = this.responseData?.userDetails;
5611
+ this.userDetails = UserInfo.user;
5376
5612
  this.tabs = this.responseData.tabs;
5377
5613
  this.orderList = this.responseData.orders;
5378
5614
  }
5379
- this.button = this.data.action.buttons[0];
5615
+ this.button = this.data?.action?.buttons?.[0];
5616
+ // this.getUserInfo();
5380
5617
  }
5381
5618
  goToPanel(panel) {
5382
5619
  this.selectedSidePanelTab = panel.value;
@@ -5407,8 +5644,8 @@ class UserProfileComponent {
5407
5644
  get isMobile() {
5408
5645
  return window.innerWidth <= 475;
5409
5646
  }
5410
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component }); }
5411
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<section class=\"d-flex\" style=\"width: 80%; margin: auto;\" [style.width.%]=\"isMobile ? '90' : ''\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-3\" style=\"background-color: #F8F8F8; width: 25%; border-radius: 10px; height: fit-content;\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n <img [src]=\"getUserDetails?.profilePic\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n <div>\r\n <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.userName}}</h4>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.mobile}}</span></h6>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.email}}</span></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>{{tab.icon}}</mat-icon>\r\n <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"orders-sec\">\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>\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 [src]=\"getUserDetails?.profilePic\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.userName}}</h4>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.mobile}}</span></h6>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.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 <mat-icon>{{tab.icon}}</mat-icon>\r\n <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n </section>\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=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\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\">\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 <div class=\"order\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n <h1>My Address</h1>\r\n <button class=\"address-btn\">{{button?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngFor=\"let address of addressList\">\r\n <div class=\"address\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address.name}}</span>\r\n <span class=\"address-type\">{{address.type}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.address}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.phone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\"></div>\r\n </div>\r\n </ng-container>\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)=\"selectedSidePanelTab = 'Orders_Details'\">\r\n <div class=\"top\">\r\n <span class=\"text-muted font-weight-normal\">{{order.displayId}}</span>\r\n <mat-icon>arrow_forward_ios</mat-icon>\r\n </div>\r\n <div class=\"middle my-2\">\r\n <span>{{order.date | date}}</span>\r\n <span class=\"text-dark font-weight-bold\">{{order.store | titlecase}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"bottom\">\r\n <span class=\"text-muted font-weight-normal\">Amount: <span class=\"text-dark\">{{ order.amount }}</span></span>\r\n <span class=\"text-muted font-weight-normal\">{{ order.status }}</span>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.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:70%;margin-left:auto}.order{width:95%;border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.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:200px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none}.profileDet{display:flex;flex-direction:column}@media screen and (max-width: 475px){.onlyDesktop{display:none}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;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}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete"] }] }); }
5647
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$3.Router }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
5648
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, ngImport: i0, template: "<section class=\"d-flex\" style=\"width: 85%; margin: auto; margin-top: 1rem\" [style.width.%]=\"isMobile ? '90' : ''\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-3\" style=\"background-color: #F8F8F8; width: 25%; border-radius: 10px; height: fit-content;\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n <img [src]=\"getUserDetails ?? ''\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n <div>\r\n <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"text-muted 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=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></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>{{tab.icon}}</mat-icon>\r\n <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"orders-sec\">\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>\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 [src]=\"getUserDetails\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"text-muted 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=\"text-muted d-flex align-items-center font-weight-normal\"><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 <mat-icon>{{tab.icon}}</mat-icon>\r\n <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n </section>\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=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\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\">\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 <div class=\"order\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n <h1>My Address</h1>\r\n <button class=\"address-btn\">{{button?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngFor=\"let address of addressList\">\r\n <div class=\"address\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address.name}}</span>\r\n <span class=\"address-type\">{{address.type}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.address}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.phone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\"></div>\r\n </div>\r\n </ng-container>\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)=\"selectedSidePanelTab = 'Orders_Details'\">\r\n <div class=\"top\">\r\n <span class=\"text-muted font-weight-normal\">{{order.displayId}}</span>\r\n <mat-icon>arrow_forward_ios</mat-icon>\r\n </div>\r\n <div class=\"middle my-2\">\r\n <span>{{order.date | date}}</span>\r\n <span class=\"text-dark font-weight-bold\">{{order.store | titlecase}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"bottom\">\r\n <span class=\"text-muted font-weight-normal\">Amount: <span class=\"text-dark\">{{ order.amount }}</span></span>\r\n <span class=\"text-muted font-weight-normal\">{{ order.status }}</span>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.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:70%;margin-left:auto}.order{width:95%;border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.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:200px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none}.profileDet{display:flex;flex-direction:column}@media screen and (max-width: 475px){.onlyDesktop{display:none}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;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}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete"] }] }); }
5412
5649
  }
5413
5650
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: UserProfileComponent, decorators: [{
5414
5651
  type: Component,
@@ -5421,8 +5658,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
5421
5658
  ContentFitDirective,
5422
5659
  HoverDirective,
5423
5660
  OrderDetailsComponent
5424
- ], template: "<section class=\"d-flex\" style=\"width: 80%; margin: auto;\" [style.width.%]=\"isMobile ? '90' : ''\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-3\" style=\"background-color: #F8F8F8; width: 25%; border-radius: 10px; height: fit-content;\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n <img [src]=\"getUserDetails?.profilePic\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n <div>\r\n <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.userName}}</h4>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.mobile}}</span></h6>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.email}}</span></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>{{tab.icon}}</mat-icon>\r\n <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"orders-sec\">\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>\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 [src]=\"getUserDetails?.profilePic\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.userName}}</h4>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.mobile}}</span></h6>\r\n <h6 class=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.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 <mat-icon>{{tab.icon}}</mat-icon>\r\n <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n </section>\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=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\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\">\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 <div class=\"order\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n <h1>My Address</h1>\r\n <button class=\"address-btn\">{{button?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngFor=\"let address of addressList\">\r\n <div class=\"address\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address.name}}</span>\r\n <span class=\"address-type\">{{address.type}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.address}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.phone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\"></div>\r\n </div>\r\n </ng-container>\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)=\"selectedSidePanelTab = 'Orders_Details'\">\r\n <div class=\"top\">\r\n <span class=\"text-muted font-weight-normal\">{{order.displayId}}</span>\r\n <mat-icon>arrow_forward_ios</mat-icon>\r\n </div>\r\n <div class=\"middle my-2\">\r\n <span>{{order.date | date}}</span>\r\n <span class=\"text-dark font-weight-bold\">{{order.store | titlecase}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"bottom\">\r\n <span class=\"text-muted font-weight-normal\">Amount: <span class=\"text-dark\">{{ order.amount }}</span></span>\r\n <span class=\"text-muted font-weight-normal\">{{ order.status }}</span>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.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:70%;margin-left:auto}.order{width:95%;border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.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:200px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none}.profileDet{display:flex;flex-direction:column}@media screen and (max-width: 475px){.onlyDesktop{display:none}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;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}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\n"] }]
5425
- }], ctorParameters: () => [{ type: i2$4.Router }], propDecorators: { responseData: [{
5661
+ ], template: "<section class=\"d-flex\" style=\"width: 85%; margin: auto; margin-top: 1rem\" [style.width.%]=\"isMobile ? '90' : ''\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-3\" style=\"background-color: #F8F8F8; width: 25%; border-radius: 10px; height: fit-content;\">\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n <img [src]=\"getUserDetails ?? ''\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n <div>\r\n <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"text-muted 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=\"text-muted d-flex align-items-center font-weight-normal\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></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>{{tab.icon}}</mat-icon>\r\n <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"orders-sec\">\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>\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 [src]=\"getUserDetails\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <h4 class=\"text-dark font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n <h6 class=\"text-muted 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=\"text-muted d-flex align-items-center font-weight-normal\"><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 <mat-icon>{{tab.icon}}</mat-icon>\r\n <div class=\"tab text-muted font-weight-normal\">{{tab.value}}</div>\r\n </div>\r\n </ng-container>\r\n </section>\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=\"'Orders_Details'\">\r\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n </ng-container>\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\">\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 <div class=\"order\" *ngFor=\"let order of orderList\">\r\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n <simpo-order-details></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n <div class=\"d-flex justify-content-between mb-2 onlyDesktop\">\r\n <h1>My Address</h1>\r\n <button class=\"address-btn\">{{button?.content?.label}}</button>\r\n </div>\r\n <div class=\"address-list\">\r\n <ng-container *ngFor=\"let address of addressList\">\r\n <div class=\"address\">\r\n <div class=\"address-left\">\r\n <div class=\"top\">\r\n <span class=\"fw-bold mr-2\">{{address.name}}</span>\r\n <span class=\"address-type\">{{address.type}}</span>\r\n </div>\r\n <div class=\"address-det\">{{address.address}}</div>\r\n <div class=\"phone\">\r\n <span>Phone:</span>\r\n <span class=\"address-phone\">{{address.phone}}</span>\r\n </div>\r\n </div>\r\n <div class=\"address-right\"></div>\r\n </div>\r\n </ng-container>\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)=\"selectedSidePanelTab = 'Orders_Details'\">\r\n <div class=\"top\">\r\n <span class=\"text-muted font-weight-normal\">{{order.displayId}}</span>\r\n <mat-icon>arrow_forward_ios</mat-icon>\r\n </div>\r\n <div class=\"middle my-2\">\r\n <span>{{order.date | date}}</span>\r\n <span class=\"text-dark font-weight-bold\">{{order.store | titlecase}}</span>\r\n </div>\r\n <hr />\r\n <div class=\"bottom\">\r\n <span class=\"text-muted font-weight-normal\">Amount: <span class=\"text-dark\">{{ order.amount }}</span></span>\r\n <span class=\"text-muted font-weight-normal\">{{ order.status }}</span>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{color:#000!important;font-weight:600!important}.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:70%;margin-left:auto}.order{width:95%;border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-direction:column;gap:10px}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1}.address-list .address-left{width:80%}.address-list .address-right{width:20%}.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:200px!important;background-color:#0267c1;color:#fff;border-radius:3px;border:none}.profileDet{display:flex;flex-direction:column}@media screen and (max-width: 475px){.onlyDesktop{display:none}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d3;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}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}\n"] }]
5662
+ }], ctorParameters: () => [{ type: i2$3.Router }, { type: RestService }], propDecorators: { responseData: [{
5426
5663
  type: Input
5427
5664
  }], data: [{
5428
5665
  type: Input