simpo-component-library 3.6.943 → 3.6.944

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 (11) hide show
  1. package/esm2022/lib/ecommerce/sections/cart/cart.component.mjs +3 -3
  2. package/esm2022/lib/elements/booking-cart-groups/booking-cart-groups.component.mjs +3 -3
  3. package/esm2022/lib/sections/header-section/header-section.component.mjs +17 -3
  4. package/esm2022/lib/sections/navbar-section/navbar-section.component.mjs +17 -3
  5. package/fesm2022/simpo-component-library.mjs +36 -8
  6. package/fesm2022/simpo-component-library.mjs.map +1 -1
  7. package/lib/sections/header-section/header-section.component.d.ts +4 -0
  8. package/lib/sections/navbar-section/navbar-section.component.d.ts +4 -0
  9. package/package.json +1 -1
  10. package/simpo-component-library-3.6.944.tgz +0 -0
  11. package/simpo-component-library-3.6.943.tgz +0 -0
package/fesm2022/simpo-component-library.mjs CHANGED
@@ -8506,11 +8506,11 @@ class BookingCartGroupsComponent {
8506
8506
  this.router.navigate(['/home-appointment'], { queryParams: { mode: group.mode } });
8507
8507
  }
8508
8508
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookingCartGroupsComponent, deps: [{ token: BookingProductCartService }, { token: StorageServiceService }, { token: i2$2.Router }, { token: i3$2.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
8509
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BookingCartGroupsComponent, isStandalone: true, selector: "simpo-booking-cart-groups", ngImport: i0, template: "<div class=\"booking-cart-groups\" [class.bcg-panel]=\"dialogRefPresent\">\n <div class=\"bcg-header\" *ngIf=\"dialogRefPresent\">\n <div class=\"bcg-header-text\">\n <div class=\"bcg-title\">Your Bookings</div>\n <div class=\"bcg-subline\">{{ drawerSubline }}</div>\n </div>\n <button class=\"bcg-close\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"bcg-banner\" *ngIf=\"!dialogRefPresent\">Bookings are placed one at a time and never merge, so each type keeps its own list and its own Continue Booking.</div>\n\n <div class=\"bcg-body\" *ngIf=\"!loading\">\n <ng-container *ngFor=\"let group of groups\">\n <div class=\"bcg-group\">\n <div class=\"bcg-group-header\">\n <span class=\"bcg-dot\" [ngClass]=\"group.mode === 'HOME_VISIT' ? 'bcg-dot-home' : 'bcg-dot-video'\"></span>\n <span class=\"bcg-group-title\">{{ group.title }}</span>\n <span class=\"bcg-group-meta\">{{ group.meta }}</span>\n </div>\n <div class=\"bcg-items\">\n <div class=\"bcg-item\" *ngFor=\"let item of group.items\">\n <button class=\"bcg-item-remove\" (click)=\"removeItem(group, item)\">\n <mat-icon>close</mat-icon>\n </button>\n <img class=\"bcg-item-img\" *ngIf=\"item.imgUrl\" [src]=\"item.imgUrl\" [alt]=\"item.itemName\" />\n <div class=\"bcg-item-img bcg-item-img-empty\" *ngIf=\"!item.imgUrl\"></div>\n <div class=\"bcg-item-name\">{{ item.itemName }}</div>\n <div class=\"bcg-item-note\">{{ group.itemNote }}</div>\n </div>\n </div>\n <div class=\"bcg-group-footer\">\n <button class=\"bcg-continue\" [ngClass]=\"group.colorClass\" (click)=\"continueBooking(group)\">Continue Booking</button>\n <a class=\"bcg-add-more\" *ngIf=\"!dialogRefPresent\" (click)=\"browse()\">Add more</a>\n </div>\n </div>\n </ng-container>\n\n <div class=\"bcg-later\" *ngIf=\"dialogRefPresent && !isEmpty\">\n <mat-icon class=\"bcg-later-icon\">storefront</mat-icon>\n <div class=\"bcg-later-text\">In-Store visits will appear here.</div>\n <div class=\"bcg-later-badge\">Later</div>\n </div>\n\n <div class=\"bcg-empty\" *ngIf=\"isEmpty\">\n <mat-icon class=\"bcg-empty-icon\">event_available</mat-icon>\n <div class=\"bcg-empty-title\">You haven't added anything yet.</div>\n <div class=\"bcg-empty-sub\">Try a piece at home or on a video call \u2014 add it here first, book when you're ready.</div>\n <button class=\"bcg-browse\" (click)=\"browse()\">Browse collections</button>\n </div>\n </div>\n</div>\n", styles: [".booking-cart-groups{display:flex;flex-direction:column;width:100%;background:#fff;font-family:inherit;border:1px solid #e2e8f0;border-radius:8px}.booking-cart-groups.bcg-panel{width:400px;max-width:92vw;height:100%;border:none;border-radius:0}.bcg-header{flex:none;padding:20px 22px;border-bottom:1px solid #EFEBE5;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.bcg-header-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.bcg-title{font-size:17px;font-weight:600;color:#1b2436}.bcg-subline{font-size:12.5px;color:#8a94a3}.bcg-close{flex:none;border:none;background:none;cursor:pointer;color:#8a94a3;line-height:0;padding:3px}.bcg-banner{font-size:12.5px;line-height:1.6;color:#8a94a3;background:#fbfaf8;border:1px solid #EDE8E2;border-radius:8px;padding:13px 15px;margin:18px 22px 0}.bcg-body{flex:1;min-height:0;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:18px}.bcg-group{border:1px solid #EDE8E2;border-radius:10px;overflow:hidden}.bcg-group-header{padding:12px 14px;background:#fbfaf8;border-bottom:1px solid #EFEBE5;display:flex;align-items:center;gap:9px}.bcg-dot{width:8px;height:8px;border-radius:999px;flex:none}.bcg-dot-home{background:#16233a}.bcg-dot-video{background:#7c3a11}.bcg-group-title{flex:1;font-size:14px;font-weight:600;color:#1b2436}.bcg-group-meta{font-size:11.5px;color:#8a94a3}.bcg-items{padding:12px 14px 4px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-height:340px;overflow-y:auto}.bcg-panel .bcg-items{grid-template-columns:repeat(2,1fr);gap:10px;max-height:260px}.bcg-item{position:relative;border:1px solid #F0ECE7;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;background:#fdfcfb}.bcg-panel .bcg-item{border-radius:8px;padding:8px;gap:6px}.bcg-item-img{width:100%;height:78px;border-radius:7px;object-fit:cover;background:#f3efe9}.bcg-panel .bcg-item-img{height:58px;border-radius:6px}.bcg-item-img-empty{background:#f3efe9}.bcg-item-name{font-size:12.5px;line-height:1.35;color:#1b2436;min-height:32px}.bcg-panel .bcg-item-name{font-size:11.5px;line-height:1.3;min-height:28px}.bcg-item-note{font-size:11px;color:#a9b1bd}.bcg-panel .bcg-item-note{font-size:10px}.bcg-item-remove{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:999px;border:none;background:#fff;box-shadow:0 1px 4px #0000001f;cursor:pointer;color:#8a94a3;display:grid;place-items:center;padding:0;line-height:0}.bcg-item-remove mat-icon{font-size:13px;height:13px;width:13px}.bcg-panel .bcg-item-remove{top:5px;right:5px;width:19px;height:19px}.bcg-panel .bcg-item-remove mat-icon{font-size:11px;height:11px;width:11px}.bcg-group-footer{padding:14px 18px;display:flex;align-items:center;gap:14px}.bcg-panel .bcg-group-footer{padding:12px 14px}.bcg-continue{flex:1;height:46px;border:none;border-radius:8px;color:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.bcg-continue.bcg-mode-home{background:#16233a}.bcg-continue.bcg-mode-video{background:#7c3a11}.bcg-add-more{font-size:12.5px;color:#7c3a11;cursor:pointer;text-decoration:underline;white-space:nowrap}.bcg-later{flex:none;border:1px dashed #DDD5CB;border-radius:10px;padding:14px;display:flex;align-items:center;gap:10px}.bcg-later-icon{color:#b6aba0!important;font-size:18px!important;height:18px!important;width:18px!important}.bcg-later-text{flex:1;font-size:12.5px;color:#9aa3b0}.bcg-later-badge{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#b6aba0;font-weight:600}.bcg-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px;text-align:center}.bcg-empty-icon{font-size:40px;height:40px;width:40px;color:#c9b7a2}.bcg-empty-title{font-size:16px;font-weight:600;color:#1b2436}.bcg-empty-sub{font-size:12.5px;line-height:1.6;color:#8a94a3;max-width:240px}.bcg-browse{height:42px;padding:0 20px;border:1.5px solid #7C3A11;border-radius:8px;background:#fff;color:#7c3a11;font-size:13px;font-weight:600;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
8509
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BookingCartGroupsComponent, isStandalone: true, selector: "simpo-booking-cart-groups", ngImport: i0, template: "<div class=\"booking-cart-groups\" [class.bcg-panel]=\"dialogRefPresent\">\n <div class=\"bcg-header\" *ngIf=\"dialogRefPresent\">\n <div class=\"bcg-header-text\">\n <div class=\"bcg-title\">Your Bookings</div>\n <div class=\"bcg-subline\">{{ drawerSubline }}</div>\n </div>\n <button class=\"bcg-close\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"bcg-banner\" *ngIf=\"!dialogRefPresent\">Bookings are placed one at a time and never merge, so each type keeps its own list and its own Continue Booking.</div>\n\n <div class=\"bcg-body\" *ngIf=\"!loading\">\n <ng-container *ngFor=\"let group of groups\">\n <div class=\"bcg-group\">\n <div class=\"bcg-group-header\">\n <span class=\"bcg-dot\" [ngClass]=\"group.mode === 'HOME_VISIT' ? 'bcg-dot-home' : 'bcg-dot-video'\"></span>\n <span class=\"bcg-group-title\">{{ group.title }}</span>\n <span class=\"bcg-group-meta\">{{ group.meta }}</span>\n </div>\n <div class=\"bcg-items\">\n <div class=\"bcg-item\" *ngFor=\"let item of group.items\">\n <button class=\"bcg-item-remove\" (click)=\"removeItem(group, item)\">\n <mat-icon>close</mat-icon>\n </button>\n <img class=\"bcg-item-img\" *ngIf=\"item.imgUrl\" [src]=\"item.imgUrl\" [alt]=\"item.itemName\" />\n <div class=\"bcg-item-img bcg-item-img-empty\" *ngIf=\"!item.imgUrl\"></div>\n <div class=\"bcg-item-name\">{{ item.itemName }}</div>\n <div class=\"bcg-item-note\">{{ group.itemNote }}</div>\n </div>\n </div>\n <div class=\"bcg-group-footer\">\n <button class=\"bcg-continue\" [ngClass]=\"group.colorClass\" (click)=\"continueBooking(group)\">Continue Booking</button>\n <a class=\"bcg-add-more\" *ngIf=\"!dialogRefPresent\" (click)=\"browse()\">Add more</a>\n </div>\n </div>\n </ng-container>\n\n <div class=\"bcg-later\" *ngIf=\"dialogRefPresent && !isEmpty\">\n <mat-icon class=\"bcg-later-icon\">storefront</mat-icon>\n <div class=\"bcg-later-text\">In-Store visits will appear here.</div>\n <div class=\"bcg-later-badge\">Later</div>\n </div>\n\n <div class=\"bcg-empty\" *ngIf=\"isEmpty\">\n <mat-icon class=\"bcg-empty-icon\">event_available</mat-icon>\n <div class=\"bcg-empty-title\">You haven't added anything yet.</div>\n <div class=\"bcg-empty-sub\">Try a piece at home or on a video call \u2014 add it here first, book when you're ready.</div>\n <button class=\"bcg-browse\" (click)=\"browse()\">Browse collections</button>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.booking-cart-groups{display:flex;flex-direction:column;width:100%;background:#fff;font-family:inherit;border:1px solid #e2e8f0;border-radius:8px}.booking-cart-groups.bcg-panel{width:400px;max-width:92vw;height:100%;border:none;border-radius:0}.bcg-header{flex:none;padding:20px 22px;border-bottom:1px solid #EFEBE5;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.bcg-header-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.bcg-title{font-size:17px;font-weight:600;color:#1b2436;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcg-subline{font-size:12.5px;color:#8a94a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcg-close{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:#8a94a3;line-height:0;padding:3px}.bcg-close mat-icon{font-size:20px;width:20px;height:20px}.bcg-banner{font-size:12.5px;line-height:1.6;color:#8a94a3;background:#fbfaf8;border:1px solid #EDE8E2;border-radius:8px;padding:13px 15px;margin:18px 22px 0}.bcg-body{flex:1;min-height:0;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:18px}.bcg-group{border:1px solid #EDE8E2;border-radius:10px;overflow:hidden}.bcg-group-header{padding:12px 14px;background:#fbfaf8;border-bottom:1px solid #EFEBE5;display:flex;align-items:center;gap:9px}.bcg-dot{width:8px;height:8px;border-radius:999px;flex:none}.bcg-dot-home{background:#16233a}.bcg-dot-video{background:#7c3a11}.bcg-group-title{flex:1;font-size:14px;font-weight:600;color:#1b2436}.bcg-group-meta{font-size:11.5px;color:#8a94a3}.bcg-items{padding:12px 14px 4px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-height:340px;overflow-y:auto}.bcg-panel .bcg-items{grid-template-columns:repeat(2,1fr);gap:10px;max-height:260px}.bcg-item{position:relative;border:1px solid #F0ECE7;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;background:#fdfcfb}.bcg-panel .bcg-item{border-radius:8px;padding:8px;gap:6px}.bcg-item-img{width:100%;height:78px;border-radius:7px;object-fit:cover;background:#f3efe9}.bcg-panel .bcg-item-img{height:58px;border-radius:6px}.bcg-item-img-empty{background:#f3efe9}.bcg-item-name{font-size:12.5px;line-height:1.35;color:#1b2436;min-height:32px}.bcg-panel .bcg-item-name{font-size:11.5px;line-height:1.3;min-height:28px}.bcg-item-note{font-size:11px;color:#a9b1bd}.bcg-panel .bcg-item-note{font-size:10px}.bcg-item-remove{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:999px;border:none;background:#fff;box-shadow:0 1px 4px #0000001f;cursor:pointer;color:#8a94a3;display:grid;place-items:center;padding:0;line-height:0}.bcg-item-remove mat-icon{font-size:13px;height:13px;width:13px}.bcg-panel .bcg-item-remove{top:5px;right:5px;width:19px;height:19px}.bcg-panel .bcg-item-remove mat-icon{font-size:11px;height:11px;width:11px}.bcg-group-footer{padding:14px 18px;display:flex;align-items:center;gap:14px}.bcg-panel .bcg-group-footer{padding:12px 14px}.bcg-continue{flex:1;height:46px;border:none;border-radius:8px;color:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.bcg-continue.bcg-mode-home{background:#16233a}.bcg-continue.bcg-mode-video{background:#7c3a11}.bcg-add-more{font-size:12.5px;color:#7c3a11;cursor:pointer;text-decoration:underline;white-space:nowrap}.bcg-later{flex:none;border:1px dashed #DDD5CB;border-radius:10px;padding:14px;display:flex;align-items:center;gap:10px}.bcg-later-icon{color:#b6aba0!important;font-size:18px!important;height:18px!important;width:18px!important}.bcg-later-text{flex:1;font-size:12.5px;color:#9aa3b0}.bcg-later-badge{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#b6aba0;font-weight:600}.bcg-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px;text-align:center}.bcg-empty-icon{font-size:40px;height:40px;width:40px;color:#c9b7a2}.bcg-empty-title{font-size:16px;font-weight:600;color:#1b2436}.bcg-empty-sub{font-size:12.5px;line-height:1.6;color:#8a94a3;max-width:240px}.bcg-browse{height:42px;padding:0 20px;border:1.5px solid #7C3A11;border-radius:8px;background:#fff;color:#7c3a11;font-size:13px;font-weight:600;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
8510
8510
  }
8511
8511
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookingCartGroupsComponent, decorators: [{
8512
8512
  type: Component,
8513
- args: [{ selector: 'simpo-booking-cart-groups', standalone: true, imports: [CommonModule, MatIconModule], template: "<div class=\"booking-cart-groups\" [class.bcg-panel]=\"dialogRefPresent\">\n <div class=\"bcg-header\" *ngIf=\"dialogRefPresent\">\n <div class=\"bcg-header-text\">\n <div class=\"bcg-title\">Your Bookings</div>\n <div class=\"bcg-subline\">{{ drawerSubline }}</div>\n </div>\n <button class=\"bcg-close\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"bcg-banner\" *ngIf=\"!dialogRefPresent\">Bookings are placed one at a time and never merge, so each type keeps its own list and its own Continue Booking.</div>\n\n <div class=\"bcg-body\" *ngIf=\"!loading\">\n <ng-container *ngFor=\"let group of groups\">\n <div class=\"bcg-group\">\n <div class=\"bcg-group-header\">\n <span class=\"bcg-dot\" [ngClass]=\"group.mode === 'HOME_VISIT' ? 'bcg-dot-home' : 'bcg-dot-video'\"></span>\n <span class=\"bcg-group-title\">{{ group.title }}</span>\n <span class=\"bcg-group-meta\">{{ group.meta }}</span>\n </div>\n <div class=\"bcg-items\">\n <div class=\"bcg-item\" *ngFor=\"let item of group.items\">\n <button class=\"bcg-item-remove\" (click)=\"removeItem(group, item)\">\n <mat-icon>close</mat-icon>\n </button>\n <img class=\"bcg-item-img\" *ngIf=\"item.imgUrl\" [src]=\"item.imgUrl\" [alt]=\"item.itemName\" />\n <div class=\"bcg-item-img bcg-item-img-empty\" *ngIf=\"!item.imgUrl\"></div>\n <div class=\"bcg-item-name\">{{ item.itemName }}</div>\n <div class=\"bcg-item-note\">{{ group.itemNote }}</div>\n </div>\n </div>\n <div class=\"bcg-group-footer\">\n <button class=\"bcg-continue\" [ngClass]=\"group.colorClass\" (click)=\"continueBooking(group)\">Continue Booking</button>\n <a class=\"bcg-add-more\" *ngIf=\"!dialogRefPresent\" (click)=\"browse()\">Add more</a>\n </div>\n </div>\n </ng-container>\n\n <div class=\"bcg-later\" *ngIf=\"dialogRefPresent && !isEmpty\">\n <mat-icon class=\"bcg-later-icon\">storefront</mat-icon>\n <div class=\"bcg-later-text\">In-Store visits will appear here.</div>\n <div class=\"bcg-later-badge\">Later</div>\n </div>\n\n <div class=\"bcg-empty\" *ngIf=\"isEmpty\">\n <mat-icon class=\"bcg-empty-icon\">event_available</mat-icon>\n <div class=\"bcg-empty-title\">You haven't added anything yet.</div>\n <div class=\"bcg-empty-sub\">Try a piece at home or on a video call \u2014 add it here first, book when you're ready.</div>\n <button class=\"bcg-browse\" (click)=\"browse()\">Browse collections</button>\n </div>\n </div>\n</div>\n", styles: [".booking-cart-groups{display:flex;flex-direction:column;width:100%;background:#fff;font-family:inherit;border:1px solid #e2e8f0;border-radius:8px}.booking-cart-groups.bcg-panel{width:400px;max-width:92vw;height:100%;border:none;border-radius:0}.bcg-header{flex:none;padding:20px 22px;border-bottom:1px solid #EFEBE5;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.bcg-header-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.bcg-title{font-size:17px;font-weight:600;color:#1b2436}.bcg-subline{font-size:12.5px;color:#8a94a3}.bcg-close{flex:none;border:none;background:none;cursor:pointer;color:#8a94a3;line-height:0;padding:3px}.bcg-banner{font-size:12.5px;line-height:1.6;color:#8a94a3;background:#fbfaf8;border:1px solid #EDE8E2;border-radius:8px;padding:13px 15px;margin:18px 22px 0}.bcg-body{flex:1;min-height:0;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:18px}.bcg-group{border:1px solid #EDE8E2;border-radius:10px;overflow:hidden}.bcg-group-header{padding:12px 14px;background:#fbfaf8;border-bottom:1px solid #EFEBE5;display:flex;align-items:center;gap:9px}.bcg-dot{width:8px;height:8px;border-radius:999px;flex:none}.bcg-dot-home{background:#16233a}.bcg-dot-video{background:#7c3a11}.bcg-group-title{flex:1;font-size:14px;font-weight:600;color:#1b2436}.bcg-group-meta{font-size:11.5px;color:#8a94a3}.bcg-items{padding:12px 14px 4px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-height:340px;overflow-y:auto}.bcg-panel .bcg-items{grid-template-columns:repeat(2,1fr);gap:10px;max-height:260px}.bcg-item{position:relative;border:1px solid #F0ECE7;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;background:#fdfcfb}.bcg-panel .bcg-item{border-radius:8px;padding:8px;gap:6px}.bcg-item-img{width:100%;height:78px;border-radius:7px;object-fit:cover;background:#f3efe9}.bcg-panel .bcg-item-img{height:58px;border-radius:6px}.bcg-item-img-empty{background:#f3efe9}.bcg-item-name{font-size:12.5px;line-height:1.35;color:#1b2436;min-height:32px}.bcg-panel .bcg-item-name{font-size:11.5px;line-height:1.3;min-height:28px}.bcg-item-note{font-size:11px;color:#a9b1bd}.bcg-panel .bcg-item-note{font-size:10px}.bcg-item-remove{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:999px;border:none;background:#fff;box-shadow:0 1px 4px #0000001f;cursor:pointer;color:#8a94a3;display:grid;place-items:center;padding:0;line-height:0}.bcg-item-remove mat-icon{font-size:13px;height:13px;width:13px}.bcg-panel .bcg-item-remove{top:5px;right:5px;width:19px;height:19px}.bcg-panel .bcg-item-remove mat-icon{font-size:11px;height:11px;width:11px}.bcg-group-footer{padding:14px 18px;display:flex;align-items:center;gap:14px}.bcg-panel .bcg-group-footer{padding:12px 14px}.bcg-continue{flex:1;height:46px;border:none;border-radius:8px;color:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.bcg-continue.bcg-mode-home{background:#16233a}.bcg-continue.bcg-mode-video{background:#7c3a11}.bcg-add-more{font-size:12.5px;color:#7c3a11;cursor:pointer;text-decoration:underline;white-space:nowrap}.bcg-later{flex:none;border:1px dashed #DDD5CB;border-radius:10px;padding:14px;display:flex;align-items:center;gap:10px}.bcg-later-icon{color:#b6aba0!important;font-size:18px!important;height:18px!important;width:18px!important}.bcg-later-text{flex:1;font-size:12.5px;color:#9aa3b0}.bcg-later-badge{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#b6aba0;font-weight:600}.bcg-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px;text-align:center}.bcg-empty-icon{font-size:40px;height:40px;width:40px;color:#c9b7a2}.bcg-empty-title{font-size:16px;font-weight:600;color:#1b2436}.bcg-empty-sub{font-size:12.5px;line-height:1.6;color:#8a94a3;max-width:240px}.bcg-browse{height:42px;padding:0 20px;border:1.5px solid #7C3A11;border-radius:8px;background:#fff;color:#7c3a11;font-size:13px;font-weight:600;cursor:pointer}\n"] }]
8513
+ args: [{ selector: 'simpo-booking-cart-groups', standalone: true, imports: [CommonModule, MatIconModule], template: "<div class=\"booking-cart-groups\" [class.bcg-panel]=\"dialogRefPresent\">\n <div class=\"bcg-header\" *ngIf=\"dialogRefPresent\">\n <div class=\"bcg-header-text\">\n <div class=\"bcg-title\">Your Bookings</div>\n <div class=\"bcg-subline\">{{ drawerSubline }}</div>\n </div>\n <button class=\"bcg-close\" (click)=\"close()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"bcg-banner\" *ngIf=\"!dialogRefPresent\">Bookings are placed one at a time and never merge, so each type keeps its own list and its own Continue Booking.</div>\n\n <div class=\"bcg-body\" *ngIf=\"!loading\">\n <ng-container *ngFor=\"let group of groups\">\n <div class=\"bcg-group\">\n <div class=\"bcg-group-header\">\n <span class=\"bcg-dot\" [ngClass]=\"group.mode === 'HOME_VISIT' ? 'bcg-dot-home' : 'bcg-dot-video'\"></span>\n <span class=\"bcg-group-title\">{{ group.title }}</span>\n <span class=\"bcg-group-meta\">{{ group.meta }}</span>\n </div>\n <div class=\"bcg-items\">\n <div class=\"bcg-item\" *ngFor=\"let item of group.items\">\n <button class=\"bcg-item-remove\" (click)=\"removeItem(group, item)\">\n <mat-icon>close</mat-icon>\n </button>\n <img class=\"bcg-item-img\" *ngIf=\"item.imgUrl\" [src]=\"item.imgUrl\" [alt]=\"item.itemName\" />\n <div class=\"bcg-item-img bcg-item-img-empty\" *ngIf=\"!item.imgUrl\"></div>\n <div class=\"bcg-item-name\">{{ item.itemName }}</div>\n <div class=\"bcg-item-note\">{{ group.itemNote }}</div>\n </div>\n </div>\n <div class=\"bcg-group-footer\">\n <button class=\"bcg-continue\" [ngClass]=\"group.colorClass\" (click)=\"continueBooking(group)\">Continue Booking</button>\n <a class=\"bcg-add-more\" *ngIf=\"!dialogRefPresent\" (click)=\"browse()\">Add more</a>\n </div>\n </div>\n </ng-container>\n\n <div class=\"bcg-later\" *ngIf=\"dialogRefPresent && !isEmpty\">\n <mat-icon class=\"bcg-later-icon\">storefront</mat-icon>\n <div class=\"bcg-later-text\">In-Store visits will appear here.</div>\n <div class=\"bcg-later-badge\">Later</div>\n </div>\n\n <div class=\"bcg-empty\" *ngIf=\"isEmpty\">\n <mat-icon class=\"bcg-empty-icon\">event_available</mat-icon>\n <div class=\"bcg-empty-title\">You haven't added anything yet.</div>\n <div class=\"bcg-empty-sub\">Try a piece at home or on a video call \u2014 add it here first, book when you're ready.</div>\n <button class=\"bcg-browse\" (click)=\"browse()\">Browse collections</button>\n </div>\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.booking-cart-groups{display:flex;flex-direction:column;width:100%;background:#fff;font-family:inherit;border:1px solid #e2e8f0;border-radius:8px}.booking-cart-groups.bcg-panel{width:400px;max-width:92vw;height:100%;border:none;border-radius:0}.bcg-header{flex:none;padding:20px 22px;border-bottom:1px solid #EFEBE5;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.bcg-header-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.bcg-title{font-size:17px;font-weight:600;color:#1b2436;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcg-subline{font-size:12.5px;color:#8a94a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bcg-close{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:#8a94a3;line-height:0;padding:3px}.bcg-close mat-icon{font-size:20px;width:20px;height:20px}.bcg-banner{font-size:12.5px;line-height:1.6;color:#8a94a3;background:#fbfaf8;border:1px solid #EDE8E2;border-radius:8px;padding:13px 15px;margin:18px 22px 0}.bcg-body{flex:1;min-height:0;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:18px}.bcg-group{border:1px solid #EDE8E2;border-radius:10px;overflow:hidden}.bcg-group-header{padding:12px 14px;background:#fbfaf8;border-bottom:1px solid #EFEBE5;display:flex;align-items:center;gap:9px}.bcg-dot{width:8px;height:8px;border-radius:999px;flex:none}.bcg-dot-home{background:#16233a}.bcg-dot-video{background:#7c3a11}.bcg-group-title{flex:1;font-size:14px;font-weight:600;color:#1b2436}.bcg-group-meta{font-size:11.5px;color:#8a94a3}.bcg-items{padding:12px 14px 4px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-height:340px;overflow-y:auto}.bcg-panel .bcg-items{grid-template-columns:repeat(2,1fr);gap:10px;max-height:260px}.bcg-item{position:relative;border:1px solid #F0ECE7;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;background:#fdfcfb}.bcg-panel .bcg-item{border-radius:8px;padding:8px;gap:6px}.bcg-item-img{width:100%;height:78px;border-radius:7px;object-fit:cover;background:#f3efe9}.bcg-panel .bcg-item-img{height:58px;border-radius:6px}.bcg-item-img-empty{background:#f3efe9}.bcg-item-name{font-size:12.5px;line-height:1.35;color:#1b2436;min-height:32px}.bcg-panel .bcg-item-name{font-size:11.5px;line-height:1.3;min-height:28px}.bcg-item-note{font-size:11px;color:#a9b1bd}.bcg-panel .bcg-item-note{font-size:10px}.bcg-item-remove{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:999px;border:none;background:#fff;box-shadow:0 1px 4px #0000001f;cursor:pointer;color:#8a94a3;display:grid;place-items:center;padding:0;line-height:0}.bcg-item-remove mat-icon{font-size:13px;height:13px;width:13px}.bcg-panel .bcg-item-remove{top:5px;right:5px;width:19px;height:19px}.bcg-panel .bcg-item-remove mat-icon{font-size:11px;height:11px;width:11px}.bcg-group-footer{padding:14px 18px;display:flex;align-items:center;gap:14px}.bcg-panel .bcg-group-footer{padding:12px 14px}.bcg-continue{flex:1;height:46px;border:none;border-radius:8px;color:#fff;font-size:13.5px;font-weight:600;cursor:pointer}.bcg-continue.bcg-mode-home{background:#16233a}.bcg-continue.bcg-mode-video{background:#7c3a11}.bcg-add-more{font-size:12.5px;color:#7c3a11;cursor:pointer;text-decoration:underline;white-space:nowrap}.bcg-later{flex:none;border:1px dashed #DDD5CB;border-radius:10px;padding:14px;display:flex;align-items:center;gap:10px}.bcg-later-icon{color:#b6aba0!important;font-size:18px!important;height:18px!important;width:18px!important}.bcg-later-text{flex:1;font-size:12.5px;color:#9aa3b0}.bcg-later-badge{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#b6aba0;font-weight:600}.bcg-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px;text-align:center}.bcg-empty-icon{font-size:40px;height:40px;width:40px;color:#c9b7a2}.bcg-empty-title{font-size:16px;font-weight:600;color:#1b2436}.bcg-empty-sub{font-size:12.5px;line-height:1.6;color:#8a94a3;max-width:240px}.bcg-browse{height:42px;padding:0 20px;border:1.5px solid #7C3A11;border-radius:8px;background:#fff;color:#7c3a11;font-size:13px;font-weight:600;cursor:pointer}\n"] }]
8514
8514
  }], ctorParameters: () => [{ type: BookingProductCartService }, { type: StorageServiceService }, { type: i2$2.Router }, { type: i3$2.MatDialogRef, decorators: [{
8515
8515
  type: Optional
8516
8516
  }] }] });
@@ -10796,7 +10796,7 @@ class CartComponent extends BaseSection {
10796
10796
  });
10797
10797
  }
10798
10798
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$2.Router }, { token: RestService }, { token: i3$2.MatDialog }, { token: StorageServiceService }, { token: i6$1.MessageService }, { token: i8$1.MatBottomSheet }, { token: i2$2.ActivatedRoute }, { token: BookingProductCartService }, { token: MAT_DIALOG_DATA, optional: true }, { token: i3$2.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
10799
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], viewQueries: [{ propertyName: "d2", first: true, predicate: ["d2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n <ng-container *ngIf=\"data\">\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\n <div class=\"bar\"></div>\n <span class=\"timeline isActive\">Address</span>\n <div class=\"bar\"></div>\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\n </div>\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && appointmentSettings?.homeVisitProductsEnabled\">\n <!-- && appointmentSettings?.homeVisitProductsEnabled\" -->\n <div class=\"cart-tabs\" [id]=\"data?.id\">\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\n <div [ngClass]=\"{'selected-cart-tab': cartType==='BOOKING'}\" (click)=\"cartType='BOOKING'\">Booking Cart\n ({{getTotalBookingItems}})</div>\n </div>\n </div>\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\n [simpoAnimation]=\"styles?.animation\">\n <ng-container>\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\n <ng-container\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"cartType === 'BOOKING'\">\n <div class=\"w-100\">\n <simpo-booking-cart-groups></simpo-booking-cart-groups>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex checkoutPage\"\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\n </ng-container>\n </div>\n\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n </section>\n\n <div class=\"schedule-panel-overlay\" *ngIf=\"schedulePanelOpen\">\n <button type=\"button\" class=\"schedule-panel-backdrop\" (click)=\"closeSchedulePanel()\"></button>\n <div class=\"schedule-panel\">\n <div class=\"schedule-panel-header\">\n <div>\n <div class=\"schedule-panel-title\">Schedule a Video Call</div>\n <div class=\"schedule-panel-subtitle\">Choose which pieces to include</div>\n </div>\n <button type=\"button\" class=\"schedule-panel-close\" (click)=\"closeSchedulePanel()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div class=\"schedule-panel-body\">\n <button type=\"button\" class=\"schedule-panel-row\" *ngFor=\"let item of responseData?.orderedItems\"\n [class.selected]=\"isPanelSelected(item)\" (click)=\"togglePanelSelection(item)\">\n <div class=\"schedule-panel-checkbox\" [class.checked]=\"isPanelSelected(item)\">\n <mat-icon *ngIf=\"isPanelSelected(item)\">check</mat-icon>\n </div>\n <img class=\"schedule-panel-thumb\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\">\n <div class=\"schedule-panel-info\">\n <div class=\"schedule-panel-name\">{{item.itemName}}</div>\n </div>\n </button>\n </div>\n <div class=\"schedule-panel-footer\">\n <div class=\"schedule-panel-selection-line\">{{panelSelectionLine}}</div>\n <button type=\"button\" class=\"schedule-panel-cta\" [disabled]=\"panelInvalid\" (click)=\"confirmSchedulePanel()\">Continue</button>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!data\">\n <section class=\"cart-window\">\n <div class=\"heading-large lh-2 mb-3 header-sec\">\n <div class=\"d-flex align-items-center\">\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n <span>Your Cart</span>\n </div>\n <div class=\"saving\"></div>\n </div>\n <div class=\"offers\">\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n <span>Avail Offers / Coupons</span>\n </div>\n <mat-icon>keyboard_arrow_right</mat-icon>\n </div>\n <div class=\"small-items\">\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n <div class=\"small-item\">\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"small-product-img\"\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\">\n </div>\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n <div class=\"small-item-quantity\">\n <span class=\"cursor\">-</span>\n <span>{{item.quantity}}</span>\n <span class=\"cursor\">+</span>\n </div>\n <div class=\"small-item-price\">\n <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\n </div>\n <!-- <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n </div> -->\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"fotter-sec\">\n <div class=\"delivery-add d-flex\">\n <mat-icon>home</mat-icon>\n <div class=\"address\">Tetsting</div>\n </div>\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\n </div>\n </section>\n </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n<ng-template #CouponList>\n <section class=\"coupons-listing-section\">\n <div class=\"coupon-heading\">\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Apply Coupon</div>\n </div>\n <!-- <div class=\"coupon-search-sec\">\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\n </div> -->\n <div class=\"coupon-listing\">\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"coupon-details\"\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\n *ngIf=\"couponDetails?.status\">\n <div class=\"details__coupon-heading\">\n <div class=\"coupon-brief\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}</div>\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\n </div>\n </div>\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\n </div> -->\n </div>\n <ng-container>\n <!-- *ngIf=\"couponDetails.status\" -->\n <div class=\"details-divider\"></div>\n <ul class=\"details__coupon-terms\">\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\n </ul>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #RedemptionVouchers>\n <section class=\"vouchers-listing-section d-flex flex-column\">\n <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\n <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Coupons & Vouchers</div>\n </div>\n\n <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\n (click)=\"redemptionType = 'COUPONS'\">\n Coupons\n </div>\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\n (click)=\"redemptionType = 'VOUCHERS'\">\n Vouchers\n </div>\n </div> -->\n\n <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\n <div class=\"d-flex align-items-center tab-container gap-3\">\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\n Rewards\n </div>\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\n (click)=\"redemptionCouponType = 'DISCOUNTS'\">\n Discounts\n </div>\n </div>\n <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\n <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\n }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\n Apply</div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\n <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\n voucher.maxRedeemableAmount | number }}</span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\n <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\"\n [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}\n </div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n {{ couponDetails.discountDescription | titlecase }}\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\n (click)=\"applyCoupon(couponDetails)\">\n Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\n </span>\n </div>\n\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyDiscounts>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no discount coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\n </div>\n </ng-template>\n </div>\n\n <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\n <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #CARTPAGE>\n <div class=\"container\">\n <div class=\"main-content\">\n <div class=\"cart-items\">\n <div class=\"cart-header\">\n <h2>Your Cart</h2>\n </div>\n <ng-container\n *ngTemplateOutlet=\"CARTITEM;context:{data: responseData?.orderedItems}\"></ng-container>\n </div>\n </div>\n\n <div class=\"sidebar\">\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"getUrl()\">\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\n <div class=\"toogle-switch\">\n <div class=\"form-check form-switch\">\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\n </div>\n </div>\n </div>\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\n Select Matured Scheme\n </div> -->\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\n *ngIf=\"selectedRedemption\">\n Selected Scheme\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\n scheme-5000/M <span>Change</span></div>\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\n </div>\n </div> -->\n </div>\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\n </div>\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\">\n <div class=\"coupon-left\">\n <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\n Coupon</span>\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\n Applied</span>\n </div>\n <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"chevron-icon\" (click)=\"openDialog(CouponList)\">\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n <span *ngIf=\"responseData.billdetails?.couponId\"\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\n </div>\n\n <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && appointmentSettings?.videoCallProductsEnabled\">\n <div class=\"promo-banner-row\">\n <div class=\"promo-text\">\n <h3>See It Before You Buy It</h3>\n <p>Experience our designs in detail via video call</p>\n </div>\n <button class=\"see-live-btn\" [disabled]=\"!hasCartItems\" (click)=\"openSchedulePanel()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-video\">\n <path d=\"m22 8-6 4 6 4V8Z\" />\n <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\n </svg>\n CONTINUE TO SCHEDULE\n </button>\n </div>\n <div class=\"video-selection-line\">{{videoSelectionLine}}</div>\n <a class=\"video-cart-hint\" *ngIf=\"videoCartCount > 0\" (click)=\"viewPendingVideoCart()\">{{videoCartCount}}\n item{{videoCartCount === 1 ? '' : 's'}} waiting in your Video Call cart \u2014 view it</a>\n </div>\n\n <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\n *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\n <div class=\"fs-14 fw-500\">\n Rewards Available\n </div>\n <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\n <div class=\"avb_pts mt-2 mb-2\">\n <span class=\"fs-16 fw-500 total_points text-secondary\">\n <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\n pts\n </span>\n <div class=\"total_value fs-12 text-secondary\">\n = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\n </div>\n </div>\n <div class=\"wallte_icon\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mt-3\">\n <div class=\"redemable_text\">\n <div class=\"title_text\">\n <div class=\"fs-14 fw-500\">\n Redeem Points\n </div>\n <div class=\"fs-13 fs-400\">\n Use your points for discount\n </div>\n </div>\n </div>\n <div class=\"toggle_btn\">\n <label class=\"switch\">\n <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\n (click)=\"onPointsRedeemingChange($event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n </div>\n <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\n <div class=\"d-flex align-items-start gap-2\">\n <div class=\"success_icon\">\n <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\n </div>\n <div class=\"success_text\">\n <div class=\"fs-13 fw-500\">\n You're saving \u20B9\n {{totalSavingAmt || 0}}\n </div>\n <div class=\"fs-12 fs-400 text-success\">\n {{totalSavingPoints}} points remaining after redemption\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Existing coupon row (keep as-is) -->\n <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\n <div class=\"d-flex justify-content-between align-items-center w-100\">\n <div class=\"coupon-left\">\n Apply Coupon\n </div>\n <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\n </div>\n\n <!-- Applied Coupon Success Banner -->\n <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\n *ngIf=\"selectedVoucherId\">\n <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\n <mat-icon class=\"success-check\">check_circle</mat-icon>\n <div class=\"applied-coupon-info\">\n <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\n <div class=\"applied-coupon-saving\">You're saving\n <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\n <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\n </div>\n\n </div>\n </div>\n <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\n (click)=\"removeRedemptionCoupon($event)\">Remove</div>\n </div>\n </div>\n\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\n <div class=\"delivery-header\">\n <mat-icon>gps_fixed</mat-icon>\n <span>Delivering to</span>\n <span class=\"pincode\">{{pincode}}</span>\n <!-- <a class=\"change-link\">Change Pincode</a> -->\n </div>\n </div>\n\n <div class=\"summary-section\">\n <div class=\"summary-title\">Summary</div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Subtotal</span>\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\n <span class=\"summary-label\">Points Redeemed</span>\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\n <span class=\"summary-label\">Discount Amount</span>\n <span class=\"summary-value\">\n {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Shipping</span>\n <span class=\"summary-value\"\n [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\n {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\n (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Estimated Tax</span>\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Total</span>\n <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n number: '1.0-2' }}</span>\n\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n number: '1.0-2' }}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (percentageReduced || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\n Cart'}}</button>\n\n </div>\n </div>\n <!-- <ng-container *ngIf=\"recommededData?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\"\n [responseData]=\"recommededData\"></simpo-featured-products>\n </ng-container> -->\n</ng-template>\n<ng-template #CHECKOUTPAGE>\n <div class=\"checkout-left-panel\">\n <div class=\"checkout-main-content\">\n <!-- <div class=\"delivery-options\">\n <div class=\"delivery-option active\">\n <div class=\"delivery-icon\"></div>\n HOME DELIVERY\n </div>\n <div class=\"delivery-option\">\n <div class=\"delivery-icon\"></div>\n STORE PICK-UP\n </div>\n </div> -->\n\n <div class=\"section-title\">Shipping Address</div>\n\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n </div>\n\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\n\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\n *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">\n Place Order\n </button>\n <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\n Loading...\n </button>\n\n </div>\n </div>\n\n <div class=\"checkout-right-panel\">\n <div class=\"order-summary\">\n <div class=\"summary-title\">Order Summary</div>\n\n <div class=\"checkout-product\">\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\n alt=\"\">\n <div class=\"product-details\">\n <div class=\"product-name\">{{item.itemName}}</div>\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\n </div>\n </div>\n\n </div>\n\n <div class=\"price-breakdown\">\n <div class=\"price-row\">\n <span>Total Price</span>\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\n ?? 0) | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\">\n <span>Total Tax</span>\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number:\n '1.0-2'}}</span>\n </div>\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\n <span class=\"summary-label\">Redeem Amount</span>\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\n '1.0-2'}}</span>\n </div>\n\n <div class=\"price-row discount\" *ngIf=\"responseData?.billdetails?.discountAmount && !isJewellery\">\n <span>Coupon Discount</span>\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\n | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\"\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n <span>Delivery Charge</span>\n <span>{{responseData.billdetails.deliveryCharges\n |\n number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\n <span>TOTAL AMOUNT</span>\n <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #CARTITEM let-products=\"data\">\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\n <div class=\"item-left\">\n <div class=\"item-image\">\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\n </div>\n <div class=\"item-details\">\n <h3 class=\"item-title\">{{item.itemName}}</h3>\n <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\n {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"item-right\">\n <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\n <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\n <mat-icon>remove</mat-icon>\n </button>\n <span class=\"qty-value px-3\">{{item.quantity}}</span>\n <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n\n <div class=\"item-price\">\n \u20B9{{item.sellingPrice | number: '1.0-2'}}\n </div>\n\n <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\n <path d=\"M3 6h18\" />\n <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\n <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\n <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\n <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\n </svg>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #EMPTYITEM>\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\n <div class=\"empty-cart-container d-flex flex-column\">\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"cart-text content-side\">\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"d-flex justify-content-center\"\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\n </div>\n </ng-container>\n </div>\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n </div>\n </section>\n</ng-template>\n\n<ng-template #SCHEME_REDEMPTION>\n <div class=\"modal-body\">\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\n <label for=\"individual\" class=\"scheme-card\">\n <div class=\"scheme-info d-flex gap-1\">\n <div class=\"form-check-radio\">\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\n </div>\n <div class=\"right-side\">\n <div class=\"scheme-name\">\n <div class=\"scheme-title\">Individual Investment Scheme</div>\n <div class=\"scheme-monthly\">\u20B98000/M</div>\n </div>\n <div class=\"scheme-details\">\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\n </div>\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\n </div>\n </div>\n </label>\n </div>\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\n </div>\n </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.cart-header{padding:16px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.cart-header h2{margin:0;font-size:18px;font-weight:500;color:#0f172a}.cart-item{display:flex!important;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;gap:20px;padding:0 8px;transition:background .2s}.cart-item:hover{background:#fbfcfe}.item-left{display:flex;align-items:center;flex:1}.item-right{display:flex;align-items:center;padding:15px;gap:32px}.item-image img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid #f1f5f9}.item-details{display:flex;flex-direction:column;gap:4px}.item-title{margin:0;font-size:15px;font-weight:600;color:#0f172a;line-height:1.4}.item-subtitle{font-size:13px;color:#64748b;font-weight:400}.quantity-control{display:flex;align-items:center;border:1.5px solid #e2e8f0;border-radius:7px;overflow:hidden;height:38px;background:#fff;width:fit-content}.qty-btn{width:38px;height:100%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .2s ease}.qty-btn:hover{background:#f8fafc;color:#0f172a}.qty-btn mat-icon{font-size:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.qty-value{width:32px;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:#0f172a;border-left:1.5px solid #e2e8f0;border-right:1.5px solid #e2e8f0}.item-price{font-size:18px;font-weight:700;color:#0f172a;min-width:60px;text-align:right;letter-spacing:-.01em}.delete-btn-circle{width:36px;height:36px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ef4444;transition:all .2s ease}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:scale(1.05);color:#dc2626}.delete-btn-circle svg{width:18px;height:18px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;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;width:100%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.fs-12{font-size:12px}.fs-18{font-size:18px}.b-1-b{border-width:0px 1px;border-style:solid;border-color:#000}.container{max-width:unset;padding:24px;display:flex;gap:24px;width:100%!important}.main-content{background:#fff;border-radius:12px;width:70%}.promo-banner{padding:16px 20px;display:flex;flex-direction:column;gap:10px;border-radius:8px;border:1px solid #e2e8f0}.promo-banner-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn:disabled{color:#94a3b8;cursor:not-allowed;box-shadow:none}.see-live-btn:disabled:hover{background:#fff;border-color:#e2e8f0;transform:none}.see-live-btn svg{color:#6366f1}.video-selection-line{font-size:.8rem;color:#64748b}.video-cart-hint{font-size:.8rem;color:#6366f1;cursor:pointer;text-decoration:underline;width:max-content}.schedule-panel-overlay{position:fixed;inset:0;background:#141a2666;z-index:1200}.schedule-panel-backdrop{position:absolute;inset:0;border:none;background:none;cursor:default;padding:0}.schedule-panel{position:absolute;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:#fff;box-shadow:-20px 0 50px -20px #141a2659;display:flex;flex-direction:column}.schedule-panel-header{flex:none;padding:20px 22px;border-bottom:1px solid #e2e8f0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.schedule-panel-title{font-size:17px;font-weight:600;color:#1b2436}.schedule-panel-subtitle{font-size:12.5px;color:#64748b}.schedule-panel-close{flex:none;border:none;background:none;cursor:pointer;color:#64748b;line-height:0;padding:3px}.schedule-panel-body{flex:1;min-height:0;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:10px}.schedule-panel-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;cursor:pointer;width:100%;background:#fff;border:1px solid #e2e8f0;text-align:left}.schedule-panel-row.selected{background:#f5f3ff;border-color:#c7d2fe}.schedule-panel-checkbox{width:18px;height:18px;flex:none;border:1.5px solid #cbd5e1;border-radius:4px;background:#fff;display:grid;place-items:center}.schedule-panel-checkbox.checked{background:#6366f1;border-color:#6366f1}.schedule-panel-checkbox mat-icon{color:#fff!important;font-size:13px!important;height:13px!important;width:13px!important}.schedule-panel-thumb{width:46px;height:46px;border-radius:6px;object-fit:cover;flex:none;background:#f3efe9}.schedule-panel-info{flex:1}.schedule-panel-name{font-size:13.5px;color:#1b2436}.schedule-panel-footer{flex:none;padding:16px 22px;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;gap:10px}.schedule-panel-selection-line{font-size:11.5px;color:#64748b}.schedule-panel-cta{width:100%;height:48px;border:none;border-radius:8px;background:#7c3a11;color:#fff;font-size:14px;font-weight:600;cursor:pointer}.schedule-panel-cta:disabled{background:#cbd5e1;cursor:not-allowed}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:32%}.coupon-section{border-radius:8px;padding:10px 15px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.coupon-section:hover{border-color:#cbd5e1;background-color:#f8fafc}.chevron-icon{color:#94a3b8;transition:transform .2s ease}.coupon-section:hover .chevron-icon{transform:translate(2px);color:#64748b}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.coupon-icon mat-icon{font-size:17px;width:17px!important;height:19px!important}.coupon-text{font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.summary-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:20px;letter-spacing:-.01em}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.summary-row:last-child{margin-bottom:0}.summary-label{font-size:14px;font-weight:400;color:#64748b}.summary-value{font-size:14px;font-weight:500;color:#0f172a}.summary-divider{height:1px;background:#f1f5f9;margin:16px 0;width:100%}.total-row .summary-label{font-size:16px;font-weight:600;color:#0f172a}.total-row .summary-value{font-size:16px;font-weight:700;color:#0f172a}.total-row{border-top:1px solid #e2e8f0;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px}.total-value{font-weight:700;font-size:18px}.place-order-btn{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;align-items:center;width:max-content;border-radius:8px;border:1px solid #e2e8f0}.cart-tabs div{padding:7px 10px;cursor:pointer;font-size:14px}.selected-cart-tab{margin:6px;background:#f1f5f9;border-radius:5px;color:#000!important;font-weight:500}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.cart-item{flex-direction:column!important;align-items:flex-start!important;padding:16px 12px!important;gap:16px!important}.item-left{width:100%!important;gap:16px!important;align-items:flex-start!important}.item-image{width:86px!important;height:86px!important;flex-shrink:0!important}.item-right{width:100%!important;justify-content:space-between!important;padding:0!important;gap:12px!important;margin-top:4px!important}.item-price{flex:1!important;text-align:right!important;margin-right:8px!important;font-size:16px!important}.item-title{font-size:14px!important;-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.quantity-control{height:34px!important}.qty-btn{width:34px!important}.qty-value{width:28px!important;font-size:13px!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}.vouchers-listing-section{min-width:unset!important;width:100vw!important}.separator{display:none!important}.coupon-meta{display:grid!important;grid-template-columns:1fr 1fr!important}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.w-fit{width:fit-content!important}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}.add-to-cart-parent{width:max-content;border:1px solid #000000;border-radius:8px}.cursor{cursor:pointer}.cart-text{max-width:600px;margin:0 auto;text-align:center}.cart-text div{word-break:break-word;overflow-wrap:break-word;white-space:normal}.switch{position:relative;display:inline-block;width:45px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:3px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(24px)}.vouchers-listing-section{position:relative;width:fit-content;min-width:500px;z-index:100;background:#fff;height:100vh}.vouchers-listing-section .coupon-heading{border-bottom:1px solid #eee}.vouchers-listing-section .coupon-listing{padding:12px 16px;overflow-y:auto;height:calc(97vh - 100px)}.voucher-details{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px #00000042}.voucher-details .coupon-brief .apply-offer-btn{background:#111;color:#fff;border-radius:10px;padding:6px 16px}.voucher-details .coupon-code-box{border:1.5px dashed #bbb;border-radius:8px;padding:8px 12px;margin-bottom:10px}.voucher-details .coupon-code-box .code-label{font-size:11px;color:#888;margin-bottom:2px}.voucher-details .coupon-code-box .code-row .code-value{font-weight:700;font-size:15px;letter-spacing:1px}.voucher-details .coupon-meta .clock-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.applied-coupon-card{background:#f0fff8;border-radius:12px;padding:12px 16px}.applied-coupon-card .applied-coupon-left .success-check{color:#22c55e;font-size:22px}.applied-coupon-card .applied-coupon-left .applied-coupon-code{font-weight:700;font-size:14px}.applied-coupon-card .applied-coupon-left .applied-coupon-saving{font-size:13px;color:#097d5f;margin-top:2px}.active-type{background:#111!important;color:#fff!important}.redemption-type{text-align:center;border-radius:10px;padding:6px 16px;background:#d3d3d36b;width:-webkit-fill-available!important}.wallte_icon{background:#000;border-radius:50px;padding:5px 9px 7px}.wallte_icon img{width:18px;height:18px}.fw-600{font-weight:600}.coupon-type{width:fit-content!important;border-radius:26px!important;background:transparent!important;border:1px solid #afafaf;color:#393838;text-align:center;padding:6px 16px}.active-coupon{background:transparent!important;border:2px solid black!important;color:#000!important}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type:
10799
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], viewQueries: [{ propertyName: "d2", first: true, predicate: ["d2"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n <ng-container *ngIf=\"data\">\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\n <div class=\"bar\"></div>\n <span class=\"timeline isActive\">Address</span>\n <div class=\"bar\"></div>\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\n </div>\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && (appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled)\">\n <!-- && appointmentSettings?.homeVisitProductsEnabled\" -->\n <div class=\"cart-tabs\" [id]=\"data?.id\">\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\n <div [ngClass]=\"{'selected-cart-tab': cartType==='BOOKING'}\" (click)=\"cartType='BOOKING'\">Booking Cart\n ({{getTotalBookingItems}})</div>\n </div>\n </div>\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\n [simpoAnimation]=\"styles?.animation\">\n <ng-container>\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\n <ng-container\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"cartType === 'BOOKING'\">\n <div class=\"w-100\">\n <simpo-booking-cart-groups></simpo-booking-cart-groups>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex checkoutPage\"\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\n </ng-container>\n </div>\n\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n </section>\n\n <div class=\"schedule-panel-overlay\" *ngIf=\"schedulePanelOpen\">\n <button type=\"button\" class=\"schedule-panel-backdrop\" (click)=\"closeSchedulePanel()\"></button>\n <div class=\"schedule-panel\">\n <div class=\"schedule-panel-header\">\n <div>\n <div class=\"schedule-panel-title\">Schedule a Video Call</div>\n <div class=\"schedule-panel-subtitle\">Choose which pieces to include</div>\n </div>\n <button type=\"button\" class=\"schedule-panel-close\" (click)=\"closeSchedulePanel()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div class=\"schedule-panel-body\">\n <button type=\"button\" class=\"schedule-panel-row\" *ngFor=\"let item of responseData?.orderedItems\"\n [class.selected]=\"isPanelSelected(item)\" (click)=\"togglePanelSelection(item)\">\n <div class=\"schedule-panel-checkbox\" [class.checked]=\"isPanelSelected(item)\">\n <mat-icon *ngIf=\"isPanelSelected(item)\">check</mat-icon>\n </div>\n <img class=\"schedule-panel-thumb\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\">\n <div class=\"schedule-panel-info\">\n <div class=\"schedule-panel-name\">{{item.itemName}}</div>\n </div>\n </button>\n </div>\n <div class=\"schedule-panel-footer\">\n <div class=\"schedule-panel-selection-line\">{{panelSelectionLine}}</div>\n <button type=\"button\" class=\"schedule-panel-cta\" [disabled]=\"panelInvalid\" (click)=\"confirmSchedulePanel()\">Continue</button>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!data\">\n <section class=\"cart-window\">\n <div class=\"heading-large lh-2 mb-3 header-sec\">\n <div class=\"d-flex align-items-center\">\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n <span>Your Cart</span>\n </div>\n <div class=\"saving\"></div>\n </div>\n <div class=\"offers\">\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n <span>Avail Offers / Coupons</span>\n </div>\n <mat-icon>keyboard_arrow_right</mat-icon>\n </div>\n <div class=\"small-items\">\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n <div class=\"small-item\">\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"small-product-img\"\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\">\n </div>\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n <div class=\"small-item-quantity\">\n <span class=\"cursor\">-</span>\n <span>{{item.quantity}}</span>\n <span class=\"cursor\">+</span>\n </div>\n <div class=\"small-item-price\">\n <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\n </div>\n <!-- <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n </div> -->\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"fotter-sec\">\n <div class=\"delivery-add d-flex\">\n <mat-icon>home</mat-icon>\n <div class=\"address\">Tetsting</div>\n </div>\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\n </div>\n </section>\n </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n<ng-template #CouponList>\n <section class=\"coupons-listing-section\">\n <div class=\"coupon-heading\">\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Apply Coupon</div>\n </div>\n <!-- <div class=\"coupon-search-sec\">\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\n </div> -->\n <div class=\"coupon-listing\">\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"coupon-details\"\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\n *ngIf=\"couponDetails?.status\">\n <div class=\"details__coupon-heading\">\n <div class=\"coupon-brief\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}</div>\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\n </div>\n </div>\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\n </div> -->\n </div>\n <ng-container>\n <!-- *ngIf=\"couponDetails.status\" -->\n <div class=\"details-divider\"></div>\n <ul class=\"details__coupon-terms\">\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\n </ul>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #RedemptionVouchers>\n <section class=\"vouchers-listing-section d-flex flex-column\">\n <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\n <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Coupons & Vouchers</div>\n </div>\n\n <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\n (click)=\"redemptionType = 'COUPONS'\">\n Coupons\n </div>\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\n (click)=\"redemptionType = 'VOUCHERS'\">\n Vouchers\n </div>\n </div> -->\n\n <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\n <div class=\"d-flex align-items-center tab-container gap-3\">\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\n Rewards\n </div>\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\n (click)=\"redemptionCouponType = 'DISCOUNTS'\">\n Discounts\n </div>\n </div>\n <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\n <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\n }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\n Apply</div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\n <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\n voucher.maxRedeemableAmount | number }}</span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\n <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\"\n [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}\n </div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n {{ couponDetails.discountDescription | titlecase }}\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\n (click)=\"applyCoupon(couponDetails)\">\n Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\n </span>\n </div>\n\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyDiscounts>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no discount coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\n </div>\n </ng-template>\n </div>\n\n <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\n <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #CARTPAGE>\n <div class=\"container\">\n <div class=\"main-content\">\n <div class=\"cart-items\">\n <div class=\"cart-header\">\n <h2>Your Cart</h2>\n </div>\n <ng-container\n *ngTemplateOutlet=\"CARTITEM;context:{data: responseData?.orderedItems}\"></ng-container>\n </div>\n </div>\n\n <div class=\"sidebar\">\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"getUrl()\">\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\n <div class=\"toogle-switch\">\n <div class=\"form-check form-switch\">\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\n </div>\n </div>\n </div>\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\n Select Matured Scheme\n </div> -->\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\n *ngIf=\"selectedRedemption\">\n Selected Scheme\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\n scheme-5000/M <span>Change</span></div>\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\n </div>\n </div> -->\n </div>\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\n </div>\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\">\n <div class=\"coupon-left\">\n <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\n Coupon</span>\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\n Applied</span>\n </div>\n <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"chevron-icon\" (click)=\"openDialog(CouponList)\">\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n <span *ngIf=\"responseData.billdetails?.couponId\"\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\n </div>\n\n <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && appointmentSettings?.videoCallProductsEnabled\">\n <div class=\"promo-banner-row\">\n <div class=\"promo-text\">\n <h3>See It Before You Buy It</h3>\n <p>Experience our designs in detail via video call</p>\n </div>\n <button class=\"see-live-btn\" [disabled]=\"!hasCartItems\" (click)=\"openSchedulePanel()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-video\">\n <path d=\"m22 8-6 4 6 4V8Z\" />\n <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\n </svg>\n CONTINUE TO SCHEDULE\n </button>\n </div>\n <div class=\"video-selection-line\">{{videoSelectionLine}}</div>\n <a class=\"video-cart-hint\" *ngIf=\"videoCartCount > 0\" (click)=\"viewPendingVideoCart()\">{{videoCartCount}}\n item{{videoCartCount === 1 ? '' : 's'}} waiting in your Video Call cart \u2014 view it</a>\n </div>\n\n <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\n *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\n <div class=\"fs-14 fw-500\">\n Rewards Available\n </div>\n <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\n <div class=\"avb_pts mt-2 mb-2\">\n <span class=\"fs-16 fw-500 total_points text-secondary\">\n <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\n pts\n </span>\n <div class=\"total_value fs-12 text-secondary\">\n = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\n </div>\n </div>\n <div class=\"wallte_icon\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mt-3\">\n <div class=\"redemable_text\">\n <div class=\"title_text\">\n <div class=\"fs-14 fw-500\">\n Redeem Points\n </div>\n <div class=\"fs-13 fs-400\">\n Use your points for discount\n </div>\n </div>\n </div>\n <div class=\"toggle_btn\">\n <label class=\"switch\">\n <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\n (click)=\"onPointsRedeemingChange($event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n </div>\n <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\n <div class=\"d-flex align-items-start gap-2\">\n <div class=\"success_icon\">\n <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\n </div>\n <div class=\"success_text\">\n <div class=\"fs-13 fw-500\">\n You're saving \u20B9\n {{totalSavingAmt || 0}}\n </div>\n <div class=\"fs-12 fs-400 text-success\">\n {{totalSavingPoints}} points remaining after redemption\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Existing coupon row (keep as-is) -->\n <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\n <div class=\"d-flex justify-content-between align-items-center w-100\">\n <div class=\"coupon-left\">\n Apply Coupon\n </div>\n <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\n </div>\n\n <!-- Applied Coupon Success Banner -->\n <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\n *ngIf=\"selectedVoucherId\">\n <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\n <mat-icon class=\"success-check\">check_circle</mat-icon>\n <div class=\"applied-coupon-info\">\n <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\n <div class=\"applied-coupon-saving\">You're saving\n <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\n <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\n </div>\n\n </div>\n </div>\n <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\n (click)=\"removeRedemptionCoupon($event)\">Remove</div>\n </div>\n </div>\n\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\n <div class=\"delivery-header\">\n <mat-icon>gps_fixed</mat-icon>\n <span>Delivering to</span>\n <span class=\"pincode\">{{pincode}}</span>\n <!-- <a class=\"change-link\">Change Pincode</a> -->\n </div>\n </div>\n\n <div class=\"summary-section\">\n <div class=\"summary-title\">Summary</div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Subtotal</span>\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\n <span class=\"summary-label\">Points Redeemed</span>\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\n <span class=\"summary-label\">Discount Amount</span>\n <span class=\"summary-value\">\n {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Shipping</span>\n <span class=\"summary-value\"\n [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\n {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\n (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Estimated Tax</span>\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Total</span>\n <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n number: '1.0-2' }}</span>\n\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n number: '1.0-2' }}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (percentageReduced || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\n Cart'}}</button>\n\n </div>\n </div>\n <!-- <ng-container *ngIf=\"recommededData?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\"\n [responseData]=\"recommededData\"></simpo-featured-products>\n </ng-container> -->\n</ng-template>\n<ng-template #CHECKOUTPAGE>\n <div class=\"checkout-left-panel\">\n <div class=\"checkout-main-content\">\n <!-- <div class=\"delivery-options\">\n <div class=\"delivery-option active\">\n <div class=\"delivery-icon\"></div>\n HOME DELIVERY\n </div>\n <div class=\"delivery-option\">\n <div class=\"delivery-icon\"></div>\n STORE PICK-UP\n </div>\n </div> -->\n\n <div class=\"section-title\">Shipping Address</div>\n\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n </div>\n\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\n\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\n *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">\n Place Order\n </button>\n <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\n Loading...\n </button>\n\n </div>\n </div>\n\n <div class=\"checkout-right-panel\">\n <div class=\"order-summary\">\n <div class=\"summary-title\">Order Summary</div>\n\n <div class=\"checkout-product\">\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\n alt=\"\">\n <div class=\"product-details\">\n <div class=\"product-name\">{{item.itemName}}</div>\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\n </div>\n </div>\n\n </div>\n\n <div class=\"price-breakdown\">\n <div class=\"price-row\">\n <span>Total Price</span>\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\n ?? 0) | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\">\n <span>Total Tax</span>\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number:\n '1.0-2'}}</span>\n </div>\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\n <span class=\"summary-label\">Redeem Amount</span>\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\n '1.0-2'}}</span>\n </div>\n\n <div class=\"price-row discount\" *ngIf=\"responseData?.billdetails?.discountAmount && !isJewellery\">\n <span>Coupon Discount</span>\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\n | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\"\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n <span>Delivery Charge</span>\n <span>{{responseData.billdetails.deliveryCharges\n |\n number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\n <span>TOTAL AMOUNT</span>\n <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #CARTITEM let-products=\"data\">\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\n <div class=\"item-left\">\n <div class=\"item-image\">\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\n </div>\n <div class=\"item-details\">\n <h3 class=\"item-title\">{{item.itemName}}</h3>\n <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\n {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"item-right\">\n <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\n <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\n <mat-icon>remove</mat-icon>\n </button>\n <span class=\"qty-value px-3\">{{item.quantity}}</span>\n <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n\n <div class=\"item-price\">\n \u20B9{{item.sellingPrice | number: '1.0-2'}}\n </div>\n\n <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\n <path d=\"M3 6h18\" />\n <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\n <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\n <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\n <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\n </svg>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #EMPTYITEM>\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\n <div class=\"empty-cart-container d-flex flex-column\">\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"cart-text content-side\">\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"d-flex justify-content-center\"\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\n </div>\n </ng-container>\n </div>\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n </div>\n </section>\n</ng-template>\n\n<ng-template #SCHEME_REDEMPTION>\n <div class=\"modal-body\">\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\n <label for=\"individual\" class=\"scheme-card\">\n <div class=\"scheme-info d-flex gap-1\">\n <div class=\"form-check-radio\">\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\n </div>\n <div class=\"right-side\">\n <div class=\"scheme-name\">\n <div class=\"scheme-title\">Individual Investment Scheme</div>\n <div class=\"scheme-monthly\">\u20B98000/M</div>\n </div>\n <div class=\"scheme-details\">\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\n </div>\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\n </div>\n </div>\n </label>\n </div>\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\n </div>\n </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.cart-header{padding:16px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.cart-header h2{margin:0;font-size:18px;font-weight:500;color:#0f172a}.cart-item{display:flex!important;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;gap:20px;padding:0 8px;transition:background .2s}.cart-item:hover{background:#fbfcfe}.item-left{display:flex;align-items:center;flex:1}.item-right{display:flex;align-items:center;padding:15px;gap:32px}.item-image img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid #f1f5f9}.item-details{display:flex;flex-direction:column;gap:4px}.item-title{margin:0;font-size:15px;font-weight:600;color:#0f172a;line-height:1.4}.item-subtitle{font-size:13px;color:#64748b;font-weight:400}.quantity-control{display:flex;align-items:center;border:1.5px solid #e2e8f0;border-radius:7px;overflow:hidden;height:38px;background:#fff;width:fit-content}.qty-btn{width:38px;height:100%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .2s ease}.qty-btn:hover{background:#f8fafc;color:#0f172a}.qty-btn mat-icon{font-size:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.qty-value{width:32px;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:#0f172a;border-left:1.5px solid #e2e8f0;border-right:1.5px solid #e2e8f0}.item-price{font-size:18px;font-weight:700;color:#0f172a;min-width:60px;text-align:right;letter-spacing:-.01em}.delete-btn-circle{width:36px;height:36px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ef4444;transition:all .2s ease}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:scale(1.05);color:#dc2626}.delete-btn-circle svg{width:18px;height:18px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;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;width:100%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.fs-12{font-size:12px}.fs-18{font-size:18px}.b-1-b{border-width:0px 1px;border-style:solid;border-color:#000}.container{max-width:unset;padding:24px;display:flex;gap:24px;width:100%!important}.main-content{background:#fff;border-radius:12px;width:70%}.promo-banner{padding:16px 20px;display:flex;flex-direction:column;gap:10px;border-radius:8px;border:1px solid #e2e8f0}.promo-banner-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn:disabled{color:#94a3b8;cursor:not-allowed;box-shadow:none}.see-live-btn:disabled:hover{background:#fff;border-color:#e2e8f0;transform:none}.see-live-btn svg{color:#6366f1}.video-selection-line{font-size:.8rem;color:#64748b}.video-cart-hint{font-size:.8rem;color:#6366f1;cursor:pointer;text-decoration:underline;width:max-content}.schedule-panel-overlay{position:fixed;inset:0;background:#141a2666;z-index:1200}.schedule-panel-backdrop{position:absolute;inset:0;border:none;background:none;cursor:default;padding:0}.schedule-panel{position:absolute;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:#fff;box-shadow:-20px 0 50px -20px #141a2659;display:flex;flex-direction:column}.schedule-panel-header{flex:none;padding:20px 22px;border-bottom:1px solid #e2e8f0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.schedule-panel-title{font-size:17px;font-weight:600;color:#1b2436}.schedule-panel-subtitle{font-size:12.5px;color:#64748b}.schedule-panel-close{flex:none;border:none;background:none;cursor:pointer;color:#64748b;line-height:0;padding:3px}.schedule-panel-body{flex:1;min-height:0;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:10px}.schedule-panel-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;cursor:pointer;width:100%;background:#fff;border:1px solid #e2e8f0;text-align:left}.schedule-panel-row.selected{background:#f5f3ff;border-color:#c7d2fe}.schedule-panel-checkbox{width:18px;height:18px;flex:none;border:1.5px solid #cbd5e1;border-radius:4px;background:#fff;display:grid;place-items:center}.schedule-panel-checkbox.checked{background:#6366f1;border-color:#6366f1}.schedule-panel-checkbox mat-icon{color:#fff!important;font-size:13px!important;height:13px!important;width:13px!important}.schedule-panel-thumb{width:46px;height:46px;border-radius:6px;object-fit:cover;flex:none;background:#f3efe9}.schedule-panel-info{flex:1}.schedule-panel-name{font-size:13.5px;color:#1b2436}.schedule-panel-footer{flex:none;padding:16px 22px;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;gap:10px}.schedule-panel-selection-line{font-size:11.5px;color:#64748b}.schedule-panel-cta{width:100%;height:48px;border:none;border-radius:8px;background:#7c3a11;color:#fff;font-size:14px;font-weight:600;cursor:pointer}.schedule-panel-cta:disabled{background:#cbd5e1;cursor:not-allowed}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:32%}.coupon-section{border-radius:8px;padding:10px 15px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.coupon-section:hover{border-color:#cbd5e1;background-color:#f8fafc}.chevron-icon{color:#94a3b8;transition:transform .2s ease}.coupon-section:hover .chevron-icon{transform:translate(2px);color:#64748b}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.coupon-icon mat-icon{font-size:17px;width:17px!important;height:19px!important}.coupon-text{font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.summary-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:20px;letter-spacing:-.01em}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.summary-row:last-child{margin-bottom:0}.summary-label{font-size:14px;font-weight:400;color:#64748b}.summary-value{font-size:14px;font-weight:500;color:#0f172a}.summary-divider{height:1px;background:#f1f5f9;margin:16px 0;width:100%}.total-row .summary-label{font-size:16px;font-weight:600;color:#0f172a}.total-row .summary-value{font-size:16px;font-weight:700;color:#0f172a}.total-row{border-top:1px solid #e2e8f0;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px}.total-value{font-weight:700;font-size:18px}.place-order-btn{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;align-items:center;width:max-content;border-radius:8px;border:1px solid #e2e8f0}.cart-tabs div{padding:7px 10px;cursor:pointer;font-size:14px}.selected-cart-tab{margin:6px;background:#f1f5f9;border-radius:5px;color:#000!important;font-weight:500}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.cart-item{flex-direction:column!important;align-items:flex-start!important;padding:16px 12px!important;gap:16px!important}.item-left{width:100%!important;gap:16px!important;align-items:flex-start!important}.item-image{width:86px!important;height:86px!important;flex-shrink:0!important}.item-right{width:100%!important;justify-content:space-between!important;padding:0!important;gap:12px!important;margin-top:4px!important}.item-price{flex:1!important;text-align:right!important;margin-right:8px!important;font-size:16px!important}.item-title{font-size:14px!important;-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.quantity-control{height:34px!important}.qty-btn{width:34px!important}.qty-value{width:28px!important;font-size:13px!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}.vouchers-listing-section{min-width:unset!important;width:100vw!important}.separator{display:none!important}.coupon-meta{display:grid!important;grid-template-columns:1fr 1fr!important}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.w-fit{width:fit-content!important}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}.add-to-cart-parent{width:max-content;border:1px solid #000000;border-radius:8px}.cursor{cursor:pointer}.cart-text{max-width:600px;margin:0 auto;text-align:center}.cart-text div{word-break:break-word;overflow-wrap:break-word;white-space:normal}.switch{position:relative;display:inline-block;width:45px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:3px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(24px)}.vouchers-listing-section{position:relative;width:fit-content;min-width:500px;z-index:100;background:#fff;height:100vh}.vouchers-listing-section .coupon-heading{border-bottom:1px solid #eee}.vouchers-listing-section .coupon-listing{padding:12px 16px;overflow-y:auto;height:calc(97vh - 100px)}.voucher-details{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px #00000042}.voucher-details .coupon-brief .apply-offer-btn{background:#111;color:#fff;border-radius:10px;padding:6px 16px}.voucher-details .coupon-code-box{border:1.5px dashed #bbb;border-radius:8px;padding:8px 12px;margin-bottom:10px}.voucher-details .coupon-code-box .code-label{font-size:11px;color:#888;margin-bottom:2px}.voucher-details .coupon-code-box .code-row .code-value{font-weight:700;font-size:15px;letter-spacing:1px}.voucher-details .coupon-meta .clock-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.applied-coupon-card{background:#f0fff8;border-radius:12px;padding:12px 16px}.applied-coupon-card .applied-coupon-left .success-check{color:#22c55e;font-size:22px}.applied-coupon-card .applied-coupon-left .applied-coupon-code{font-weight:700;font-size:14px}.applied-coupon-card .applied-coupon-left .applied-coupon-saving{font-size:13px;color:#097d5f;margin-top:2px}.active-type{background:#111!important;color:#fff!important}.redemption-type{text-align:center;border-radius:10px;padding:6px 16px;background:#d3d3d36b;width:-webkit-fill-available!important}.wallte_icon{background:#000;border-radius:50px;padding:5px 9px 7px}.wallte_icon img{width:18px;height:18px}.fw-600{font-weight:600}.coupon-type{width:fit-content!important;border-radius:26px!important;background:transparent!important;border:1px solid #afafaf;color:#393838;text-align:center;padding:6px 16px}.active-coupon{background:transparent!important;border:2px solid black!important;color:#000!important}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type:
10800
10800
  //DIRECTIVE
10801
10801
  ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }, { kind: "component", type: BookingCartGroupsComponent, selector: "simpo-booking-cart-groups" }] }); }
10802
10802
  }
@@ -10827,7 +10827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
10827
10827
  FeaturedProductsComponent,
10828
10828
  MatSpinner,
10829
10829
  BookingCartGroupsComponent
10830
- ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n <ng-container *ngIf=\"data\">\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\n <div class=\"bar\"></div>\n <span class=\"timeline isActive\">Address</span>\n <div class=\"bar\"></div>\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\n </div>\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && appointmentSettings?.homeVisitProductsEnabled\">\n <!-- && appointmentSettings?.homeVisitProductsEnabled\" -->\n <div class=\"cart-tabs\" [id]=\"data?.id\">\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\n <div [ngClass]=\"{'selected-cart-tab': cartType==='BOOKING'}\" (click)=\"cartType='BOOKING'\">Booking Cart\n ({{getTotalBookingItems}})</div>\n </div>\n </div>\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\n [simpoAnimation]=\"styles?.animation\">\n <ng-container>\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\n <ng-container\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"cartType === 'BOOKING'\">\n <div class=\"w-100\">\n <simpo-booking-cart-groups></simpo-booking-cart-groups>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex checkoutPage\"\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\n </ng-container>\n </div>\n\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n </section>\n\n <div class=\"schedule-panel-overlay\" *ngIf=\"schedulePanelOpen\">\n <button type=\"button\" class=\"schedule-panel-backdrop\" (click)=\"closeSchedulePanel()\"></button>\n <div class=\"schedule-panel\">\n <div class=\"schedule-panel-header\">\n <div>\n <div class=\"schedule-panel-title\">Schedule a Video Call</div>\n <div class=\"schedule-panel-subtitle\">Choose which pieces to include</div>\n </div>\n <button type=\"button\" class=\"schedule-panel-close\" (click)=\"closeSchedulePanel()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div class=\"schedule-panel-body\">\n <button type=\"button\" class=\"schedule-panel-row\" *ngFor=\"let item of responseData?.orderedItems\"\n [class.selected]=\"isPanelSelected(item)\" (click)=\"togglePanelSelection(item)\">\n <div class=\"schedule-panel-checkbox\" [class.checked]=\"isPanelSelected(item)\">\n <mat-icon *ngIf=\"isPanelSelected(item)\">check</mat-icon>\n </div>\n <img class=\"schedule-panel-thumb\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\">\n <div class=\"schedule-panel-info\">\n <div class=\"schedule-panel-name\">{{item.itemName}}</div>\n </div>\n </button>\n </div>\n <div class=\"schedule-panel-footer\">\n <div class=\"schedule-panel-selection-line\">{{panelSelectionLine}}</div>\n <button type=\"button\" class=\"schedule-panel-cta\" [disabled]=\"panelInvalid\" (click)=\"confirmSchedulePanel()\">Continue</button>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!data\">\n <section class=\"cart-window\">\n <div class=\"heading-large lh-2 mb-3 header-sec\">\n <div class=\"d-flex align-items-center\">\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n <span>Your Cart</span>\n </div>\n <div class=\"saving\"></div>\n </div>\n <div class=\"offers\">\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n <span>Avail Offers / Coupons</span>\n </div>\n <mat-icon>keyboard_arrow_right</mat-icon>\n </div>\n <div class=\"small-items\">\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n <div class=\"small-item\">\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"small-product-img\"\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\">\n </div>\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n <div class=\"small-item-quantity\">\n <span class=\"cursor\">-</span>\n <span>{{item.quantity}}</span>\n <span class=\"cursor\">+</span>\n </div>\n <div class=\"small-item-price\">\n <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\n </div>\n <!-- <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n </div> -->\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"fotter-sec\">\n <div class=\"delivery-add d-flex\">\n <mat-icon>home</mat-icon>\n <div class=\"address\">Tetsting</div>\n </div>\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\n </div>\n </section>\n </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n<ng-template #CouponList>\n <section class=\"coupons-listing-section\">\n <div class=\"coupon-heading\">\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Apply Coupon</div>\n </div>\n <!-- <div class=\"coupon-search-sec\">\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\n </div> -->\n <div class=\"coupon-listing\">\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"coupon-details\"\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\n *ngIf=\"couponDetails?.status\">\n <div class=\"details__coupon-heading\">\n <div class=\"coupon-brief\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}</div>\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\n </div>\n </div>\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\n </div> -->\n </div>\n <ng-container>\n <!-- *ngIf=\"couponDetails.status\" -->\n <div class=\"details-divider\"></div>\n <ul class=\"details__coupon-terms\">\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\n </ul>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #RedemptionVouchers>\n <section class=\"vouchers-listing-section d-flex flex-column\">\n <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\n <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Coupons & Vouchers</div>\n </div>\n\n <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\n (click)=\"redemptionType = 'COUPONS'\">\n Coupons\n </div>\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\n (click)=\"redemptionType = 'VOUCHERS'\">\n Vouchers\n </div>\n </div> -->\n\n <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\n <div class=\"d-flex align-items-center tab-container gap-3\">\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\n Rewards\n </div>\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\n (click)=\"redemptionCouponType = 'DISCOUNTS'\">\n Discounts\n </div>\n </div>\n <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\n <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\n }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\n Apply</div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\n <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\n voucher.maxRedeemableAmount | number }}</span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\n <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\"\n [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}\n </div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n {{ couponDetails.discountDescription | titlecase }}\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\n (click)=\"applyCoupon(couponDetails)\">\n Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\n </span>\n </div>\n\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyDiscounts>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no discount coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\n </div>\n </ng-template>\n </div>\n\n <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\n <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #CARTPAGE>\n <div class=\"container\">\n <div class=\"main-content\">\n <div class=\"cart-items\">\n <div class=\"cart-header\">\n <h2>Your Cart</h2>\n </div>\n <ng-container\n *ngTemplateOutlet=\"CARTITEM;context:{data: responseData?.orderedItems}\"></ng-container>\n </div>\n </div>\n\n <div class=\"sidebar\">\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"getUrl()\">\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\n <div class=\"toogle-switch\">\n <div class=\"form-check form-switch\">\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\n </div>\n </div>\n </div>\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\n Select Matured Scheme\n </div> -->\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\n *ngIf=\"selectedRedemption\">\n Selected Scheme\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\n scheme-5000/M <span>Change</span></div>\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\n </div>\n </div> -->\n </div>\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\n </div>\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\">\n <div class=\"coupon-left\">\n <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\n Coupon</span>\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\n Applied</span>\n </div>\n <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"chevron-icon\" (click)=\"openDialog(CouponList)\">\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n <span *ngIf=\"responseData.billdetails?.couponId\"\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\n </div>\n\n <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && appointmentSettings?.videoCallProductsEnabled\">\n <div class=\"promo-banner-row\">\n <div class=\"promo-text\">\n <h3>See It Before You Buy It</h3>\n <p>Experience our designs in detail via video call</p>\n </div>\n <button class=\"see-live-btn\" [disabled]=\"!hasCartItems\" (click)=\"openSchedulePanel()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-video\">\n <path d=\"m22 8-6 4 6 4V8Z\" />\n <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\n </svg>\n CONTINUE TO SCHEDULE\n </button>\n </div>\n <div class=\"video-selection-line\">{{videoSelectionLine}}</div>\n <a class=\"video-cart-hint\" *ngIf=\"videoCartCount > 0\" (click)=\"viewPendingVideoCart()\">{{videoCartCount}}\n item{{videoCartCount === 1 ? '' : 's'}} waiting in your Video Call cart \u2014 view it</a>\n </div>\n\n <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\n *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\n <div class=\"fs-14 fw-500\">\n Rewards Available\n </div>\n <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\n <div class=\"avb_pts mt-2 mb-2\">\n <span class=\"fs-16 fw-500 total_points text-secondary\">\n <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\n pts\n </span>\n <div class=\"total_value fs-12 text-secondary\">\n = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\n </div>\n </div>\n <div class=\"wallte_icon\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mt-3\">\n <div class=\"redemable_text\">\n <div class=\"title_text\">\n <div class=\"fs-14 fw-500\">\n Redeem Points\n </div>\n <div class=\"fs-13 fs-400\">\n Use your points for discount\n </div>\n </div>\n </div>\n <div class=\"toggle_btn\">\n <label class=\"switch\">\n <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\n (click)=\"onPointsRedeemingChange($event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n </div>\n <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\n <div class=\"d-flex align-items-start gap-2\">\n <div class=\"success_icon\">\n <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\n </div>\n <div class=\"success_text\">\n <div class=\"fs-13 fw-500\">\n You're saving \u20B9\n {{totalSavingAmt || 0}}\n </div>\n <div class=\"fs-12 fs-400 text-success\">\n {{totalSavingPoints}} points remaining after redemption\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Existing coupon row (keep as-is) -->\n <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\n <div class=\"d-flex justify-content-between align-items-center w-100\">\n <div class=\"coupon-left\">\n Apply Coupon\n </div>\n <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\n </div>\n\n <!-- Applied Coupon Success Banner -->\n <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\n *ngIf=\"selectedVoucherId\">\n <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\n <mat-icon class=\"success-check\">check_circle</mat-icon>\n <div class=\"applied-coupon-info\">\n <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\n <div class=\"applied-coupon-saving\">You're saving\n <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\n <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\n </div>\n\n </div>\n </div>\n <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\n (click)=\"removeRedemptionCoupon($event)\">Remove</div>\n </div>\n </div>\n\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\n <div class=\"delivery-header\">\n <mat-icon>gps_fixed</mat-icon>\n <span>Delivering to</span>\n <span class=\"pincode\">{{pincode}}</span>\n <!-- <a class=\"change-link\">Change Pincode</a> -->\n </div>\n </div>\n\n <div class=\"summary-section\">\n <div class=\"summary-title\">Summary</div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Subtotal</span>\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\n <span class=\"summary-label\">Points Redeemed</span>\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\n <span class=\"summary-label\">Discount Amount</span>\n <span class=\"summary-value\">\n {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Shipping</span>\n <span class=\"summary-value\"\n [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\n {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\n (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Estimated Tax</span>\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Total</span>\n <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n number: '1.0-2' }}</span>\n\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n number: '1.0-2' }}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (percentageReduced || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\n Cart'}}</button>\n\n </div>\n </div>\n <!-- <ng-container *ngIf=\"recommededData?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\"\n [responseData]=\"recommededData\"></simpo-featured-products>\n </ng-container> -->\n</ng-template>\n<ng-template #CHECKOUTPAGE>\n <div class=\"checkout-left-panel\">\n <div class=\"checkout-main-content\">\n <!-- <div class=\"delivery-options\">\n <div class=\"delivery-option active\">\n <div class=\"delivery-icon\"></div>\n HOME DELIVERY\n </div>\n <div class=\"delivery-option\">\n <div class=\"delivery-icon\"></div>\n STORE PICK-UP\n </div>\n </div> -->\n\n <div class=\"section-title\">Shipping Address</div>\n\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n </div>\n\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\n\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\n *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">\n Place Order\n </button>\n <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\n Loading...\n </button>\n\n </div>\n </div>\n\n <div class=\"checkout-right-panel\">\n <div class=\"order-summary\">\n <div class=\"summary-title\">Order Summary</div>\n\n <div class=\"checkout-product\">\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\n alt=\"\">\n <div class=\"product-details\">\n <div class=\"product-name\">{{item.itemName}}</div>\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\n </div>\n </div>\n\n </div>\n\n <div class=\"price-breakdown\">\n <div class=\"price-row\">\n <span>Total Price</span>\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\n ?? 0) | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\">\n <span>Total Tax</span>\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number:\n '1.0-2'}}</span>\n </div>\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\n <span class=\"summary-label\">Redeem Amount</span>\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\n '1.0-2'}}</span>\n </div>\n\n <div class=\"price-row discount\" *ngIf=\"responseData?.billdetails?.discountAmount && !isJewellery\">\n <span>Coupon Discount</span>\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\n | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\"\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n <span>Delivery Charge</span>\n <span>{{responseData.billdetails.deliveryCharges\n |\n number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\n <span>TOTAL AMOUNT</span>\n <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #CARTITEM let-products=\"data\">\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\n <div class=\"item-left\">\n <div class=\"item-image\">\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\n </div>\n <div class=\"item-details\">\n <h3 class=\"item-title\">{{item.itemName}}</h3>\n <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\n {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"item-right\">\n <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\n <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\n <mat-icon>remove</mat-icon>\n </button>\n <span class=\"qty-value px-3\">{{item.quantity}}</span>\n <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n\n <div class=\"item-price\">\n \u20B9{{item.sellingPrice | number: '1.0-2'}}\n </div>\n\n <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\n <path d=\"M3 6h18\" />\n <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\n <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\n <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\n <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\n </svg>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #EMPTYITEM>\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\n <div class=\"empty-cart-container d-flex flex-column\">\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"cart-text content-side\">\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"d-flex justify-content-center\"\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\n </div>\n </ng-container>\n </div>\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n </div>\n </section>\n</ng-template>\n\n<ng-template #SCHEME_REDEMPTION>\n <div class=\"modal-body\">\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\n <label for=\"individual\" class=\"scheme-card\">\n <div class=\"scheme-info d-flex gap-1\">\n <div class=\"form-check-radio\">\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\n </div>\n <div class=\"right-side\">\n <div class=\"scheme-name\">\n <div class=\"scheme-title\">Individual Investment Scheme</div>\n <div class=\"scheme-monthly\">\u20B98000/M</div>\n </div>\n <div class=\"scheme-details\">\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\n </div>\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\n </div>\n </div>\n </label>\n </div>\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\n </div>\n </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.cart-header{padding:16px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.cart-header h2{margin:0;font-size:18px;font-weight:500;color:#0f172a}.cart-item{display:flex!important;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;gap:20px;padding:0 8px;transition:background .2s}.cart-item:hover{background:#fbfcfe}.item-left{display:flex;align-items:center;flex:1}.item-right{display:flex;align-items:center;padding:15px;gap:32px}.item-image img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid #f1f5f9}.item-details{display:flex;flex-direction:column;gap:4px}.item-title{margin:0;font-size:15px;font-weight:600;color:#0f172a;line-height:1.4}.item-subtitle{font-size:13px;color:#64748b;font-weight:400}.quantity-control{display:flex;align-items:center;border:1.5px solid #e2e8f0;border-radius:7px;overflow:hidden;height:38px;background:#fff;width:fit-content}.qty-btn{width:38px;height:100%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .2s ease}.qty-btn:hover{background:#f8fafc;color:#0f172a}.qty-btn mat-icon{font-size:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.qty-value{width:32px;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:#0f172a;border-left:1.5px solid #e2e8f0;border-right:1.5px solid #e2e8f0}.item-price{font-size:18px;font-weight:700;color:#0f172a;min-width:60px;text-align:right;letter-spacing:-.01em}.delete-btn-circle{width:36px;height:36px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ef4444;transition:all .2s ease}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:scale(1.05);color:#dc2626}.delete-btn-circle svg{width:18px;height:18px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;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;width:100%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.fs-12{font-size:12px}.fs-18{font-size:18px}.b-1-b{border-width:0px 1px;border-style:solid;border-color:#000}.container{max-width:unset;padding:24px;display:flex;gap:24px;width:100%!important}.main-content{background:#fff;border-radius:12px;width:70%}.promo-banner{padding:16px 20px;display:flex;flex-direction:column;gap:10px;border-radius:8px;border:1px solid #e2e8f0}.promo-banner-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn:disabled{color:#94a3b8;cursor:not-allowed;box-shadow:none}.see-live-btn:disabled:hover{background:#fff;border-color:#e2e8f0;transform:none}.see-live-btn svg{color:#6366f1}.video-selection-line{font-size:.8rem;color:#64748b}.video-cart-hint{font-size:.8rem;color:#6366f1;cursor:pointer;text-decoration:underline;width:max-content}.schedule-panel-overlay{position:fixed;inset:0;background:#141a2666;z-index:1200}.schedule-panel-backdrop{position:absolute;inset:0;border:none;background:none;cursor:default;padding:0}.schedule-panel{position:absolute;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:#fff;box-shadow:-20px 0 50px -20px #141a2659;display:flex;flex-direction:column}.schedule-panel-header{flex:none;padding:20px 22px;border-bottom:1px solid #e2e8f0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.schedule-panel-title{font-size:17px;font-weight:600;color:#1b2436}.schedule-panel-subtitle{font-size:12.5px;color:#64748b}.schedule-panel-close{flex:none;border:none;background:none;cursor:pointer;color:#64748b;line-height:0;padding:3px}.schedule-panel-body{flex:1;min-height:0;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:10px}.schedule-panel-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;cursor:pointer;width:100%;background:#fff;border:1px solid #e2e8f0;text-align:left}.schedule-panel-row.selected{background:#f5f3ff;border-color:#c7d2fe}.schedule-panel-checkbox{width:18px;height:18px;flex:none;border:1.5px solid #cbd5e1;border-radius:4px;background:#fff;display:grid;place-items:center}.schedule-panel-checkbox.checked{background:#6366f1;border-color:#6366f1}.schedule-panel-checkbox mat-icon{color:#fff!important;font-size:13px!important;height:13px!important;width:13px!important}.schedule-panel-thumb{width:46px;height:46px;border-radius:6px;object-fit:cover;flex:none;background:#f3efe9}.schedule-panel-info{flex:1}.schedule-panel-name{font-size:13.5px;color:#1b2436}.schedule-panel-footer{flex:none;padding:16px 22px;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;gap:10px}.schedule-panel-selection-line{font-size:11.5px;color:#64748b}.schedule-panel-cta{width:100%;height:48px;border:none;border-radius:8px;background:#7c3a11;color:#fff;font-size:14px;font-weight:600;cursor:pointer}.schedule-panel-cta:disabled{background:#cbd5e1;cursor:not-allowed}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:32%}.coupon-section{border-radius:8px;padding:10px 15px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.coupon-section:hover{border-color:#cbd5e1;background-color:#f8fafc}.chevron-icon{color:#94a3b8;transition:transform .2s ease}.coupon-section:hover .chevron-icon{transform:translate(2px);color:#64748b}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.coupon-icon mat-icon{font-size:17px;width:17px!important;height:19px!important}.coupon-text{font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.summary-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:20px;letter-spacing:-.01em}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.summary-row:last-child{margin-bottom:0}.summary-label{font-size:14px;font-weight:400;color:#64748b}.summary-value{font-size:14px;font-weight:500;color:#0f172a}.summary-divider{height:1px;background:#f1f5f9;margin:16px 0;width:100%}.total-row .summary-label{font-size:16px;font-weight:600;color:#0f172a}.total-row .summary-value{font-size:16px;font-weight:700;color:#0f172a}.total-row{border-top:1px solid #e2e8f0;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px}.total-value{font-weight:700;font-size:18px}.place-order-btn{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;align-items:center;width:max-content;border-radius:8px;border:1px solid #e2e8f0}.cart-tabs div{padding:7px 10px;cursor:pointer;font-size:14px}.selected-cart-tab{margin:6px;background:#f1f5f9;border-radius:5px;color:#000!important;font-weight:500}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.cart-item{flex-direction:column!important;align-items:flex-start!important;padding:16px 12px!important;gap:16px!important}.item-left{width:100%!important;gap:16px!important;align-items:flex-start!important}.item-image{width:86px!important;height:86px!important;flex-shrink:0!important}.item-right{width:100%!important;justify-content:space-between!important;padding:0!important;gap:12px!important;margin-top:4px!important}.item-price{flex:1!important;text-align:right!important;margin-right:8px!important;font-size:16px!important}.item-title{font-size:14px!important;-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.quantity-control{height:34px!important}.qty-btn{width:34px!important}.qty-value{width:28px!important;font-size:13px!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}.vouchers-listing-section{min-width:unset!important;width:100vw!important}.separator{display:none!important}.coupon-meta{display:grid!important;grid-template-columns:1fr 1fr!important}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.w-fit{width:fit-content!important}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}.add-to-cart-parent{width:max-content;border:1px solid #000000;border-radius:8px}.cursor{cursor:pointer}.cart-text{max-width:600px;margin:0 auto;text-align:center}.cart-text div{word-break:break-word;overflow-wrap:break-word;white-space:normal}.switch{position:relative;display:inline-block;width:45px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:3px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(24px)}.vouchers-listing-section{position:relative;width:fit-content;min-width:500px;z-index:100;background:#fff;height:100vh}.vouchers-listing-section .coupon-heading{border-bottom:1px solid #eee}.vouchers-listing-section .coupon-listing{padding:12px 16px;overflow-y:auto;height:calc(97vh - 100px)}.voucher-details{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px #00000042}.voucher-details .coupon-brief .apply-offer-btn{background:#111;color:#fff;border-radius:10px;padding:6px 16px}.voucher-details .coupon-code-box{border:1.5px dashed #bbb;border-radius:8px;padding:8px 12px;margin-bottom:10px}.voucher-details .coupon-code-box .code-label{font-size:11px;color:#888;margin-bottom:2px}.voucher-details .coupon-code-box .code-row .code-value{font-weight:700;font-size:15px;letter-spacing:1px}.voucher-details .coupon-meta .clock-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.applied-coupon-card{background:#f0fff8;border-radius:12px;padding:12px 16px}.applied-coupon-card .applied-coupon-left .success-check{color:#22c55e;font-size:22px}.applied-coupon-card .applied-coupon-left .applied-coupon-code{font-weight:700;font-size:14px}.applied-coupon-card .applied-coupon-left .applied-coupon-saving{font-size:13px;color:#097d5f;margin-top:2px}.active-type{background:#111!important;color:#fff!important}.redemption-type{text-align:center;border-radius:10px;padding:6px 16px;background:#d3d3d36b;width:-webkit-fill-available!important}.wallte_icon{background:#000;border-radius:50px;padding:5px 9px 7px}.wallte_icon img{width:18px;height:18px}.fw-600{font-weight:600}.coupon-type{width:fit-content!important;border-radius:26px!important;background:transparent!important;border:1px solid #afafaf;color:#393838;text-align:center;padding:6px 16px}.active-coupon{background:transparent!important;border:2px solid black!important;color:#000!important}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"] }]
10830
+ ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\n <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n <ng-container *ngIf=\"data\">\n <section [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\"\n [attr.class]=\"isMobile ? 'py-5 position-relative' : 'position-relative'\" simpoHover\n (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\"\n [ngClass]=\"!responseData?.orderedItems?.length ? 'no-items' : ''\">\n <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\"\n [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\"\n *ngIf=\"responseData?.orderedItems?.length && currentTab === 'ADDRESS'\">\n <span class=\"timeline\" (click)=\"currentTab = 'BAG'\">Bag</span>\n <div class=\"bar\"></div>\n <span class=\"timeline isActive\">Address</span>\n <div class=\"bar\"></div>\n <span class=\"timeline\" style=\"cursor: auto;\">Payment</span>\n </div>\n <div class=\"cart-tab-parent w-100\" *ngIf=\"currentTab == 'BAG' && (appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled)\">\n <!-- && appointmentSettings?.homeVisitProductsEnabled\" -->\n <div class=\"cart-tabs\" [id]=\"data?.id\">\n <div class=\"selected-cart-tab\" [ngClass]=\"{'selected-cart-tab': cartType==='SHOPPING'}\"\n (click)=\"cartType='SHOPPING'\">Shopping Cart ({{responseData?.orderedItems?.length ?? 0}})</div>\n <div [ngClass]=\"{'selected-cart-tab': cartType==='BOOKING'}\" (click)=\"cartType='BOOKING'\">Booking Cart\n ({{getTotalBookingItems}})</div>\n </div>\n </div>\n <div class=\"cart-parent\" [spacingHorizontal]=\"stylesLayout\" *ngIf=\"currentTab === 'BAG'\" [id]=\"data?.id\"\n [simpoAnimation]=\"styles?.animation\">\n <ng-container>\n <ng-container *ngIf=\"cartType === 'SHOPPING'\">\n <ng-container\n *ngTemplateOutlet=\"(responseData?.orderedItems?.length || 0) > 0 ? CARTPAGE : EMPTYITEM\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"cartType === 'BOOKING'\">\n <div class=\"w-100\">\n <simpo-booking-cart-groups></simpo-booking-cart-groups>\n </div>\n </ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex checkoutPage\"\n *ngIf=\"(responseData?.orderedItems?.length || 0) > 0 && currentTab === 'ADDRESS'\">\n <ng-container *ngTemplateOutlet=\"CHECKOUTPAGE\">\n </ng-container>\n </div>\n\n\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n </section>\n\n <div class=\"schedule-panel-overlay\" *ngIf=\"schedulePanelOpen\">\n <button type=\"button\" class=\"schedule-panel-backdrop\" (click)=\"closeSchedulePanel()\"></button>\n <div class=\"schedule-panel\">\n <div class=\"schedule-panel-header\">\n <div>\n <div class=\"schedule-panel-title\">Schedule a Video Call</div>\n <div class=\"schedule-panel-subtitle\">Choose which pieces to include</div>\n </div>\n <button type=\"button\" class=\"schedule-panel-close\" (click)=\"closeSchedulePanel()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div class=\"schedule-panel-body\">\n <button type=\"button\" class=\"schedule-panel-row\" *ngFor=\"let item of responseData?.orderedItems\"\n [class.selected]=\"isPanelSelected(item)\" (click)=\"togglePanelSelection(item)\">\n <div class=\"schedule-panel-checkbox\" [class.checked]=\"isPanelSelected(item)\">\n <mat-icon *ngIf=\"isPanelSelected(item)\">check</mat-icon>\n </div>\n <img class=\"schedule-panel-thumb\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\">\n <div class=\"schedule-panel-info\">\n <div class=\"schedule-panel-name\">{{item.itemName}}</div>\n </div>\n </button>\n </div>\n <div class=\"schedule-panel-footer\">\n <div class=\"schedule-panel-selection-line\">{{panelSelectionLine}}</div>\n <button type=\"button\" class=\"schedule-panel-cta\" [disabled]=\"panelInvalid\" (click)=\"confirmSchedulePanel()\">Continue</button>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!data\">\n <section class=\"cart-window\">\n <div class=\"heading-large lh-2 mb-3 header-sec\">\n <div class=\"d-flex align-items-center\">\n <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\n <span>Your Cart</span>\n </div>\n <div class=\"saving\"></div>\n </div>\n <div class=\"offers\">\n <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\n <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\n <span>Avail Offers / Coupons</span>\n </div>\n <mat-icon>keyboard_arrow_right</mat-icon>\n </div>\n <div class=\"small-items\">\n <ng-container *ngFor=\"let item of responseData?.orderedItems\">\n <div class=\"small-item\">\n <div class=\"d-flex\" style=\"gap: 5px;\">\n <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"small-product-img\"\n [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\">\n </div>\n <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\n <div class=\"small-item-quantity\">\n <span class=\"cursor\">-</span>\n <span>{{item.quantity}}</span>\n <span class=\"cursor\">+</span>\n </div>\n <div class=\"small-item-price\">\n <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.sellingPrice) | number: '1.0-2'}}\n </div>\n <!-- <div class=\"price-with-tax\">\n <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\n </div> -->\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"fotter-sec\">\n <div class=\"delivery-add d-flex\">\n <mat-icon>home</mat-icon>\n <div class=\"address\">Tetsting</div>\n </div>\n <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span\n style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span>\n {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\n </div>\n </section>\n </ng-container>\n</ng-container>\n\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n}\">\n</ngx-skeleton-loader>\n\n<ng-template #CouponList>\n <section class=\"coupons-listing-section\">\n <div class=\"coupon-heading\">\n <div class=\"back-btn\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Apply Coupon</div>\n </div>\n <!-- <div class=\"coupon-search-sec\">\n <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\n <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\n </div> -->\n <div class=\"coupon-listing\">\n <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"coupon-details\"\n [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\"\n *ngIf=\"couponDetails?.status\">\n <div class=\"details__coupon-heading\">\n <div class=\"coupon-brief\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name\" [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}</div>\n <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn\" [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\"\n (click)=\"applyCoupon(couponDetails)\">Apply</div>\n </div>\n </div>\n <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\n <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\n <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\n </div> -->\n </div>\n <ng-container>\n <!-- *ngIf=\"couponDetails.status\" -->\n <div class=\"details-divider\"></div>\n <ul class=\"details__coupon-terms\">\n <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\n </ul>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupon Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #RedemptionVouchers>\n <section class=\"vouchers-listing-section d-flex flex-column\">\n <div class=\"coupon-heading d-flex align-items-center gap-2 p-3 fs-18 fw-600 border-bottom\">\n <div class=\"back-btn cursor-pointer d-flex align-items-center\" (click)=\"closeDialogRef()\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </div>\n <div class=\"header-text\">Coupons & Vouchers</div>\n </div>\n\n <!-- <div class=\"d-flex align-items-center tab-container justify-content-between gap-2 p-3\">\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'COUPONS'}\"\n (click)=\"redemptionType = 'COUPONS'\">\n Coupons\n </div>\n <div class=\"redemption-type fs-16 fw-500 cursor-pointer\" [ngClass]=\"{'active-type': redemptionType === 'VOUCHERS'}\"\n (click)=\"redemptionType = 'VOUCHERS'\">\n Vouchers\n </div>\n </div> -->\n\n <div class=\"coupon-listing d-flex flex-column gap-3 pt-3\" *ngIf=\"redemptionType === 'COUPONS'\">\n <div class=\"d-flex align-items-center tab-container gap-3\">\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'REWARDS'}\" (click)=\"redemptionCouponType = 'REWARDS'\">\n Rewards\n </div>\n <div class=\"coupon-type fs-16 fw-500 cursor-pointer\"\n [ngClass]=\"{'active-coupon': redemptionCouponType === 'DISCOUNTS'}\"\n (click)=\"redemptionCouponType = 'DISCOUNTS'\">\n Discounts\n </div>\n </div>\n <ng-container *ngIf=\"redemptionCouponType === 'REWARDS'\">\n <ng-container *ngIf=\"(listRedemptionCoupons?.vouchers?.length > 0) ; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionCoupons?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%'\n }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">\n Apply</div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n <span class=\"separator text-secondary\" *ngIf=\"voucher.maxRedeemableAmount\">|</span>\n <span class=\"min-order\" *ngIf=\"voucher.maxRedeemableAmount\">Max Redeemable Amount: \u20B9{{\n voucher.maxRedeemableAmount | number }}</span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"redemptionCouponType === 'DISCOUNTS'\">\n <ng-container *ngIf=\"(couponList.length > 0); else showEmptyDiscounts\">\n <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"couponDetails?.status\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\"\n [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\n {{ couponDetails.couponCode | uppercase }}\n </div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n {{ couponDetails.discountDescription | titlecase }}\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\"\n [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\"\n [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : 'not-allowed'}\"\n (click)=\"applyCoupon(couponDetails)\">\n Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ couponDetails.couponCode | uppercase }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}\n </span>\n </div>\n\n </div>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyDiscounts>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Discount Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">\n Looks like there are no discount coupons at the moment\n </div>\n <!-- <div class=\"empty-screen__button\">Explore</div> -->\n </div>\n </ng-template>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Coupons Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no coupons</div>\n </div>\n </ng-template>\n </div>\n\n <div class=\"coupon-listing d-flex flex-column gap-3\" *ngIf=\"redemptionType === 'VOUCHERS'\">\n <ng-container *ngIf=\"listRedemptionVouchers?.vouchers?.length > 0; else showEmptyScreen\">\n <ng-container *ngFor=\"let voucher of listRedemptionVouchers?.vouchers; let idx = index\">\n <div class=\"voucher-details\" *ngIf=\"!voucher.utilised\">\n\n <div class=\"coupon-brief d-flex justify-content-between align-items-start mb-3\">\n <div class=\"coupon-brief__left-sec\">\n <div class=\"coupon-name fs-16 fw-600 mb-1\">{{ voucher.voucherName }}</div>\n <div class=\"coupon-desc fs-12 text-secondary\">\n Get {{ voucher.couponValueType === 'FIXED' ? '\u20B9' + voucher.couponValue : voucher.couponValue + '%' }}\n off on your payment\n </div>\n </div>\n <div class=\"coupon-brief__right-sec\">\n <div class=\"apply-offer-btn fs-12 fw-600 cursor-pointer\" (click)=\"applyRedemptionCoupon(voucher)\">Apply\n </div>\n </div>\n </div>\n\n <div class=\"coupon-code-box d-flex align-items-center gap-3\">\n <div class=\"code-label\">Code</div>\n <div class=\"code-value\">{{ voucher.voucherCode }}</div>\n </div>\n\n <div class=\"coupon-meta d-flex align-items-center gap-2 fs-12 text-secondary mb-2\">\n <span class=\"min-order\">Min: \u20B9{{ voucher.minOrderValue | number }}</span>\n <span class=\"separator text-secondary\">|</span>\n <span class=\"validity\">\n <mat-icon class=\"clock-icon\">schedule</mat-icon>\n Until {{ voucher.issuedDate | date: 'MMM dd, yyyy' }}\n </span>\n </div>\n\n <!-- <div class=\"terms-link\">View terms & conditions</div> -->\n </div>\n </ng-container>\n </ng-container>\n\n <ng-template #showEmptyScreen>\n <div class=\"empty-screen-container\">\n <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\n <div class=\"empty-screen__primary-text\">No Vouchers Available</div>\n <div class=\"empty-screen__secondary-text\">Looks like there are no vouchers</div>\n </div>\n </ng-template>\n </div>\n </section>\n</ng-template>\n\n<ng-template #CARTPAGE>\n <div class=\"container\">\n <div class=\"main-content\">\n <div class=\"cart-items\">\n <div class=\"cart-header\">\n <h2>Your Cart</h2>\n </div>\n <ng-container\n *ngTemplateOutlet=\"CARTITEM;context:{data: responseData?.orderedItems}\"></ng-container>\n </div>\n </div>\n\n <div class=\"sidebar\">\n <div class=\"reedem-section d-flex flex-column align-items-center\" *ngIf=\"getUrl()\">\n <div class=\"justify-content-between d-flex align-items-center w-100 redeem-section-text\">Redeem Section Amount\n <div class=\"toogle-switch\">\n <div class=\"form-check form-switch\">\n <input class=\"form-check-input cursor-pointer\" type=\"checkbox\" role=\"switch\" id=\"flexSwitchCheckChecked\"\n [checked]=\"selectMatureScheme\" (change)=\"onToggleChange()\">\n </div>\n </div>\n </div>\n <!-- <div class=\"select_matured_text w-100 text-start cursor-pointer\"\n *ngIf=\"selectMatureScheme && !selectedRedemption\" (click)=\"selectScheme()\">\n Select Matured Scheme\n </div> -->\n <!-- <div class=\"select_matured_text d-flex flex-column gap-2 w-100 text-start cursor-pointer\"\n *ngIf=\"selectedRedemption\">\n Selected Scheme\n <div class=\"d-flex w-100 justify-content-between align-items-center group_invest\">Group Investment\n scheme-5000/M <span>Change</span></div>\n <div class=\"d-flex justify-content-between align-items-center w-100 redeem_amount\">Redeemable Amount\n <span>\u20B9{{selectedRedmpationData.selectedAmount}}</span>\n </div>\n </div> -->\n </div>\n <div class=\"scheme-section\" *ngIf=\"selectMatureScheme\">\n <ng-container *ngTemplateOutlet=\"SCHEME_REDEMPTION\"></ng-container>\n </div>\n <div class=\"coupon-section\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && !referEarnExist\">\n <div class=\"coupon-left\">\n <div class=\"coupon-icon\"><mat-icon>percent</mat-icon></div>\n <span class=\"coupon-text\" *ngIf=\"!responseData.billdetails?.couponId\">Apply\n Coupon</span>\n <span class=\"coupon-text\" *ngIf=\"responseData.billdetails?.couponId\">Coupon\n Applied</span>\n </div>\n <svg *ngIf=\"!responseData.billdetails?.couponId\" xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\"\n viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" class=\"chevron-icon\" (click)=\"openDialog(CouponList)\">\n <path d=\"m9 18 6-6-6-6\" />\n </svg>\n <span *ngIf=\"responseData.billdetails?.couponId\"\n (click)=\"removeCoupon($event)\"><mat-icon>close</mat-icon></span>\n </div>\n\n <div class=\"promo-banner mb-3\" [id]=\"data?.id\" *ngIf=\"cartType === 'SHOPPING' && appointmentSettings?.videoCallProductsEnabled\">\n <div class=\"promo-banner-row\">\n <div class=\"promo-text\">\n <h3>See It Before You Buy It</h3>\n <p>Experience our designs in detail via video call</p>\n </div>\n <button class=\"see-live-btn\" [disabled]=\"!hasCartItems\" (click)=\"openSchedulePanel()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"lucide lucide-video\">\n <path d=\"m22 8-6 4 6 4V8Z\" />\n <rect width=\"14\" height=\"12\" x=\"2\" y=\"6\" rx=\"2\" ry=\"2\" />\n </svg>\n CONTINUE TO SCHEDULE\n </button>\n </div>\n <div class=\"video-selection-line\">{{videoSelectionLine}}</div>\n <a class=\"video-cart-hint\" *ngIf=\"videoCartCount > 0\" (click)=\"viewPendingVideoCart()\">{{videoCartCount}}\n item{{videoCartCount === 1 ? '' : 's'}} waiting in your Video Call cart \u2014 view it</a>\n </div>\n\n <div class=\"plan-details-container p-3 rounded-4 bg-white text-dark voucher-details\"\n *ngIf=\"referEarnExist && this?.redemptionPoints?.availablePoints > 0\">\n <div class=\"fs-14 fw-500\">\n Rewards Available\n </div>\n <div class=\"d-flex justify-content-between align-items-start border-bottom pb-2\">\n <div class=\"avb_pts mt-2 mb-2\">\n <span class=\"fs-16 fw-500 total_points text-secondary\">\n <span class=\" fs-18 fw-600 text-dark\">{{(this?.redemptionPoints?.availablePoints || 0).toFixed(2)}}</span>\n pts\n </span>\n <div class=\"total_value fs-12 text-secondary\">\n = max \u20B9{{(this?.redemptionPoints?.pointsConvertedRupees || 0).toFixed(2)}} discount\n </div>\n </div>\n <div class=\"wallte_icon\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/777779c1775200561187wallet_(1).png\" alt=\"\">\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mt-3\">\n <div class=\"redemable_text\">\n <div class=\"title_text\">\n <div class=\"fs-14 fw-500\">\n Redeem Points\n </div>\n <div class=\"fs-13 fs-400\">\n Use your points for discount\n </div>\n </div>\n </div>\n <div class=\"toggle_btn\">\n <label class=\"switch\">\n <input type=\"checkbox\" id=\"toggleSwitch\" [checked]=\"isPointsRedeeming\"\n (click)=\"onPointsRedeemingChange($event)\" />\n <span class=\"slider\"></span>\n </label>\n </div>\n </div>\n <div class=\"mt-3 success_selected w-100 applied-coupon-card\" *ngIf=\"isPointsRedeeming\">\n <div class=\"d-flex align-items-start gap-2\">\n <div class=\"success_icon\">\n <mat-icon class=\"d-flex justify-content-center align-items-center text-success\">check_circle</mat-icon>\n </div>\n <div class=\"success_text\">\n <div class=\"fs-13 fw-500\">\n You're saving \u20B9\n {{totalSavingAmt || 0}}\n </div>\n <div class=\"fs-12 fs-400 text-success\">\n {{totalSavingPoints}} points remaining after redemption\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Existing coupon row (keep as-is) -->\n <div class=\"coupon-section d-flex flex-column voucher-details\" [id]=\"data?.id\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist\">\n <div class=\"d-flex justify-content-between align-items-center w-100\">\n <div class=\"coupon-left\">\n Apply Coupon\n </div>\n <div (click)=\"addRedemptionCoupon(RedemptionVouchers)\">View All</div>\n </div>\n\n <!-- Applied Coupon Success Banner -->\n <div class=\"applied-coupon-card w-100 mt-3 d-flex align-items-center justify-content-between\"\n *ngIf=\"selectedVoucherId\">\n <div class=\"applied-coupon-left d-flex align-items-center gap-3\">\n <mat-icon class=\"success-check\">check_circle</mat-icon>\n <div class=\"applied-coupon-info\">\n <div class=\"applied-coupon-code\">Coupon {{ selectedVoucherCode }} applied!</div>\n <div class=\"applied-coupon-saving\">You're saving\n <span *ngIf=\"this.couponValueType === 'AMOUNT'\">\u20B9 {{selectedVoucherAmount || 0}}</span>\n <span *ngIf=\"this.couponValueType === 'PERCENTAGE'\"> {{selectedVoucherPercentage || 0}}%</span>\n </div>\n\n </div>\n </div>\n <div class=\"remove-coupon-btn fs-14 fw-500 text-secondary cursor-pointer\"\n (click)=\"removeRedemptionCoupon($event)\">Remove</div>\n </div>\n </div>\n\n <div class=\"delivery-section\" *ngIf=\"getUrl()\">\n <div class=\"delivery-header\">\n <mat-icon>gps_fixed</mat-icon>\n <span>Delivering to</span>\n <span class=\"pincode\">{{pincode}}</span>\n <!-- <a class=\"change-link\">Change Pincode</a> -->\n </div>\n </div>\n\n <div class=\"summary-section\">\n <div class=\"summary-title\">Summary</div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Subtotal</span>\n <span class=\"summary-value\">\u20B9{{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && referEarnExist && isPointsRedeeming\">\n <span class=\"summary-label\">Points Redeemed</span>\n <span class=\"summary-value\">- \u20B9{{ totalSavingAmt || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'AMOUNT' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ selectedVoucherAmount || 0 }}</span>\n </div>\n\n <div class=\"summary-row\"\n *ngIf=\"cartType === 'SHOPPING' && referEarnExist && (this.couponValueType === 'PERCENTAGE' && appliedVoucher)\">\n <span class=\"summary-label\">Voucher Applied</span>\n <span class=\"summary-value\">- \u20B9{{ percentageReduced || 0 }}</span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && responseData?.billdetails?.discountAmount\">\n <span class=\"summary-label\">Discount Amount</span>\n <span class=\"summary-value\">\n {{('\u20B9' + (responseData?.billdetails?.discountAmount | number: '1.0-2')) }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Shipping</span>\n <span class=\"summary-value\"\n [ngClass]=\"{'savings': !responseData?.billdetails?.deliveryCharges || responseData.billdetails.deliveryCharges <= 0}\">\n {{ (responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0) ? ('\u20B9' +\n (responseData.billdetails.deliveryCharges | number: '1.0-2')) : 'Free' }}\n </span>\n </div>\n\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Estimated Tax</span>\n <span class=\"summary-value\">\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number: '1.0-2'}}</span>\n </div>\n\n <div class=\"summary-row total-row\" *ngIf=\"cartType === 'SHOPPING'\">\n <span class=\"summary-label\">Total</span>\n <!-- <span class=\"summary-value\">\u20B9{{ responseData?.totalAmount | number: '1.0-2' }}</span> -->\n <span class=\"total-value\" *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{ responseData?.totalAmount |\n number: '1.0-2' }}</span>\n\n <span class=\"total-value\" *ngIf=\"isPointsRedeeming\">\u20B9{{ (responseData?.totalAmount - (totalSavingAmt || 0)) |\n number: '1.0-2' }}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (percentageReduced || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n <button class=\"place-order-btn\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n *ngIf=\"cartType === 'SHOPPING'\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n <button class=\"place-order-btn mt-0\" (click)=\"edit ? '' : proceedToCheckout()\" simpoButtonDirective\n *ngIf=\"cartType === 'SHOPPING'\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout\n Cart'}}</button>\n\n </div>\n </div>\n <!-- <ng-container *ngIf=\"recommededData?.length\">\n <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\"\n [responseData]=\"recommededData\"></simpo-featured-products>\n </ng-container> -->\n</ng-template>\n<ng-template #CHECKOUTPAGE>\n <div class=\"checkout-left-panel\">\n <div class=\"checkout-main-content\">\n <!-- <div class=\"delivery-options\">\n <div class=\"delivery-option active\">\n <div class=\"delivery-icon\"></div>\n HOME DELIVERY\n </div>\n <div class=\"delivery-option\">\n <div class=\"delivery-icon\"></div>\n STORE PICK-UP\n </div>\n </div> -->\n\n <div class=\"section-title\">Shipping Address</div>\n\n <div class=\"shipping-info\" *ngIf=\"defaultAddress\">\n <div class=\"address-info\">\n <div class=\"address-name\">{{defaultAddress?.receiverName}} ({{defaultAddress?.addressType}})</div>\n <div class=\"address-details\">{{defaultAddress?.addressLine1}}, {{defaultAddress?.cityName}},\n {{defaultAddress?.stateName}}</div>\n <div class=\"mobile-number\">Mobile: {{defaultAddress?.receiverPhone}}</div>\n </div>\n </div>\n\n <div class=\"addLinks h-100\" *ngIf=\"!defaultAddress\" (click)=\"addAddress()\">\n <mat-icon>add</mat-icon>\n </div>\n\n <button class=\"change-address-btn\" (click)=\"changeAddress()\" *ngIf=\"defaultAddress\">CHANGE OR ADD ADDRESS</button>\n\n <button class=\"btn w-100 mt-1 payment-btn\" (click)=\"proceedToPayment()\" simpoButtonDirective\n *ngIf=\"defaultAddress && !placeOrderLoader\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\n [color]=\"data?.styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">\n Place Order\n </button>\n <button class=\"btn w-100 mt-1 payment-btn\" simpoButtonDirective *ngIf=\"defaultAddress && placeOrderLoader\"\n [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\">\n Loading...\n </button>\n\n </div>\n </div>\n\n <div class=\"checkout-right-panel\">\n <div class=\"order-summary\">\n <div class=\"summary-title\">Order Summary</div>\n\n <div class=\"checkout-product\">\n <div class=\"product-item\" *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\n <img [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-image\"\n alt=\"\">\n <div class=\"product-details\">\n <div class=\"product-name\">{{item.itemName}}</div>\n <div class=\"product-quantity\">Quantity: {{item.quantity}}</div>\n <div class=\"product-price\">\u20B9{{(item.sellingPrice * item.quantity) | number: '1.0-2'}}</div>\n </div>\n </div>\n\n </div>\n\n <div class=\"price-breakdown\">\n <div class=\"price-row\">\n <span>Total Price</span>\n <span>\u20B9{{(responseData?.billdetails?.totalNetValue\n ?? 0) | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\">\n <span>Total Tax</span>\n <span>\u20B9{{((!responseData.billdetails?.couponId ?\n responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) |\n number:\n '1.0-2'}}</span>\n </div>\n <div class=\"summary-row\" *ngIf=\"cartType === 'SHOPPING' && cartInfo?.billdetails?.orraSchemeRedeemedAmount\">\n <span class=\"summary-label\">Redeem Amount</span>\n <span class=\"summary-value\">\u20B9{{(cartInfo?.billdetails?.orraSchemeRedeemedAmount ?? 0) | number:\n '1.0-2'}}</span>\n </div>\n\n <div class=\"price-row discount\" *ngIf=\"responseData?.billdetails?.discountAmount && !isJewellery\">\n <span>Coupon Discount</span>\n <span>- \u20B9{{responseData?.billdetails?.discountAmount\n | number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row\"\n *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\n <span>Delivery Charge</span>\n <span>{{responseData.billdetails.deliveryCharges\n |\n number: '1.0-2'}}</span>\n </div>\n <div class=\"price-row total\" *ngIf=\"cartType === 'SHOPPING'\">\n <span>TOTAL AMOUNT</span>\n <span *ngIf=\"!isPointsRedeeming && !appliedVoucher\">\u20B9{{(responseData?.totalAmount ?? 0) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"isPointsRedeeming\">\u20B9{{(responseData?.totalAmount - (totalSavingAmt || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'AMOUNT'\">\u20B9{{(responseData?.totalAmount -\n (selectedVoucherAmount || 0)) | number:\n '1.0-2'}}</span>\n <span *ngIf=\"appliedVoucher && this.couponValueType === 'PERCENTAGE'\">\u20B9{{(responseData?.totalAmount -\n (responseData?.totalAmount * (selectedVoucherPercentage / 100) || 0)) | number:\n '1.0-2' }}</span>\n </div>\n </div>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #CARTITEM let-products=\"data\">\n <div class=\"cart-item\" *ngFor=\"let item of products\" [style.color]=\"fontColor\">\n <div class=\"item-left\">\n <div class=\"item-image\">\n <img class=\"item-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\"\n (click)=\"goToProductDetails(item)\" style=\"cursor: pointer;\">\n </div>\n <div class=\"item-details\">\n <h3 class=\"item-title\">{{item.itemName}}</h3>\n <div class=\"item-subtitle\" *ngIf=\"item.itemVariant\">\n <span *ngFor=\"let varient of getKeys(item.itemVariant.properties); let last = last\">\n {{ item.itemVariant.properties[varient] | titlecase }}<span *ngIf=\"!last\">, </span>\n </span>\n </div>\n </div>\n </div>\n\n <div class=\"item-right\">\n <div class=\"quantity-control\" *ngIf=\"cartType === 'SHOPPING'\">\n <button class=\"qty-btn px-2\" (click)=\"decreaseQty(item)\" [disabled]=\"item.quantity === 1\">\n <mat-icon>remove</mat-icon>\n </button>\n <span class=\"qty-value px-3\">{{item.quantity}}</span>\n <button class=\"qty-btn px-2\" (click)=\"increaseQty(item)\">\n <mat-icon>add</mat-icon>\n </button>\n </div>\n\n <div class=\"item-price\">\n \u20B9{{item.sellingPrice | number: '1.0-2'}}\n </div>\n\n <div class=\"delete-btn-circle\" (click)=\"removeItem(item)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-trash-2\">\n <path d=\"M3 6h18\" />\n <path d=\"M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6\" />\n <path d=\"M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2\" />\n <line x1=\"10\" x2=\"10\" y1=\"11\" y2=\"17\" />\n <line x1=\"14\" x2=\"14\" y1=\"11\" y2=\"17\" />\n </svg>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #EMPTYITEM>\n <section class=\"empty-cart w-100 d-flex align-items-center justify-content-center\">\n <div class=\"empty-cart-container d-flex flex-column\">\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\" [appImageEditor]=\"edit || false\"\n [imageData]=\"data?.content?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"cart-text content-side\">\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"d-flex justify-content-center\"\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\n </div>\n </ng-container>\n </div>\n <button class=\"place-order-btn mx-auto w-fit\" (click)=\"edit ? '' : proceedToListPage()\" simpoButtonDirective\n [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\"\n [appButtonEditor]=\"edit ?? false\"\n [backgroundInfo]=\"styles?.background\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue\n Shopping'}}</button>\n </div>\n </section>\n</ng-template>\n\n<ng-template #SCHEME_REDEMPTION>\n <div class=\"modal-body\">\n <div class=\"scheme-option\" *ngFor=\"let scheme of schemeList\" (click)=\"redeemScheme(scheme, false)\"\n [style.borderColor]=\"cartInfo.billdetails.orraSchemeCode ? styles?.background?.color : ''\">\n <label for=\"individual\" class=\"scheme-card\">\n <div class=\"scheme-info d-flex gap-1\">\n <div class=\"form-check-radio\">\n <input class=\"form-check-input-radio\" type=\"radio\" name=\"flexRadioDefault\" id=\"flexRadioDefault2\">\n </div>\n <div class=\"right-side\">\n <div class=\"scheme-name\">\n <div class=\"scheme-title\">Individual Investment Scheme</div>\n <div class=\"scheme-monthly\">\u20B98000/M</div>\n </div>\n <div class=\"scheme-details\">\n <span class=\"scheme-id\">GPP Id: {{scheme.GPPId}}</span>\n <!-- <span class=\"scheme-maturity\">Maturity Date: 12 April 2024</span> -->\n </div>\n <div class=\"scheme-amount\">\u20B9{{scheme.amount}}</div>\n </div>\n </div>\n </label>\n </div>\n <div class=\"reedem_error d-flex justify-content-center align-items-center\" *ngIf=\"showReedemError\">\n Please add more \u20B9{{vaildAmount}} to reedem this scheme\n </div>\n </div>\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.reedem-section{padding:10px 15px;border-radius:15px;background:#f6f3f9;box-shadow:#b2b2ca80 2px 2px 6px;font-weight:700;font-size:13px}.redeem-section-text{font-size:.9rem;font-weight:700}.form-check-input:checked{background-color:#28a745!important;border-color:#28a745!important}.form-check-input:focus{border-color:#28a745!important;outline:0;box-shadow:none!important}.close-btn{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.close-btn:hover{color:#374151}.select_matured_text{font-size:.8rem!important;margin-top:10px;color:#05aacf}.position-relative{position:relative}.cart-parent{display:flex;margin-top:15px}.left-panel{width:65%;padding-right:5rem;border-right:1px solid #E9E9E9}.timeline{cursor:pointer}.cart-items{background:#fff;border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.cart-header{padding:16px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.cart-header h2{margin:0;font-size:18px;font-weight:500;color:#0f172a}.cart-item{display:flex!important;align-items:center;justify-content:space-between;border-bottom:1px solid #e2e8f0;gap:20px;padding:0 8px;transition:background .2s}.cart-item:hover{background:#fbfcfe}.item-left{display:flex;align-items:center;flex:1}.item-right{display:flex;align-items:center;padding:15px;gap:32px}.item-image img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid #f1f5f9}.item-details{display:flex;flex-direction:column;gap:4px}.item-title{margin:0;font-size:15px;font-weight:600;color:#0f172a;line-height:1.4}.item-subtitle{font-size:13px;color:#64748b;font-weight:400}.quantity-control{display:flex;align-items:center;border:1.5px solid #e2e8f0;border-radius:7px;overflow:hidden;height:38px;background:#fff;width:fit-content}.qty-btn{width:38px;height:100%;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;transition:all .2s ease}.qty-btn:hover{background:#f8fafc;color:#0f172a}.qty-btn mat-icon{font-size:16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.qty-value{width:32px;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:#0f172a;border-left:1.5px solid #e2e8f0;border-right:1.5px solid #e2e8f0}.item-price{font-size:18px;font-weight:700;color:#0f172a;min-width:60px;text-align:right;letter-spacing:-.01em}.delete-btn-circle{width:36px;height:36px;border-radius:50%;border:1px solid #fee2e2;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#ef4444;transition:all .2s ease}.delete-btn-circle:hover{background:#fef2f2;border-color:#fecaca;transform:scale(1.05);color:#dc2626}.delete-btn-circle svg{width:18px;height:18px}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%;padding-left:5rem}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer;font-size:18px}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.hover_effect{position:unset;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;width:100%;text-align:center}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.see-live-btn{white-space:nowrap!important}.left-panel{width:100%;padding-right:0rem}.right-panel{width:100%;z-index:1000;padding-left:0rem}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap;display:none}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}.checkoutPage{flex-direction:column}.checkout-left-panel,.checkout-right-panel{width:100%!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}.box-shadow{box-shadow:#00000029 0 1px 4px}.main-content{border-radius:12px;padding:0 30px 30px;width:100%;overflow:scroll;height:calc(100vh - 150px)}.delivery-options{display:flex;gap:20px;margin-bottom:30px}.delivery-option{padding:12px 24px;border:2px solid #e0e0e0;border-radius:25px;background:#fff;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:500;transition:all .2s}.delivery-option.active{background:#f0e6ff;border-color:#8b5cf6;color:#7c3aed}.delivery-option:hover{border-color:silver}.delivery-icon{width:16px;height:16px;background:#8b5cf6;border-radius:3px}.section-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.shipping-info{border-radius:10px;padding:20px;margin-bottom:20px;border:1px solid rgb(238,232,255);box-shadow:#0000000a 0 4px 8px}.delivery-date{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.delivery-date-text{color:#666;font-weight:500}.change-date-btn{color:#e91e63;background:none;border:none;font-weight:600;cursor:pointer;text-transform:uppercase;font-size:12px;letter-spacing:.5px}.address-info{margin-bottom:15px}.address-name{font-weight:700;margin-bottom:8px;color:#000}.address-details{color:#666;margin-bottom:8px}.mobile-number{font-weight:700;color:#000;font-size:15px}.change-address-btn{font-size:1rem!important;font-weight:700!important;padding:6px;background:#fff;border:1px solid rgb(229,221,255);border-radius:8px;color:#000;cursor:pointer;transition:all .2s;box-shadow:#0000000a 0 4px 8px}.change-address-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.billing-section{margin-top:40px}.billing-options{display:flex;flex-direction:column;gap:15px;margin-top:20px}.billing-option{display:flex;align-items:center;gap:12px;padding:15px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.billing-option.active{background:#f0e6ff;border-color:#8b5cf6}.radio-btn{width:20px;height:20px;border:2px solid #e0e0e0;border-radius:50%;position:relative}.billing-option.active .radio-btn{border-color:#8b5cf6}.billing-option.active .radio-btn:after{content:\"\";width:10px;height:10px;background:#8b5cf6;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.order-summary{border-radius:12px;padding:25px;width:75%}.summary-title{font-size:16px;font-weight:700;margin-bottom:20px;color:#000}.product-item{display:flex;gap:15px;margin-bottom:20px;border-bottom:1px solid #f0f0f0;border-radius:7px;background:#fff;padding:15px}.product-item:last-of-type{border-bottom:none;margin-bottom:30px;padding-bottom:0}.product-image{max-width:110px;width:100%;height:100%;border-radius:8px}.product-details{flex:1}.product-name{font-weight:500;margin-bottom:4px;color:#2d3748;font-size:14px}.product-quantity{color:#666;font-size:12px;margin-bottom:8px}.product-price{font-weight:600;color:#2d3748}.delivery-info{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11px;color:#8b5cf6}.delivery-icon-small{width:12px;height:12px;background:#8b5cf6;border-radius:2px}.price-breakdown{border-top:1px solid #f0f0f0;padding-top:20px}.price-row{display:flex;justify-content:space-between;margin-bottom:12px;color:#666}.price-row.total{font-weight:600;color:#2d3748;font-size:16px;margin-top:15px;padding-top:15px;border-top:1px solid #f0f0f0}.discount{color:#22c55e!important}@media (max-width: 768px){.container{grid-template-columns:1fr;padding:15px;gap:20px}.main-content,.order-summary{padding:20px;width:100%}.delivery-options{flex-direction:column;gap:10px}}.checkout-left-panel{width:65%;display:flex;justify-content:center}.checkout-right-panel{width:35%;display:flex;justify-content:center;background-color:#f9f9fa}.checkout-product{max-height:50vh;overflow:scroll}.mt-1{margin-top:1rem!important}.payment-btn{box-shadow:#0000000a 0 4px 8px}.addLinks{padding-bottom:8px;padding-top:9px;border:1px dashed;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:5px;height:25vh!important;margin-bottom:20px}.addLinks mat-icon{border:1px solid rgb(219,223,225);display:flex;border-radius:100%;align-items:center;justify-content:center;font-size:16px;color:#dbdfe1}.change-pincode{display:flex;gap:10px}.change-pincode mat-icon{font-size:18px;align-items:center;justify-content:center;display:flex}.change-pincode span{font-size:14px}.fs-13{font-size:13px}.fs-12{font-size:12px}.fs-18{font-size:18px}.b-1-b{border-width:0px 1px;border-style:solid;border-color:#000}.container{max-width:unset;padding:24px;display:flex;gap:24px;width:100%!important}.main-content{background:#fff;border-radius:12px;width:70%}.promo-banner{padding:16px 20px;display:flex;flex-direction:column;gap:10px;border-radius:8px;border:1px solid #e2e8f0}.promo-banner-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.promo-text h3{font-size:16px!important;font-weight:500;margin-bottom:4px}.promo-text p{font-size:.9rem!important;margin-bottom:0!important;color:#64748b}.see-live-btn{background:#fff;border:1px solid #e2e8f0;font-weight:600;color:#000;padding:8px 16px;border-radius:8px;font-size:12px!important;cursor:pointer;display:flex;align-items:center;gap:8px;width:max-content!important;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.see-live-btn:hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}.see-live-btn:disabled{color:#94a3b8;cursor:not-allowed;box-shadow:none}.see-live-btn:disabled:hover{background:#fff;border-color:#e2e8f0;transform:none}.see-live-btn svg{color:#6366f1}.video-selection-line{font-size:.8rem;color:#64748b}.video-cart-hint{font-size:.8rem;color:#6366f1;cursor:pointer;text-decoration:underline;width:max-content}.schedule-panel-overlay{position:fixed;inset:0;background:#141a2666;z-index:1200}.schedule-panel-backdrop{position:absolute;inset:0;border:none;background:none;cursor:default;padding:0}.schedule-panel{position:absolute;top:0;right:0;bottom:0;width:400px;max-width:92vw;background:#fff;box-shadow:-20px 0 50px -20px #141a2659;display:flex;flex-direction:column}.schedule-panel-header{flex:none;padding:20px 22px;border-bottom:1px solid #e2e8f0;display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.schedule-panel-title{font-size:17px;font-weight:600;color:#1b2436}.schedule-panel-subtitle{font-size:12.5px;color:#64748b}.schedule-panel-close{flex:none;border:none;background:none;cursor:pointer;color:#64748b;line-height:0;padding:3px}.schedule-panel-body{flex:1;min-height:0;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:10px}.schedule-panel-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;cursor:pointer;width:100%;background:#fff;border:1px solid #e2e8f0;text-align:left}.schedule-panel-row.selected{background:#f5f3ff;border-color:#c7d2fe}.schedule-panel-checkbox{width:18px;height:18px;flex:none;border:1.5px solid #cbd5e1;border-radius:4px;background:#fff;display:grid;place-items:center}.schedule-panel-checkbox.checked{background:#6366f1;border-color:#6366f1}.schedule-panel-checkbox mat-icon{color:#fff!important;font-size:13px!important;height:13px!important;width:13px!important}.schedule-panel-thumb{width:46px;height:46px;border-radius:6px;object-fit:cover;flex:none;background:#f3efe9}.schedule-panel-info{flex:1}.schedule-panel-name{font-size:13.5px;color:#1b2436}.schedule-panel-footer{flex:none;padding:16px 22px;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;gap:10px}.schedule-panel-selection-line{font-size:11.5px;color:#64748b}.schedule-panel-cta{width:100%;height:48px;border:none;border-radius:8px;background:#7c3a11;color:#fff;font-size:14px;font-weight:600;cursor:pointer}.schedule-panel-cta:disabled{background:#cbd5e1;cursor:not-allowed}.cart-item{display:flex;gap:16px;position:relative}.cart-item:last-child{border-bottom:none}.item-image{width:15%;height:100px;border-radius:8px;object-fit:cover;display:flex;align-items:center;justify-content:center}.item-details{flex:1}.item-title{font-weight:500;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px}.current-price{font-size:1rem;font-weight:600}.original-price{font-size:1rem;text-decoration:line-through}.discount{background:#fef3c7;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-code{font-size:12px;color:#9ca3af;margin-bottom:8px}.item-options{display:flex;gap:16px;font-size:14px;color:#6b7280;margin-bottom:12px}.delivery-info{font-size:12px;color:#8b5cf6}.pickup-info{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:5px 15px;margin-top:12px;display:flex;align-items:center;cursor:pointer;width:max-content;gap:20px}.pickup-text{font-size:.9rem;color:#374151}.remove-btn{position:absolute;top:16px;right:0;width:20px!important;height:20px;background:#000;color:#fff;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px!important}.sidebar{display:flex;flex-direction:column;gap:16px;width:32%}.coupon-section{border-radius:8px;padding:10px 15px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.coupon-section:hover{border-color:#cbd5e1;background-color:#f8fafc}.chevron-icon{color:#94a3b8;transition:transform .2s ease}.coupon-section:hover .chevron-icon{transform:translate(2px);color:#64748b}.scheme-section{border-radius:12px;padding:10px 15px;cursor:pointer}.coupon-left{display:flex;align-items:center;gap:12px}.coupon-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.coupon-icon mat-icon{font-size:17px;width:17px!important;height:19px!important}.coupon-text{font-weight:700;font-size:.9rem}.delivery-section{background:#fff;border-radius:12px;padding:10px 15px;box-shadow:#b2b2ca80 2px 2px 6px;background:#f6f3f9}.delivery-header{display:flex;align-items:center;gap:12px;margin-bottom:4px}.delivery-header span{font-size:.9rem;font-weight:700}.delivery-header mat-icon{width:20px;height:20px;font-size:17px;position:relative;top:2px}.delivery-icon{width:20px;height:20px;background:#8b5cf6;border-radius:50%}.pincode{font-weight:600;color:#111827}.change-link{color:#ec4899;font-size:.9rem;text-decoration:none;margin-left:auto}.summary-section{background:#fff;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.summary-title{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:20px;letter-spacing:-.01em}.summary-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.summary-row:last-child{margin-bottom:0}.summary-label{font-size:14px;font-weight:400;color:#64748b}.summary-value{font-size:14px;font-weight:500;color:#0f172a}.summary-divider{height:1px;background:#f1f5f9;margin:16px 0;width:100%}.total-row .summary-label{font-size:16px;font-weight:600;color:#0f172a}.total-row .summary-value{font-size:16px;font-weight:700;color:#0f172a}.total-row{border-top:1px solid #e2e8f0;padding-top:15px;margin-top:15px}.total-label{font-weight:600;font-size:16px}.total-value{font-weight:700;font-size:18px}.place-order-btn{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;border:none;border-radius:12px;padding:9px 10px;font-size:.9rem!important;font-weight:600;cursor:pointer;margin-top:10px;text-transform:uppercase}.place-order-btn:hover{opacity:.9}.chain-icon,.earring-icon{width:60px;height:60px;filter:sepia(1) hue-rotate(30deg) saturate(2)}.item-img{width:100%;height:100%;object-fit:cover}.mt-0{margin-top:0!important}select{outline:none;border-radius:5px;padding:2px;width:20%;border:none;box-shadow:#9999994d 2px 2px 6px;cursor:pointer}.cart-tab-parent{display:flex;justify-content:center}.cart-tabs{gap:10px;display:flex;justify-content:center;align-items:center;width:max-content;border-radius:8px;border:1px solid #e2e8f0}.cart-tabs div{padding:7px 10px;cursor:pointer;font-size:14px}.selected-cart-tab{margin:6px;background:#f1f5f9;border-radius:5px;color:#000!important;font-weight:500}.checkout-main-content{width:50%;padding:30px;border-radius:12px}@media screen and (max-width: 475px){.main-content{padding:0;height:auto!important}.cart-item{flex-direction:column!important;align-items:flex-start!important;padding:16px 12px!important;gap:16px!important}.item-left{width:100%!important;gap:16px!important;align-items:flex-start!important}.item-image{width:86px!important;height:86px!important;flex-shrink:0!important}.item-right{width:100%!important;justify-content:space-between!important;padding:0!important;gap:12px!important;margin-top:4px!important}.item-price{flex:1!important;text-align:right!important;margin-right:8px!important;font-size:16px!important}.item-title{font-size:14px!important;-webkit-line-clamp:2!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.quantity-control{height:34px!important}.qty-btn{width:34px!important}.qty-value{width:28px!important;font-size:13px!important}.no-items{height:86vh;overflow:hidden;margin:0}.checkout-main-content{width:100%}.container{padding:0!important}.pickup-info{display:none}.container{display:flex;flex-direction:column}.promo-banner{gap:10px}select{width:50%}.main-content,.sidebar{width:100%}.vouchers-listing-section{min-width:unset!important;width:100vw!important}.separator{display:none!important}.coupon-meta{display:grid!important;grid-template-columns:1fr 1fr!important}}.group_invest{color:#000;font-size:.8rem}.reedem_error{color:red}.group_invest span{color:#05aacf}.redeem_amount{padding:2%;border-radius:4px;background:#fff;margin-top:2%;color:#000;font-size:.8rem}.redeem_amount span{color:#0dc577}.w-fit{width:fit-content!important}.modal-body{padding-bottom:0;overflow-y:scroll;max-height:300px;padding:0!important}.scheme-option{margin-bottom:16px}.scheme-option input[type=radio]:checked+.scheme-card{border-color:#06b6d4;background:#f0f9ff;position:relative}.scheme-option input[type=radio]:checked+.scheme-card:before{content:\"\";position:absolute;top:20px;left:20px;width:20px;height:20px;border:2px solid #06b6d4;border-radius:50%;background:#fff}.scheme-option input[type=radio]:checked+.scheme-card:after{content:\"\";position:absolute;top:26px;left:26px;width:8px;height:8px;background:#06b6d4;border-radius:50%}.scheme-card{justify-content:space-between;padding:10px;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease;background:#fff;width:100%}.scheme-card:hover{border-color:#d1d5db;background:#f9fafb}.form-check-radio{width:10%}.scheme-title{font-size:12px;font-weight:600;color:#111827;margin-bottom:8px}.scheme-details{display:flex;gap:25px;margin-bottom:20px}.scheme-name{display:flex;justify-content:space-between}.scheme-details span{font-size:12px;color:#0000004d}.scheme-monthly{font-size:14px;font-weight:600;color:#111827;min-width:100px;text-align:right}.right-side{width:90%}.scheme-amount{font-weight:700}@media screen and (min-width: 700px){.cart-items{max-height:500px;overflow:scroll}}.add-to-cart-parent{width:max-content;border:1px solid #000000;border-radius:8px}.cursor{cursor:pointer}.cart-text{max-width:600px;margin:0 auto;text-align:center}.cart-text div{word-break:break-word;overflow-wrap:break-word;white-space:normal}.switch{position:relative;display:inline-block;width:45px;height:20px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:3px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(24px)}.vouchers-listing-section{position:relative;width:fit-content;min-width:500px;z-index:100;background:#fff;height:100vh}.vouchers-listing-section .coupon-heading{border-bottom:1px solid #eee}.vouchers-listing-section .coupon-listing{padding:12px 16px;overflow-y:auto;height:calc(97vh - 100px)}.voucher-details{background:#fff;border-radius:12px;padding:14px;box-shadow:0 1px 4px #00000042}.voucher-details .coupon-brief .apply-offer-btn{background:#111;color:#fff;border-radius:10px;padding:6px 16px}.voucher-details .coupon-code-box{border:1.5px dashed #bbb;border-radius:8px;padding:8px 12px;margin-bottom:10px}.voucher-details .coupon-code-box .code-label{font-size:11px;color:#888;margin-bottom:2px}.voucher-details .coupon-code-box .code-row .code-value{font-weight:700;font-size:15px;letter-spacing:1px}.voucher-details .coupon-meta .clock-icon{font-size:14px;height:14px;width:14px;vertical-align:middle}.applied-coupon-card{background:#f0fff8;border-radius:12px;padding:12px 16px}.applied-coupon-card .applied-coupon-left .success-check{color:#22c55e;font-size:22px}.applied-coupon-card .applied-coupon-left .applied-coupon-code{font-weight:700;font-size:14px}.applied-coupon-card .applied-coupon-left .applied-coupon-saving{font-size:13px;color:#097d5f;margin-top:2px}.active-type{background:#111!important;color:#fff!important}.redemption-type{text-align:center;border-radius:10px;padding:6px 16px;background:#d3d3d36b;width:-webkit-fill-available!important}.wallte_icon{background:#000;border-radius:50px;padding:5px 9px 7px}.wallte_icon img{width:18px;height:18px}.fw-600{font-weight:600}.coupon-type{width:fit-content!important;border-radius:26px!important;background:transparent!important;border:1px solid #afafaf;color:#393838;text-align:center;padding:6px 16px}.active-coupon{background:transparent!important;border:2px solid black!important;color:#000!important}.my-close-btn{position:absolute!important;top:10px!important;right:10px!important}\n"] }]
10831
10831
  }], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$2.Router }, { type: RestService }, { type: i3$2.MatDialog }, { type: StorageServiceService }, { type: i6$1.MessageService }, { type: i8$1.MatBottomSheet }, { type: i2$2.ActivatedRoute }, { type: BookingProductCartService }, { type: undefined, decorators: [{
10832
10832
  type: Optional
10833
10833
  }, {
@@ -11723,6 +11723,9 @@ class NavbarSectionComponent {
11723
11723
  this.StickyType = Sticky_Type;
11724
11724
  // matDialog = inject(MatDialog);
11725
11725
  this.isBrowser = false;
11726
+ /** The booking-cart icon should only show when a customer could have something to book -
11727
+ * i.e. either mode is enabled, not tied to one specific mode. */
11728
+ this.appointmentSettings = null;
11726
11729
  this.isNavbarOpen = false;
11727
11730
  this.screenWidth = 475;
11728
11731
  this.showEditors = false;
@@ -11780,6 +11783,17 @@ class NavbarSectionComponent {
11780
11783
  // this.style.background.color = this.nextComponent.styles.background.color;
11781
11784
  // this.style.background.accentColor = this.nextComponent.styles.background.accentColor;
11782
11785
  // }
11786
+ this.getAppointmentSettings();
11787
+ }
11788
+ getAppointmentSettings() {
11789
+ const businessId = localStorage.getItem('businessId') ?? '';
11790
+ if (!businessId)
11791
+ return;
11792
+ this.restService.getBusinessAppointmentSettings(businessId).subscribe((res) => {
11793
+ this.appointmentSettings = res;
11794
+ }, () => {
11795
+ // Non-fatal - the booking-cart icon just stays hidden.
11796
+ });
11783
11797
  }
11784
11798
  getScreenSize(event) {
11785
11799
  if (typeof window !== 'undefined') {
@@ -11908,7 +11922,7 @@ class NavbarSectionComponent {
11908
11922
  return page;
11909
11923
  }
11910
11924
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i3$2.MatDialog }, { token: i8$1.MatBottomSheet }, { token: i2$1.CookieService }, { token: StorageServiceService }, { token: RestService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
11911
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "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)\" [attr.style]=\"customClass\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n <div class=\"d-flex align-item-center\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n <div class=\"d-flex align-items-center gap-15\">\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n </div>\r\n\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <div class=\"d-flex flex-column align-item-center\">\r\n <div class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n <div class=\"d-flex\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"canShowMobileFooter\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\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\r\n<ng-template #logoSectionTemplate>\r\n <div class=\" left-logo-text d-flex\">\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *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 loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" 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 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\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</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\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\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\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 <app-button-element\r\n [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n </div>\r\n <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\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 align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToBookings()\" *ngIf=\"!isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">event_available</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bookings</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getBookingItemsCount\">{{getBookingItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToBookings()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">event_available</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Bookings</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getBookingItemsCount\">{{getBookingItemsCount}}</div>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToAccount()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">account_circle</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Account</span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n <div class=\"inner-height \">\r\n <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n <div class=\"title-row\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n\r\n <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n </button>\r\n\r\n\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n <div class=\"d-flex flex-column gap-2\">\r\n\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n <div class=\"d-flex\" *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\r\n\r\n <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element\r\n [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;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;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.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:14px!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:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.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:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { 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", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.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", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "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", "categoryHeader"], outputs: ["stickyScrolled"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
11925
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "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)\" [attr.style]=\"customClass\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n <div class=\"d-flex align-item-center\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n <div class=\"d-flex align-items-center gap-15\">\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n </div>\r\n\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <div class=\"d-flex flex-column align-item-center\">\r\n <div class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n <div class=\"d-flex\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"canShowMobileFooter\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\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\r\n<ng-template #logoSectionTemplate>\r\n <div class=\" left-logo-text d-flex\">\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *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 loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" 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 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\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</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\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\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\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 <app-button-element\r\n [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n </div>\r\n <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\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 align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToBookings()\"\r\n *ngIf=\"!isMobile && (appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled)\">\r\n <mat-icon [simpoColor]=\"simpoColor\">event_available</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bookings</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getBookingItemsCount\">{{getBookingItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToBookings()\"\r\n *ngIf=\"appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled\">\r\n <mat-icon [simpoColor]=\"simpoColor\">event_available</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Bookings</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getBookingItemsCount\">{{getBookingItemsCount}}</div>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToAccount()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">account_circle</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Account</span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n <div class=\"inner-height \">\r\n <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n <div class=\"title-row\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n\r\n <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n </button>\r\n\r\n\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n <div class=\"d-flex flex-column gap-2\">\r\n\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n <div class=\"d-flex\" *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\r\n\r\n <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element\r\n [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;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;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.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:14px!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:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.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:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { 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", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.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", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "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", "categoryHeader"], outputs: ["stickyScrolled"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
11912
11926
  }
11913
11927
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NavbarSectionComponent, decorators: [{
11914
11928
  type: Component,
@@ -11944,7 +11958,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
11944
11958
  MatButtonModule,
11945
11959
  MatMenuModule,
11946
11960
  SpacingHorizontalDirective
11947
- ], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n <div class=\"d-flex align-item-center\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n <div class=\"d-flex align-items-center gap-15\">\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n </div>\r\n\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <div class=\"d-flex flex-column align-item-center\">\r\n <div class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n <div class=\"d-flex\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"canShowMobileFooter\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\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\r\n<ng-template #logoSectionTemplate>\r\n <div class=\" left-logo-text d-flex\">\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *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 loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" 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 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\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</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\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\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\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 <app-button-element\r\n [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n </div>\r\n <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\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 align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToBookings()\" *ngIf=\"!isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">event_available</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bookings</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getBookingItemsCount\">{{getBookingItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToBookings()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">event_available</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Bookings</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getBookingItemsCount\">{{getBookingItemsCount}}</div>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToAccount()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">account_circle</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Account</span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n <div class=\"inner-height \">\r\n <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n <div class=\"title-row\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n\r\n <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n </button>\r\n\r\n\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n <div class=\"d-flex flex-column gap-2\">\r\n\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n <div class=\"d-flex\" *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\r\n\r\n <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element\r\n [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;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;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.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:14px!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:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.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:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}\n"] }]
11961
+ ], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [isHeader]=\"true\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n <div class=\"d-flex align-item-center\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n <div class=\"d-flex align-items-center gap-15\">\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n\r\n </div>\r\n\r\n <div class=\"position-relative d-flex align-items-center justify-content-between\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n <div class=\"d-flex flex-column align-item-center\">\r\n <div class=\"d-flex justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n <div class=\"d-flex\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"canShowMobileFooter\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\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\r\n<ng-template #logoSectionTemplate>\r\n <div class=\" left-logo-text d-flex\">\r\n <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *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 loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" 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 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\" loading=\"lazy\">\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\"\r\n id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\" (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\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</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\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\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"\r\n [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\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 <app-button-element\r\n [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative\" style=\"max-width: 50vw;\">\r\n <div class=\"search-icon\" *ngIf=\"!isMobile\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [simpoColor]=\"simpoColor\">search</mat-icon>\r\n </div>\r\n <div class=\"input-group\" *ngIf=\"!isMobile && showSearchBar\">\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 align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToBookings()\"\r\n *ngIf=\"!isMobile && (appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled)\">\r\n <mat-icon [simpoColor]=\"simpoColor\">event_available</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bookings</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getBookingItemsCount\">{{getBookingItemsCount}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToBookings()\"\r\n *ngIf=\"appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled\">\r\n <mat-icon [simpoColor]=\"simpoColor\">event_available</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Bookings</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getBookingItemsCount\">{{getBookingItemsCount}}</div>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToAccount()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">account_circle</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Account</span>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n <div class=\"inner-height \">\r\n <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n <div class=\"title-row\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n\r\n <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n </button>\r\n\r\n\r\n <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n <mat-icon>close</mat-icon>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n <div class=\"d-flex flex-column gap-2\">\r\n\r\n <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element\r\n [buttonData]=\"item\"\r\n [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n <div class=\"d-flex\" *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\r\n\r\n <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n <div *ngIf=\"action?.display\" class=\"button-display\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element\r\n [buttonContent]=\"button.content\"\r\n [buttonStyle]=\"button.styles\"\r\n [sectionId]=\"data?.id\" [edit]=\"edit\"\r\n [color]=\"data?.styles?.background?.accentColor\"[backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;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;position:relative;top:2px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.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:14px!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:38px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px;position:absolute;right:0%;top:130%;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.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:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.gap-15{gap:15px}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}\n"] }]
11948
11962
  }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i3$2.MatDialog }, { type: i8$1.MatBottomSheet }, { type: i2$1.CookieService }, { type: StorageServiceService }, { type: RestService }, { type: undefined, decorators: [{
11949
11963
  type: Inject,
11950
11964
  args: [PLATFORM_ID]
@@ -17352,6 +17366,9 @@ class HeaderSectionComponent {
17352
17366
  * Appointment app installed (booking now requires login) - mirrors checkPassbookApp() exactly,
17353
17367
  * reusing the same generic "is app installed" check already used for Passbook. */
17354
17368
  this.appointmentAppStatus = false;
17369
+ /** The booking-cart icon should only show when a customer could have something to book -
17370
+ * i.e. either mode is enabled, not tied to one specific mode. */
17371
+ this.appointmentSettings = null;
17355
17372
  this.showSearchBarMobile = false;
17356
17373
  this.showDropdownDesktopSearch = false;
17357
17374
  this.isNavbarOpen = false;
@@ -17502,6 +17519,7 @@ class HeaderSectionComponent {
17502
17519
  this.scheduleParentHeightCalculation();
17503
17520
  this.checkPassbookApp();
17504
17521
  this.checkAppointmentApp();
17522
+ this.getAppointmentSettings();
17505
17523
  this._eventSubscriber = this._eventService.menuList.subscribe((response) => {
17506
17524
  this.getMenuItems();
17507
17525
  });
@@ -17565,6 +17583,16 @@ class HeaderSectionComponent {
17565
17583
  }
17566
17584
  });
17567
17585
  }
17586
+ getAppointmentSettings() {
17587
+ const bId = this.storage.getItem('bId') ?? '';
17588
+ if (!bId)
17589
+ return;
17590
+ this.restService.getBusinessAppointmentSettings(bId).subscribe((res) => {
17591
+ this.appointmentSettings = res;
17592
+ }, () => {
17593
+ // Non-fatal - the booking-cart icon just stays hidden.
17594
+ });
17595
+ }
17568
17596
  getScreenSize(event) {
17569
17597
  if (!this.isBrowser)
17570
17598
  return;
@@ -17951,7 +17979,7 @@ class HeaderSectionComponent {
17951
17979
  }
17952
17980
  }
17953
17981
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i3$2.MatDialog }, { token: StorageServiceService }, { token: RestService }, { token: EventsService }, { token: LOCAL_STORAGE }, { token: PLATFORM_ID }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
17954
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }, { propertyName: "mobileOffcanvas", first: true, predicate: ["mobileOffcanvas"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n [class.margin-bottom]=\"shouldReserveMobileHeaderSpace\">\n <div [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\"\n [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && !isScrolled && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [class.dropdown-open]=\"showList\">\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n <ng-container *ngIf=\"style?.headline?.display\">\n <div>\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"style?.countdown?.display\">\n <simpo-countdown-banner [data]=\"data?.content?.countdownBanner\" [edit]=\"false\" [delete]=\"false\"\n [isHeaderRenderer]=\"true\">\n </simpo-countdown-banner>\n </ng-container>\n\n <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n\n <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\n [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\n </div>\n\n <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">search</mat-icon>\n </div> -->\n\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n </div>\n\n <ng-container\n *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader() && data?.styles?.enableHeaderCarousel\">\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n </ng-container>\n </div>\n\n <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container> -->\n\n <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN && isFullScreenMenuOpen\">\n <ng-container *ngTemplateOutlet=\"fullScreenMenuTemplate\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.BOTTOM_STICKY && isMobile\">\n <ng-container *ngTemplateOutlet=\"bottomStickyNavTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </div>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header2Template>\n <div class=\"header1\">\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header3Template>\n <div class=\"header1\">\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </ng-container>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header4Template>\n <div class=\"header1\">\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container> </ng-container>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b>{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \n ((content?.logo?.size >= 60 && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\n [class.w-75]=\"screenWidth < 475\" loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"\n (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n <ng-container *ngIf=\"screenWidth > 475; else pageLinksDefault\">\n <div class=\"dropdown_menu_static w-100\"\n (mouseleave)=\"showList = false; selectedCategory = null; openSubmenuChild = null\">\n <div class=\"dd-nav-scroll\">\n <div class=\"dd-nav\">\n <ng-container *ngFor=\"let item of footerMenu\">\n <ng-container *ngIf=\"item.showHeader\">\n <div class=\"dd-tab-wrap\">\n <button type=\"button\" class=\"dd-tab\"\n [class.dd-tab-active]=\"showList && selectedCategory === item?.children\"\n (click)=\"item?.children?.length ? toggleChildMenu(item, $event) : redirectionsOfMenu(item)\">\n <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"simpoColor\">{{item?.label | titlecase}}</span>\n <svg *ngIf=\"item?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\n fill=\"#000000\" />\n </svg>\n </button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\n\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n style=\"display: block;\">\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-template #pageLinksDefault>\n <div class=\"drawer-rows\">\n <ng-container *ngFor=\"let item of footerMenu\">\n <ng-container *ngIf=\"item.showHeader\">\n <div class=\"drawer-row\" (click)=\"redirectionsOfMenu(item)\" data-bs-dismiss=\"offcanvas\">\n <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n <mat-icon class=\"drawer-row-chevron\" *ngIf=\"item?.children?.length\"\n [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n\n </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <div class=\"d-flex\">\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n <div *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"navigateLogin()\" *ngIf=\"(passbookAppStatus || appointmentAppStatus) && !loggedIn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\">\n <mat-icon>person_outline</mat-icon>\n Login\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn && !isMobile\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\" [style.color]=\"accentColor\"\n (click)=\"goToAccount('LOGIN')\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n <path\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n </svg>\n &nbsp;\n Login</button>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && loggedIn\" [style.color]=\"accentColor\"\n (click)=\"goToAccount('PROFILE')\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n <path\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n </svg>\n &nbsp;Account</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\n <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\n <div class=\"item-count fw-bold\">\n {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\n <!-- Total : \u20B9{{ getCartTotalAmount }} -->\n </div>\n <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\n View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\n </div>\n </div>\n\n </div>\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"icons\" (click)=\"goToHome()\">\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n <span [simpoColor]=\"simpoColor\">Home</span>\n </div>\n <div class=\"icons\" (click)=\"searchProducts()\">\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n <span [simpoColor]=\"simpoColor\">Shop</span>\n </div>\n <div class=\"icons\" (click)=\"goToWishlist()\">\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</div>\n </div>\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n <span [simpoColor]=\"simpoColor\">Cart</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n </div> -->\n <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <!-- <span class=\"animated-placeholder position-absolute\" \n [class.animate]=\"animatePlaceholder\"\n *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\n {{ currentPlaceholder }}\n </span> -->\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n </div>\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n height=\"30\" version=\"1.1\">\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n </g>\n </svg>\n <div [style.color]=\"accentColor\">Schemes</div>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-center\">\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n Pincode\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n getPincode}}</div>\n\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getWishlistItemsCount}}</div>\n </div>\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getCartItemsCount}}</div>\n </div>\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n </div>\n <!-- (mouseleave)=\"showLogin = false\" -->\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n <!-- <div> -->\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n <!-- </div> -->\n </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | uppercase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\">\n <div #mobileOffcanvas class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n data-bs-backdrop=\"false\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n\n <!-- TOP BAR -->\n <div class=\"drawer-topbar\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"drawer-logo\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n </div>\n <button type=\"button\" class=\"drawer-close-btn\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close menu\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n </div>\n\n <!-- BODY -->\n <div class=\"offcanvas-body drawer-body\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"mobileMenuListTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n\n <!-- DIVIDER + QUICK ACTIONS -->\n <div class=\"drawer-footer\" *ngIf=\"action?.display && action?.buttons?.length\">\n <div class=\"drawer-divider\" [style.background]=\"accentColor\"></div>\n <div class=\"drawer-actions\">\n <div class=\"drawer-action\" *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n\n<ng-template #ecomProfileTemplate>\n <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\n\n\n <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\n\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b>{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n <div class=\"categories-wrapper\" *ngIf=\"!isMobile\" (mouseleave)=\"showList = false; showCollections = false\">\n\n <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\n\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\n [style.background]=\"data?.styles?.background?.color\">\n\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.background?.color\"\n (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\n {{ele?.label}}\n </div>\n </div>\n\n <!-- [class.hide-dropdown]=\"!showList\" -->\n <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\n <div class=\"row w-100 h-100 mega-menu-scroll-row\">\n <ng-container *ngFor=\"let ele of selectedCategory; let i = index; let last = last\">\n <div class=\"mega-menu-scroll-col\" [ngClass]=\"[\n ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES') ? 'col-3' : 'col-2',\n ele?.children?.length > 0 && !last ? 'has-right-border' : ''\n ]\">\n\n <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES' )\">\n <div class=\"mobile-submenu-card mb-3\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"ele.imageUrl\">\n <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"mobile-submenu-image collectionImage\" />\n <div class=\"mobile-submenu-caption\">{{ele?.label | uppercase}}</div>\n </div>\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"!ele.imageUrl\">\n {{ele?.label | titlecase}}\n </div>\n </ng-container>\n\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\"\n *ngIf=\"ele?.children?.length > 0\">\n {{ele?.label | titlecase}}\n </div>\n <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let child of ele?.children\">\n <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer d-flex align-items-center gap-2\">\n <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\"\n class=\"mega-menu-child-logo\" />\n <div>\n <div>{{child?.label | titlecase}}</div>\n <div *ngIf=\"child?.description\" class=\"mega-menu-child-desc\">{{child?.description}}</div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #mobileMenuListTemplate>\n <div class=\"mobile-menu-container\">\n\n <div class=\"drawer-rows\" *ngIf=\"!selectedMobileMenu\">\n <div class=\"drawer-row\" *ngFor=\"let ele of megaMenu\"\n (click)=\"ele?.children?.length ? selectMobileMenu(ele) : redirectionsOfMenu(ele)\"\n [attr.data-bs-dismiss]=\"ele?.children?.length ? null : 'offcanvas'\">\n <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ ele?.label | titlecase }}</span>\n <mat-icon class=\"drawer-row-chevron\" *ngIf=\"ele?.children?.length\"\n [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n </div>\n </div>\n\n <div class=\"drawer-detail\" *ngIf=\"selectedMobileMenu\">\n <div class=\"drawer-detail-back\" (click)=\"goBackMobileMenu()\">\n <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n <span [simpoColor]=\"simpoColor\">{{selectedMobileMenu?.label | titlecase}}</span>\n </div>\n\n <div class=\"drawer-detail-sections\">\n <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n <div class=\"drawer-detail-section\">\n <ng-container\n *ngIf=\"child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' )\">\n <div class=\"mobile-submenu-card\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\"\n *ngIf=\"child.imageUrl\">\n <img [src]=\"child.imageUrl\" [alt]=\"child?.label\" class=\"mobile-submenu-image collectionImage\" />\n <div class=\"mobile-submenu-caption\">{{child?.label | uppercase}}</div>\n </div>\n </ng-container>\n\n <ng-container\n *ngIf=\"!(child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' ) && child.imageUrl)\">\n <div class=\"drawer-row drawer-row--sub\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\">\n <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\" class=\"mega-menu-child-logo\" />\n <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n </div>\n\n <div class=\"drawer-detail-grid\" *ngIf=\"child?.children?.length\">\n <div class=\"drawer-chip\" *ngFor=\"let sub of child?.children\" (click)=\"redirectionsOfMenu(sub)\"\n data-bs-dismiss=\"offcanvas\">\n {{sub?.label | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\n <img [src]=\"ele?.imageUrls[0]\" [alt]=\"ele?.categoryName\" class=\"br-12 mobile-category-image\">\n </div>\n <div class=\"text-center category-name\">{{ele?.categoryName}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerce_header>\n <header class=\"site-header\" [ngClass]=\"{\n 'ecom-header1': style?.styling === 'Header1',\n 'ecom-header2': style?.styling === 'Header2',\n 'ecom-header3': style?.styling === 'Header3',\n 'ecom-header4': style?.styling === 'Header4'\n }\">\n <!-- Top Bar: Logo, Search, User Actions -->\n <div class=\"top-bar\">\n\n <!-- Mobile Menu Toggle -->\n <div class=\"header-logo-area\" [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\n <!-- HAMBURGER -->\n <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\" for=\"mobile-menu-checkbox\"\n class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" aria-label=\"Toggle menu\" (click)=\"goBackMobileMenu()\">\n <svg *ngIf=\"!isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n </svg>\n <svg *ngIf=\"isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"></line>\n </svg>\n </label>\n <!-- FULL SCREEN -->\n <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\" class=\"mobile-menu-btn\"\n aria-label=\"Toggle menu\" (click)=\"openFullScreenMenu()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n </svg>\n </label>\n\n <!-- Logo Section -->\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\n <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size + 15\"\n [height]=\"content?.logo?.size\">\n </a>\n\n <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n && content?.logo?.text?.isText \n && content?.logo?.text?.isIcon \n && content?.logo?.text?.url\">\n\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\n [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\n\n <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\n {{ content?.siteName?.value }}\n </span>\n </a>\n\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n && content?.logo?.text?.isText \n && !content?.logo?.text?.isIcon\">\n\n <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\n {{ content?.siteName?.value }}\n </span>\n </a>\n </div>\n\n <!-- Search Bar -->\n <div class=\"search-wrapper\"\n *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\n <div class=\"search-bar\">\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </div>\n </div>\n\n <!-- Dropdown menu style -->\n <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\n (mouseleave)=\"showList = false; selectedCategory = null\">\n <div class=\"dd-nav-scroll\">\n <div class=\"dd-nav\">\n <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\">\n <button type=\"button\" class=\"dd-tab\"\n [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\n (click)=\"ele?.children?.length ? toggleChildMenu(ele, $event) : redirectionsOfMenu(ele)\">\n <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"simpoColor\">{{ele?.label | titlecase}}</span>\n <svg *ngIf=\"ele?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\n fill=\"#000000\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\n\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n style=\"display: block;\">\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n <!-- Right Actions -->\n <div class=\"user-actions\">\n\n <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\n <a class=\"action-link icon-only dropdown-search-toggle\"\n (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\" aria-label=\"Toggle search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"storeAvaiable\">\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n *ngIf=\"!getPincode\">\n <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <path\n d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\n fill=\"#000000\" />\n </svg> -->\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\n <g>\n <path\n d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\n </path>\n <path\n d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\n </path>\n </g>\n </svg>\n\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\n\n </a>\n\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\n <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\n <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\n <path d=\"M2 7h20\"></path>\n <path\n d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\n </path>\n </svg>\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\n getPincode}}</span>\n\n </a>\n\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n </ng-container>\n\n <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\n (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\n <!-- User Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n </svg>\n </a>\n\n <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\n <!-- User Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n </svg>\n </a>\n\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n\n <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\n <!-- Heart Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path\n d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\n </path>\n </svg>\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</span>\n </a>\n\n <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\n <!-- Shopping Bag Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\n <path d=\"M3 6h18\"></path>\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n </svg>\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\n </a>\n\n <a class=\"action-link icon-only icon-container bookings-icon\" (click)=\"goToBookings()\">\n <!-- Bookings (calendar-check) Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"4\" y=\"7.5\" width=\"16\" height=\"12.5\" rx=\"2\"></rect>\n <path d=\"M8 7.5V6a4 4 0 0 1 8 0v1.5\"></path>\n <path d=\"M9.2 13.6l1.9 1.9 3.7-3.9\"></path>\n </svg>\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getBookingItemsCount\">{{getBookingItemsCount}}</span>\n </a>\n\n <div class=\"dropdown-search-expand\"\n *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\n <div class=\"dropdown-search-box\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"dropdown-search-icon search-btn\" (click)=\"searchProducts()\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\"\n (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\n <div class=\"search-bar\">\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </div>\n </div>\n\n </header>\n</ng-template>\n\n<ng-template #fullScreenMenuTemplate>\n <div class=\"fs-menu\">\n <div class=\"fs-menu-bg\" [simpoBackground]=\"backgroundInfo\"></div>\n <div class=\"fs-menu-inner\">\n <div class=\"fs-menu-head\">\n <div class=\"fs-menu-logo\" (click)=\"closeFullScreenMenu()\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n </div>\n <button class=\"fs-menu-close\" (click)=\"closeFullScreenMenu()\" aria-label=\"Close menu\">\n <mat-icon [simpoColor]=\"simpoColor\">close</mat-icon>\n </button>\n </div>\n <!-- Main level -->\n <nav class=\"fs-menu-nav\" *ngIf=\"!selectedMobileMenu\">\n <ng-container *ngFor=\"let item of footerMenu\">\n <ng-container *ngIf=\"item.showHeader\">\n <a class=\"fs-menu-link\" [class.active]=\"isNavItemActive(item)\" [style.--accent]=\"accentColor\"\n (click)=\"onFullScreenItemClick(item)\">\n <span class=\"fs-menu-dot\" [style.background]=\"accentColor\"></span>\n <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n <mat-icon class=\"fs-menu-arrow\" *ngIf=\"item?.children?.length\"\n [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n </a>\n </ng-container>\n </ng-container>\n </nav>\n\n <!-- Submenu (drill-in) level -->\n <nav class=\"fs-menu-nav fs-menu-sub\" *ngIf=\"selectedMobileMenu\">\n <button class=\"fs-menu-back\" (click)=\"goBackMobileMenu()\">\n <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n <span [simpoColor]=\"simpoColor\">{{ selectedMobileMenu?.label | titlecase }}</span>\n </button>\n <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n <a class=\"fs-menu-link\" [style.--accent]=\"accentColor\"\n (click)=\"redirectionsOfMenu(child); closeFullScreenMenu()\">\n <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n </a>\n <a class=\"fs-menu-sublink\" *ngFor=\"let sub of child?.children\" [simpoColor]=\"simpoColor\"\n (click)=\"redirectionsOfMenu(sub); closeFullScreenMenu()\">{{ sub?.label | titlecase }}</a>\n </ng-container>\n </nav>\n <div class=\"fs-menu-cta\" *ngIf=\"action?.display && action?.buttons?.length\">\n <ng-container *ngFor=\"let button of action?.buttons | slice:0:1\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #bottomStickyNavTemplate>\n <nav class=\"bs-nav\">\n <div class=\"bs-nav-bar\" [simpoBackground]=\"backgroundInfo\">\n <button class=\"bs-tab\" *ngFor=\"let item of bottomStickyNavItems; let i = index\"\n [class.active]=\"i === activeBottomNavIndex\" (click)=\"redirectionsOfMenu(item)\">\n <span class=\"bs-tab-label\" [style.color]=\"i === activeBottomNavIndex ? accentColor : null\"\n [simpoColor]=\"i === activeBottomNavIndex ? null : simpoColor\">{{ item?.label | titlecase }}</span>\n </button>\n </div>\n </nav>\n</ng-template>", styles: [".total-container div[simpoSticky]:not(.header--scrolled){top:0!important;left:0!important;right:0!important;margin:0 auto!important;width:100%!important}.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:20%!important;right:20%!important;width:60%!important;overflow:hidden!important;border-radius:60px!important;box-shadow:0 10px 40px #0000001f!important;z-index:1000001!important;transition:width .4s cubic-bezier(.16,1,.3,1)}.total-container div[simpoSticky].header--scrolled.dropdown-open,.header--scrolled.dropdown-open{overflow:visible!important}@media screen and (max-width: 475px){.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:5%!important;right:5%!important;width:90%!important}}.simpo-transparent-type{transition:background-color .3s ease!important}@keyframes simpo-slide-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.simpo-sticky-revealed{animation:simpo-slide-down .3s cubic-bezier(.16,1,.3,1) forwards;box-shadow:0 2px 12px #0000001f}.w-40{width:40%!important}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.category-name{text-transform:uppercase;white-space:normal;word-break:break-word;line-height:1.2;font-size:11px;letter-spacing:.4px;text-align:center;max-width:90px}.margin-bottom{margin-bottom:var(--margin-top, 0px)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top, 0px)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important;width:100%;max-width:100%;overflow-x:visible;overflow-y:visible}.page-links-nav{flex-direction:column;align-items:flex-start;padding-bottom:0;margin-bottom:0;overflow-x:visible}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#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;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.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:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}.pageLinks{width:100%!important;max-width:100%!important}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:75%;z-index:1000000000}@media screen and (max-width: 475px){.offcanvas{top:0!important;height:100vh!important;height:100dvh!important;width:100%;display:flex;flex-direction:column}.offcanvas-body{flex:1 1 auto;height:auto}.offcanvas-footer{height:auto}}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.mobileLoginButton{width:100%;height:40px;border-radius:8px;outline:none;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.pageLinks{display:flex;flex-direction:row;width:50%;max-width:50%;overflow:visible}.pageLinks .dropdown-menu{z-index:1010}.page-links-nav{display:flex;align-items:center;gap:15px;width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;padding-bottom:220px;margin-bottom:-220px;scrollbar-width:none}.page-links-nav::-webkit-scrollbar{display:none}.category-btn{font-size:16px!important}.h-70{height:70px}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:auto;max-height:50vh;overflow-y:auto;position:absolute;width:100%;z-index:1001}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.dropdown_menu_static{position:relative}.dropdown_menu{position:relative;width:55%;max-width:55%;min-width:420px;display:flex;justify-content:center;margin:0 auto}.dropdown_menu_static .dropdown_menu{position:relative;min-width:420px;max-width:55%;display:flex;justify-content:center}.dd-nav-scroll{width:100%;overflow-x:auto;overflow-y:visible;scrollbar-width:none}.dd-nav-scroll::-webkit-scrollbar{display:none}.dd-nav{display:inline-flex;align-items:flex-start;gap:18px;flex-wrap:nowrap;padding-top:5px;pointer-events:auto}.dd-tab-wrap{position:relative;display:inline-flex;pointer-events:auto}.dd-tab{border:none;background:transparent;padding:6px 2px;font-size:15px;font-weight:500;color:#30343b;line-height:1;border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:8px}.dd-tab:hover,.dd-tab.dd-tab-active{border-bottom-color:#2f3338}.dd-panel{position:absolute;top:100%;left:0;background:#fff;border:1px solid #ececef;padding:14px 0;z-index:1006;min-width:220px}.dd-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;font-size:16px;color:#2c2f35;transition:background-color .2s ease;cursor:pointer}.dd-item:hover{background-color:#f5f6f8}.dd-item-arrow{font-size:20px;line-height:1;color:#5a5f66}.dd-submenu{position:absolute;top:-10px;left:calc(100% + 3px);background:#fff;border:1px solid #ececef;box-shadow:0 10px 26px #1d212926;padding:10px 0;display:none;z-index:1007}.dd-item:hover .dd-submenu{display:block}.dd-sub-item{padding:10px 16px;font-size:15px;color:#2c2f35;transition:background-color .2s ease}.dd-sub-item:hover{background-color:#f5f6f8}.dropdown-search-toggle{cursor:pointer}.dropdown-search-expand{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;z-index:1010}.dropdown-search-box{width:100%;background:#f3f3f3;border:1px solid #e7e7e7;display:flex;align-items:center;gap:12px;padding:10px 14px}.dropdown-search-icon{color:#1f2328;flex:0 0 auto}.dropdown-search-box input{border:none;background:transparent;width:100%;font-size:14px;color:#2f3338;outline:none}.dropdown-search-close{color:#545861;cursor:pointer;flex:0 0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-btn{cursor:pointer;flex-shrink:0}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;padding:0 8px;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:100}.categories-wrapper .categories-header{border-top:1px solid rgba(0,0,0,.1)}.categories-header{gap:26px!important;overflow-x:auto;margin:8px 8px 0;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top, 0px);left:0;width:100vw;height:calc(100vh - var(--margin-top, 0px));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:auto;max-height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow-x:hidden;overflow-y:auto}.mega-menu-scroll-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.mega-menu-scroll-col{flex-shrink:0}.mega-menu-scroll-col.has-right-border{border-right:1px solid #e9e7e7}.collectionImage{border-radius:10px;height:70%!important}@media screen and (min-width: 476px){.list-category .mobile-submenu-card{aspect-ratio:4 / 3;overflow:hidden}.list-category .mobile-submenu-image.collectionImage{width:100%;height:100%!important;object-fit:cover;display:block}}.list-item>div{color:#585858}.list-item>div:hover{color:#000}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px;height:auto;max-height:36vh;overflow-y:auto}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}.mobile-menu-container{height:100%;overflow-y:auto}.mobile-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mobile-menu-item{display:flex;align-items:center;justify-content:space-between;background:#f5f5f5;border-radius:8px;padding:14px;cursor:pointer;transition:background-color .2s ease}.mobile-menu-item:active{background:#ebebeb}.mobile-menu-label{font-size:11px;letter-spacing:.5px;color:#1a1a1a;line-height:1.3}.mobile-menu-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#999;flex-shrink:0}.mobile-menu-detail{padding:0}.mobile-menu-back{display:flex;align-items:center;gap:4px;padding:14px 0;cursor:pointer;font-size:16px;color:#1a1a1a}.mobile-menu-back mat-icon{font-size:22px!important;width:22px!important;height:22px!important;color:#1a1a1a!important}.mobile-submenu-sections{overflow-y:auto}.mobile-submenu-section{margin-bottom:20px}.mobile-submenu-card{position:relative;border-radius:12px;overflow:hidden;cursor:pointer}.mobile-submenu-image{display:block;width:100%;height:auto!important}.mobile-submenu-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:14px;font-weight:700;letter-spacing:.6px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5);background:linear-gradient(180deg,#0000,#0009)}.mobile-submenu-header{font-size:14px;font-weight:700;letter-spacing:.5px;color:#1a1a1a;margin-bottom:12px;cursor:pointer}.mobile-submenu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mobile-submenu-item{background:#f5f5f5;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:400;color:#333;cursor:pointer;text-align:center;transition:background-color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-submenu-item:active{background:#ebebeb}.mobile-category-image{border-radius:50%;height:11vh;width:11vh;object-fit:cover}.drawer-topbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.06);flex:0 0 auto}.drawer-logo{flex:1 1 auto;display:flex;justify-content:flex-start;align-items:center;max-height:38px;overflow:hidden}.drawer-logo img{max-height:38px;width:auto}.drawer-close-btn{position:absolute;top:8px;right:8px;z-index:3;flex:none;background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 8px #00000024;cursor:pointer;width:30px!important;min-width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .18s ease}.drawer-close-btn:active{background:#0000000f}.drawer-close-btn mat-icon{color:#1a1a1a;font-size:22px;height:22px;width:22px}.drawer-body{flex:1 1 auto;overflow-y:auto;padding:4px 8px 8px}.drawer-rows{display:flex;flex-direction:column}.drawer-row{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:12px;cursor:pointer;transition:background-color .18s ease}.drawer-row:active,.drawer-row:hover{background:#0000000b}.drawer-row+.drawer-row{border-top:1px solid rgba(0,0,0,.05)}.drawer-row-icon{font-size:22px;height:22px;width:22px;flex:0 0 auto}.drawer-row-label{flex:1 1 auto;font-size:15px;font-weight:500;line-height:1.2}.drawer-row-chevron{font-size:20px;height:20px;width:20px;flex:0 0 auto;opacity:.55}.drawer-row--sub .drawer-row-label{font-weight:600}.drawer-detail{padding:4px 4px 8px}.drawer-detail-back{display:flex;align-items:center;gap:6px;padding:10px 8px;cursor:pointer;font-size:16px;font-weight:600}.drawer-detail-back mat-icon{font-size:24px;height:24px;width:24px}.drawer-detail-section{margin-bottom:18px}.drawer-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:6px 12px 0}.drawer-chip{background:#0000000a;border-radius:10px;padding:10px 12px;font-size:13px;color:#333;text-align:center;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .18s ease}.drawer-chip:active{background:#00000014}.drawer-footer{flex:0 0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}.drawer-divider{height:1px;width:100%;opacity:.35;margin-bottom:14px}.drawer-actions{display:flex;flex-direction:column;gap:10px}.drawer-action,.drawer-action app-button-element,.drawer-action .button{width:100%}.drawer-action .button{justify-content:center}.fs-menu{position:fixed;inset:0;z-index:1000000;display:grid;grid-template-areas:\"stack\";overflow:hidden;animation:fsMenuFade .28s cubic-bezier(.16,1,.3,1) both}.fs-menu-bg{grid-area:stack;width:100%;height:100%;z-index:0}.fs-menu-inner{grid-area:stack;position:relative;z-index:1;display:flex;flex-direction:column;max-width:560px;margin:0 auto;width:100%;height:100%;min-height:0;padding:18px 24px calc(18px + env(safe-area-inset-bottom));overflow:hidden}.fs-menu-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-bottom:10px}.fs-menu-logo{display:flex;align-items:center;max-height:44px;overflow:hidden;cursor:pointer}.fs-menu-logo img{max-height:42px;width:auto!important}@keyframes fsMenuFade{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}.fs-menu-close{flex:none;width:40px!important;min-width:40px;height:40px;border-radius:50%;background:#7f7f7f24;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .2s ease}.fs-menu-close:hover{background:#7f7f7f3d}.fs-menu-close mat-icon{font-size:24px;height:24px;width:24px}.fs-menu-nav{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;margin-bottom:16px}.fs-menu-link{position:relative;display:flex;align-items:center;gap:12px;padding:13px 4px;cursor:pointer;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent, #888) 10%,transparent);animation:fsLinkIn .45s cubic-bezier(.16,1,.3,1) both}.fs-menu-link:nth-child(1){animation-delay:.05s}.fs-menu-link:nth-child(2){animation-delay:.1s}.fs-menu-link:nth-child(3){animation-delay:.15s}.fs-menu-link:nth-child(4){animation-delay:.2s}.fs-menu-link:nth-child(5){animation-delay:.25s}.fs-menu-link:nth-child(6){animation-delay:.3s}@keyframes fsLinkIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.fs-menu-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .2s ease}.fs-menu-link:hover .fs-menu-dot,.fs-menu-link.active .fs-menu-dot{opacity:1;transform:scale(1)}.fs-menu-text{font-size:clamp(1rem,5vw,1.6rem);font-weight:600;letter-spacing:-.3px;line-height:1.1;transition:transform .2s ease,opacity .2s ease}.fs-menu-link:hover .fs-menu-text{transform:translate(6px);opacity:.85}.fs-menu-arrow{margin-left:auto;flex:0 0 auto;font-size:22px;height:22px;width:22px;opacity:.55}.fs-menu-back{display:flex;align-items:center;gap:6px;background:transparent;border:none;cursor:pointer;padding:6px 0 14px;width:auto!important;font-size:15px;font-weight:600;opacity:.85}.fs-menu-back mat-icon{font-size:26px;height:26px;width:26px}.fs-menu-sublink{display:block;padding:9px 4px 9px 18px;font-size:1rem;font-weight:400;text-decoration:none;cursor:pointer;opacity:.78;border-bottom:1px solid color-mix(in srgb,var(--accent, #888) 16%,transparent);transition:opacity .2s ease,transform .2s ease}.fs-menu-sublink:hover{opacity:1;transform:translate(5px)}.fs-menu-cta{flex:0 0 auto;padding-top:4px}.fs-menu-cta app-button-element,.fs-menu-cta .button{width:100%;justify-content:center}.bs-nav{position:fixed;left:0;right:0;bottom:0;z-index:10001;pointer-events:none}.bs-nav-bar{pointer-events:auto;display:flex;align-items:stretch;justify-content:space-around;height:64px;padding-bottom:env(safe-area-inset-bottom);border-radius:18px 18px 0 0;box-shadow:0 -4px 20px #0000001f}.bs-tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent;border:none;cursor:pointer;padding:8px 4px;transition:transform .15s ease}.bs-tab:active{transform:translateY(1px)}.bs-tab-icon{font-size:23px;height:23px;width:23px;transition:color .2s ease}.bs-tab-label{font-size:10.5px;font-weight:500;letter-spacing:.2px;line-height:1;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}.bs-tab.active .bs-tab-label{font-weight:700}@media screen and (max-width: 475px){body{padding-bottom:var(--bottom-nav-height, 0px)}}@media (min-width: 476px){.site-header.ecom-header2 .top-bar,.site-header.ecom-header4 .top-bar{flex-direction:row-reverse}}.mega-menu-child-logo{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}.mega-menu-child-desc{font-size:11px;color:#999;margin-top:2px;line-height:1.3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { 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", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.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", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"], outputs: ["stickyScrolled"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }, { kind: "component", type: CountdownBannerComponent, selector: "simpo-countdown-banner", inputs: ["edit", "data", "customClass", "nextComponentColor", "index", "delete", "isHeaderRenderer"] }] }); }
17982
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }, { propertyName: "mobileOffcanvas", first: true, predicate: ["mobileOffcanvas"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n [class.margin-bottom]=\"shouldReserveMobileHeaderSpace\">\n <div [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\"\n [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && !isScrolled && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [class.dropdown-open]=\"showList\">\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n <ng-container *ngIf=\"style?.headline?.display\">\n <div>\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"style?.countdown?.display\">\n <simpo-countdown-banner [data]=\"data?.content?.countdownBanner\" [edit]=\"false\" [delete]=\"false\"\n [isHeaderRenderer]=\"true\">\n </simpo-countdown-banner>\n </ng-container>\n\n <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n\n <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\n [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\n </div>\n\n <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">search</mat-icon>\n </div> -->\n\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n </div>\n\n <ng-container\n *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader() && data?.styles?.enableHeaderCarousel\">\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n </ng-container>\n </div>\n\n <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container> -->\n\n <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN && isFullScreenMenuOpen\">\n <ng-container *ngTemplateOutlet=\"fullScreenMenuTemplate\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.BOTTOM_STICKY && isMobile\">\n <ng-container *ngTemplateOutlet=\"bottomStickyNavTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </div>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header2Template>\n <div class=\"header1\">\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header3Template>\n <div class=\"header1\">\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </ng-container>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header4Template>\n <div class=\"header1\">\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container> </ng-container>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b>{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \n ((content?.logo?.size >= 60 && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\n [class.w-75]=\"screenWidth < 475\" loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"\n (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n <ng-container *ngIf=\"screenWidth > 475; else pageLinksDefault\">\n <div class=\"dropdown_menu_static w-100\"\n (mouseleave)=\"showList = false; selectedCategory = null; openSubmenuChild = null\">\n <div class=\"dd-nav-scroll\">\n <div class=\"dd-nav\">\n <ng-container *ngFor=\"let item of footerMenu\">\n <ng-container *ngIf=\"item.showHeader\">\n <div class=\"dd-tab-wrap\">\n <button type=\"button\" class=\"dd-tab\"\n [class.dd-tab-active]=\"showList && selectedCategory === item?.children\"\n (click)=\"item?.children?.length ? toggleChildMenu(item, $event) : redirectionsOfMenu(item)\">\n <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"simpoColor\">{{item?.label | titlecase}}</span>\n <svg *ngIf=\"item?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\n fill=\"#000000\" />\n </svg>\n </button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\n\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n style=\"display: block;\">\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-template #pageLinksDefault>\n <div class=\"drawer-rows\">\n <ng-container *ngFor=\"let item of footerMenu\">\n <ng-container *ngIf=\"item.showHeader\">\n <div class=\"drawer-row\" (click)=\"redirectionsOfMenu(item)\" data-bs-dismiss=\"offcanvas\">\n <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n <mat-icon class=\"drawer-row-chevron\" *ngIf=\"item?.children?.length\"\n [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n\n </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <div class=\"d-flex\">\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n <div *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"navigateLogin()\" *ngIf=\"(passbookAppStatus || appointmentAppStatus) && !loggedIn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\">\n <mat-icon>person_outline</mat-icon>\n Login\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn && !isMobile\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\" [style.color]=\"accentColor\"\n (click)=\"goToAccount('LOGIN')\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n <path\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n </svg>\n &nbsp;\n Login</button>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && loggedIn\" [style.color]=\"accentColor\"\n (click)=\"goToAccount('PROFILE')\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n <path\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n </svg>\n &nbsp;Account</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\n <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\n <div class=\"item-count fw-bold\">\n {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\n <!-- Total : \u20B9{{ getCartTotalAmount }} -->\n </div>\n <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\n View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\n </div>\n </div>\n\n </div>\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"icons\" (click)=\"goToHome()\">\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n <span [simpoColor]=\"simpoColor\">Home</span>\n </div>\n <div class=\"icons\" (click)=\"searchProducts()\">\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n <span [simpoColor]=\"simpoColor\">Shop</span>\n </div>\n <div class=\"icons\" (click)=\"goToWishlist()\">\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</div>\n </div>\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n <span [simpoColor]=\"simpoColor\">Cart</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n </div> -->\n <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <!-- <span class=\"animated-placeholder position-absolute\" \n [class.animate]=\"animatePlaceholder\"\n *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\n {{ currentPlaceholder }}\n </span> -->\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n </div>\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n height=\"30\" version=\"1.1\">\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n </g>\n </svg>\n <div [style.color]=\"accentColor\">Schemes</div>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-center\">\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n Pincode\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n getPincode}}</div>\n\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getWishlistItemsCount}}</div>\n </div>\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getCartItemsCount}}</div>\n </div>\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n </div>\n <!-- (mouseleave)=\"showLogin = false\" -->\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n <!-- <div> -->\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n <!-- </div> -->\n </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | uppercase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\">\n <div #mobileOffcanvas class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n data-bs-backdrop=\"false\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n\n <!-- TOP BAR -->\n <div class=\"drawer-topbar\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"drawer-logo\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n </div>\n <button type=\"button\" class=\"drawer-close-btn\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close menu\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n </div>\n\n <!-- BODY -->\n <div class=\"offcanvas-body drawer-body\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"mobileMenuListTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n\n <!-- DIVIDER + QUICK ACTIONS -->\n <div class=\"drawer-footer\" *ngIf=\"action?.display && action?.buttons?.length\">\n <div class=\"drawer-divider\" [style.background]=\"accentColor\"></div>\n <div class=\"drawer-actions\">\n <div class=\"drawer-action\" *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n\n<ng-template #ecomProfileTemplate>\n <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\n\n\n <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\n\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b>{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n <div class=\"categories-wrapper\" *ngIf=\"!isMobile\" (mouseleave)=\"showList = false; showCollections = false\">\n\n <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\n\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\n [style.background]=\"data?.styles?.background?.color\">\n\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.background?.color\"\n (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\n {{ele?.label}}\n </div>\n </div>\n\n <!-- [class.hide-dropdown]=\"!showList\" -->\n <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\n <div class=\"row w-100 h-100 mega-menu-scroll-row\">\n <ng-container *ngFor=\"let ele of selectedCategory; let i = index; let last = last\">\n <div class=\"mega-menu-scroll-col\" [ngClass]=\"[\n ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES') ? 'col-3' : 'col-2',\n ele?.children?.length > 0 && !last ? 'has-right-border' : ''\n ]\">\n\n <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES' )\">\n <div class=\"mobile-submenu-card mb-3\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"ele.imageUrl\">\n <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"mobile-submenu-image collectionImage\" />\n <div class=\"mobile-submenu-caption\">{{ele?.label | uppercase}}</div>\n </div>\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"!ele.imageUrl\">\n {{ele?.label | titlecase}}\n </div>\n </ng-container>\n\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\"\n *ngIf=\"ele?.children?.length > 0\">\n {{ele?.label | titlecase}}\n </div>\n <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let child of ele?.children\">\n <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer d-flex align-items-center gap-2\">\n <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\"\n class=\"mega-menu-child-logo\" />\n <div>\n <div>{{child?.label | titlecase}}</div>\n <div *ngIf=\"child?.description\" class=\"mega-menu-child-desc\">{{child?.description}}</div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #mobileMenuListTemplate>\n <div class=\"mobile-menu-container\">\n\n <div class=\"drawer-rows\" *ngIf=\"!selectedMobileMenu\">\n <div class=\"drawer-row\" *ngFor=\"let ele of megaMenu\"\n (click)=\"ele?.children?.length ? selectMobileMenu(ele) : redirectionsOfMenu(ele)\"\n [attr.data-bs-dismiss]=\"ele?.children?.length ? null : 'offcanvas'\">\n <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ ele?.label | titlecase }}</span>\n <mat-icon class=\"drawer-row-chevron\" *ngIf=\"ele?.children?.length\"\n [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n </div>\n </div>\n\n <div class=\"drawer-detail\" *ngIf=\"selectedMobileMenu\">\n <div class=\"drawer-detail-back\" (click)=\"goBackMobileMenu()\">\n <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n <span [simpoColor]=\"simpoColor\">{{selectedMobileMenu?.label | titlecase}}</span>\n </div>\n\n <div class=\"drawer-detail-sections\">\n <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n <div class=\"drawer-detail-section\">\n <ng-container\n *ngIf=\"child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' )\">\n <div class=\"mobile-submenu-card\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\"\n *ngIf=\"child.imageUrl\">\n <img [src]=\"child.imageUrl\" [alt]=\"child?.label\" class=\"mobile-submenu-image collectionImage\" />\n <div class=\"mobile-submenu-caption\">{{child?.label | uppercase}}</div>\n </div>\n </ng-container>\n\n <ng-container\n *ngIf=\"!(child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' ) && child.imageUrl)\">\n <div class=\"drawer-row drawer-row--sub\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\">\n <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\" class=\"mega-menu-child-logo\" />\n <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n </div>\n\n <div class=\"drawer-detail-grid\" *ngIf=\"child?.children?.length\">\n <div class=\"drawer-chip\" *ngFor=\"let sub of child?.children\" (click)=\"redirectionsOfMenu(sub)\"\n data-bs-dismiss=\"offcanvas\">\n {{sub?.label | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\n <img [src]=\"ele?.imageUrls[0]\" [alt]=\"ele?.categoryName\" class=\"br-12 mobile-category-image\">\n </div>\n <div class=\"text-center category-name\">{{ele?.categoryName}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerce_header>\n <header class=\"site-header\" [ngClass]=\"{\n 'ecom-header1': style?.styling === 'Header1',\n 'ecom-header2': style?.styling === 'Header2',\n 'ecom-header3': style?.styling === 'Header3',\n 'ecom-header4': style?.styling === 'Header4'\n }\">\n <!-- Top Bar: Logo, Search, User Actions -->\n <div class=\"top-bar\">\n\n <!-- Mobile Menu Toggle -->\n <div class=\"header-logo-area\" [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\n <!-- HAMBURGER -->\n <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\" for=\"mobile-menu-checkbox\"\n class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" aria-label=\"Toggle menu\" (click)=\"goBackMobileMenu()\">\n <svg *ngIf=\"!isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n </svg>\n <svg *ngIf=\"isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"></line>\n </svg>\n </label>\n <!-- FULL SCREEN -->\n <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\" class=\"mobile-menu-btn\"\n aria-label=\"Toggle menu\" (click)=\"openFullScreenMenu()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n </svg>\n </label>\n\n <!-- Logo Section -->\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\n <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size + 15\"\n [height]=\"content?.logo?.size\">\n </a>\n\n <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n && content?.logo?.text?.isText \n && content?.logo?.text?.isIcon \n && content?.logo?.text?.url\">\n\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\n [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\n\n <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\n {{ content?.siteName?.value }}\n </span>\n </a>\n\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n && content?.logo?.text?.isText \n && !content?.logo?.text?.isIcon\">\n\n <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\n {{ content?.siteName?.value }}\n </span>\n </a>\n </div>\n\n <!-- Search Bar -->\n <div class=\"search-wrapper\"\n *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\n <div class=\"search-bar\">\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </div>\n </div>\n\n <!-- Dropdown menu style -->\n <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\n (mouseleave)=\"showList = false; selectedCategory = null\">\n <div class=\"dd-nav-scroll\">\n <div class=\"dd-nav\">\n <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\">\n <button type=\"button\" class=\"dd-tab\"\n [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\n (click)=\"ele?.children?.length ? toggleChildMenu(ele, $event) : redirectionsOfMenu(ele)\">\n <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"simpoColor\">{{ele?.label | titlecase}}</span>\n <svg *ngIf=\"ele?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\n fill=\"#000000\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\n\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n style=\"display: block;\">\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n <!-- Right Actions -->\n <div class=\"user-actions\">\n\n <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\n <a class=\"action-link icon-only dropdown-search-toggle\"\n (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\" aria-label=\"Toggle search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"storeAvaiable\">\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n *ngIf=\"!getPincode\">\n <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <path\n d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\n fill=\"#000000\" />\n </svg> -->\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\n <g>\n <path\n d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\n </path>\n <path\n d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\n </path>\n </g>\n </svg>\n\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\n\n </a>\n\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\n <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\n <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\n <path d=\"M2 7h20\"></path>\n <path\n d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\n </path>\n </svg>\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\n getPincode}}</span>\n\n </a>\n\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n </ng-container>\n\n <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\n (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\n <!-- User Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n </svg>\n </a>\n\n <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\n <!-- User Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n </svg>\n </a>\n\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n\n <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\n <!-- Heart Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path\n d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\n </path>\n </svg>\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</span>\n </a>\n\n <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\n <!-- Shopping Bag Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\n <path d=\"M3 6h18\"></path>\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n </svg>\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\n </a>\n\n <a class=\"action-link icon-only icon-container bookings-icon\" (click)=\"goToBookings()\"\n *ngIf=\"appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled\">\n <!-- Bookings (calendar-check) Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"4\" y=\"7.5\" width=\"16\" height=\"12.5\" rx=\"2\"></rect>\n <path d=\"M8 7.5V6a4 4 0 0 1 8 0v1.5\"></path>\n <path d=\"M9.2 13.6l1.9 1.9 3.7-3.9\"></path>\n </svg>\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getBookingItemsCount\">{{getBookingItemsCount}}</span>\n </a>\n\n <div class=\"dropdown-search-expand\"\n *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\n <div class=\"dropdown-search-box\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"dropdown-search-icon search-btn\" (click)=\"searchProducts()\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\"\n (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\n <div class=\"search-bar\">\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </div>\n </div>\n\n </header>\n</ng-template>\n\n<ng-template #fullScreenMenuTemplate>\n <div class=\"fs-menu\">\n <div class=\"fs-menu-bg\" [simpoBackground]=\"backgroundInfo\"></div>\n <div class=\"fs-menu-inner\">\n <div class=\"fs-menu-head\">\n <div class=\"fs-menu-logo\" (click)=\"closeFullScreenMenu()\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n </div>\n <button class=\"fs-menu-close\" (click)=\"closeFullScreenMenu()\" aria-label=\"Close menu\">\n <mat-icon [simpoColor]=\"simpoColor\">close</mat-icon>\n </button>\n </div>\n <!-- Main level -->\n <nav class=\"fs-menu-nav\" *ngIf=\"!selectedMobileMenu\">\n <ng-container *ngFor=\"let item of footerMenu\">\n <ng-container *ngIf=\"item.showHeader\">\n <a class=\"fs-menu-link\" [class.active]=\"isNavItemActive(item)\" [style.--accent]=\"accentColor\"\n (click)=\"onFullScreenItemClick(item)\">\n <span class=\"fs-menu-dot\" [style.background]=\"accentColor\"></span>\n <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n <mat-icon class=\"fs-menu-arrow\" *ngIf=\"item?.children?.length\"\n [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n </a>\n </ng-container>\n </ng-container>\n </nav>\n\n <!-- Submenu (drill-in) level -->\n <nav class=\"fs-menu-nav fs-menu-sub\" *ngIf=\"selectedMobileMenu\">\n <button class=\"fs-menu-back\" (click)=\"goBackMobileMenu()\">\n <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n <span [simpoColor]=\"simpoColor\">{{ selectedMobileMenu?.label | titlecase }}</span>\n </button>\n <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n <a class=\"fs-menu-link\" [style.--accent]=\"accentColor\"\n (click)=\"redirectionsOfMenu(child); closeFullScreenMenu()\">\n <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n </a>\n <a class=\"fs-menu-sublink\" *ngFor=\"let sub of child?.children\" [simpoColor]=\"simpoColor\"\n (click)=\"redirectionsOfMenu(sub); closeFullScreenMenu()\">{{ sub?.label | titlecase }}</a>\n </ng-container>\n </nav>\n <div class=\"fs-menu-cta\" *ngIf=\"action?.display && action?.buttons?.length\">\n <ng-container *ngFor=\"let button of action?.buttons | slice:0:1\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #bottomStickyNavTemplate>\n <nav class=\"bs-nav\">\n <div class=\"bs-nav-bar\" [simpoBackground]=\"backgroundInfo\">\n <button class=\"bs-tab\" *ngFor=\"let item of bottomStickyNavItems; let i = index\"\n [class.active]=\"i === activeBottomNavIndex\" (click)=\"redirectionsOfMenu(item)\">\n <span class=\"bs-tab-label\" [style.color]=\"i === activeBottomNavIndex ? accentColor : null\"\n [simpoColor]=\"i === activeBottomNavIndex ? null : simpoColor\">{{ item?.label | titlecase }}</span>\n </button>\n </div>\n </nav>\n</ng-template>", styles: [".total-container div[simpoSticky]:not(.header--scrolled){top:0!important;left:0!important;right:0!important;margin:0 auto!important;width:100%!important}.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:20%!important;right:20%!important;width:60%!important;overflow:hidden!important;border-radius:60px!important;box-shadow:0 10px 40px #0000001f!important;z-index:1000001!important;transition:width .4s cubic-bezier(.16,1,.3,1)}.total-container div[simpoSticky].header--scrolled.dropdown-open,.header--scrolled.dropdown-open{overflow:visible!important}@media screen and (max-width: 475px){.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:5%!important;right:5%!important;width:90%!important}}.simpo-transparent-type{transition:background-color .3s ease!important}@keyframes simpo-slide-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.simpo-sticky-revealed{animation:simpo-slide-down .3s cubic-bezier(.16,1,.3,1) forwards;box-shadow:0 2px 12px #0000001f}.w-40{width:40%!important}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.category-name{text-transform:uppercase;white-space:normal;word-break:break-word;line-height:1.2;font-size:11px;letter-spacing:.4px;text-align:center;max-width:90px}.margin-bottom{margin-bottom:var(--margin-top, 0px)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top, 0px)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important;width:100%;max-width:100%;overflow-x:visible;overflow-y:visible}.page-links-nav{flex-direction:column;align-items:flex-start;padding-bottom:0;margin-bottom:0;overflow-x:visible}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#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;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.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:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}.pageLinks{width:100%!important;max-width:100%!important}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:75%;z-index:1000000000}@media screen and (max-width: 475px){.offcanvas{top:0!important;height:100vh!important;height:100dvh!important;width:100%;display:flex;flex-direction:column}.offcanvas-body{flex:1 1 auto;height:auto}.offcanvas-footer{height:auto}}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.mobileLoginButton{width:100%;height:40px;border-radius:8px;outline:none;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.pageLinks{display:flex;flex-direction:row;width:50%;max-width:50%;overflow:visible}.pageLinks .dropdown-menu{z-index:1010}.page-links-nav{display:flex;align-items:center;gap:15px;width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;padding-bottom:220px;margin-bottom:-220px;scrollbar-width:none}.page-links-nav::-webkit-scrollbar{display:none}.category-btn{font-size:16px!important}.h-70{height:70px}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:auto;max-height:50vh;overflow-y:auto;position:absolute;width:100%;z-index:1001}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.dropdown_menu_static{position:relative}.dropdown_menu{position:relative;width:55%;max-width:55%;min-width:420px;display:flex;justify-content:center;margin:0 auto}.dropdown_menu_static .dropdown_menu{position:relative;min-width:420px;max-width:55%;display:flex;justify-content:center}.dd-nav-scroll{width:100%;overflow-x:auto;overflow-y:visible;scrollbar-width:none}.dd-nav-scroll::-webkit-scrollbar{display:none}.dd-nav{display:inline-flex;align-items:flex-start;gap:18px;flex-wrap:nowrap;padding-top:5px;pointer-events:auto}.dd-tab-wrap{position:relative;display:inline-flex;pointer-events:auto}.dd-tab{border:none;background:transparent;padding:6px 2px;font-size:15px;font-weight:500;color:#30343b;line-height:1;border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:8px}.dd-tab:hover,.dd-tab.dd-tab-active{border-bottom-color:#2f3338}.dd-panel{position:absolute;top:100%;left:0;background:#fff;border:1px solid #ececef;padding:14px 0;z-index:1006;min-width:220px}.dd-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;font-size:16px;color:#2c2f35;transition:background-color .2s ease;cursor:pointer}.dd-item:hover{background-color:#f5f6f8}.dd-item-arrow{font-size:20px;line-height:1;color:#5a5f66}.dd-submenu{position:absolute;top:-10px;left:calc(100% + 3px);background:#fff;border:1px solid #ececef;box-shadow:0 10px 26px #1d212926;padding:10px 0;display:none;z-index:1007}.dd-item:hover .dd-submenu{display:block}.dd-sub-item{padding:10px 16px;font-size:15px;color:#2c2f35;transition:background-color .2s ease}.dd-sub-item:hover{background-color:#f5f6f8}.dropdown-search-toggle{cursor:pointer}.dropdown-search-expand{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;z-index:1010}.dropdown-search-box{width:100%;background:#f3f3f3;border:1px solid #e7e7e7;display:flex;align-items:center;gap:12px;padding:10px 14px}.dropdown-search-icon{color:#1f2328;flex:0 0 auto}.dropdown-search-box input{border:none;background:transparent;width:100%;font-size:14px;color:#2f3338;outline:none}.dropdown-search-close{color:#545861;cursor:pointer;flex:0 0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-btn{cursor:pointer;flex-shrink:0}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;padding:0 8px;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:100}.categories-wrapper .categories-header{border-top:1px solid rgba(0,0,0,.1)}.categories-header{gap:26px!important;overflow-x:auto;margin:8px 8px 0;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top, 0px);left:0;width:100vw;height:calc(100vh - var(--margin-top, 0px));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:auto;max-height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow-x:hidden;overflow-y:auto}.mega-menu-scroll-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.mega-menu-scroll-col{flex-shrink:0}.mega-menu-scroll-col.has-right-border{border-right:1px solid #e9e7e7}.collectionImage{border-radius:10px;height:70%!important}@media screen and (min-width: 476px){.list-category .mobile-submenu-card{aspect-ratio:4 / 3;overflow:hidden}.list-category .mobile-submenu-image.collectionImage{width:100%;height:100%!important;object-fit:cover;display:block}}.list-item>div{color:#585858}.list-item>div:hover{color:#000}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px;height:auto;max-height:36vh;overflow-y:auto}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}.mobile-menu-container{height:100%;overflow-y:auto}.mobile-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mobile-menu-item{display:flex;align-items:center;justify-content:space-between;background:#f5f5f5;border-radius:8px;padding:14px;cursor:pointer;transition:background-color .2s ease}.mobile-menu-item:active{background:#ebebeb}.mobile-menu-label{font-size:11px;letter-spacing:.5px;color:#1a1a1a;line-height:1.3}.mobile-menu-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#999;flex-shrink:0}.mobile-menu-detail{padding:0}.mobile-menu-back{display:flex;align-items:center;gap:4px;padding:14px 0;cursor:pointer;font-size:16px;color:#1a1a1a}.mobile-menu-back mat-icon{font-size:22px!important;width:22px!important;height:22px!important;color:#1a1a1a!important}.mobile-submenu-sections{overflow-y:auto}.mobile-submenu-section{margin-bottom:20px}.mobile-submenu-card{position:relative;border-radius:12px;overflow:hidden;cursor:pointer}.mobile-submenu-image{display:block;width:100%;height:auto!important}.mobile-submenu-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:14px;font-weight:700;letter-spacing:.6px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5);background:linear-gradient(180deg,#0000,#0009)}.mobile-submenu-header{font-size:14px;font-weight:700;letter-spacing:.5px;color:#1a1a1a;margin-bottom:12px;cursor:pointer}.mobile-submenu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mobile-submenu-item{background:#f5f5f5;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:400;color:#333;cursor:pointer;text-align:center;transition:background-color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-submenu-item:active{background:#ebebeb}.mobile-category-image{border-radius:50%;height:11vh;width:11vh;object-fit:cover}.drawer-topbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.06);flex:0 0 auto}.drawer-logo{flex:1 1 auto;display:flex;justify-content:flex-start;align-items:center;max-height:38px;overflow:hidden}.drawer-logo img{max-height:38px;width:auto}.drawer-close-btn{position:absolute;top:8px;right:8px;z-index:3;flex:none;background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 8px #00000024;cursor:pointer;width:30px!important;min-width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .18s ease}.drawer-close-btn:active{background:#0000000f}.drawer-close-btn mat-icon{color:#1a1a1a;font-size:22px;height:22px;width:22px}.drawer-body{flex:1 1 auto;overflow-y:auto;padding:4px 8px 8px}.drawer-rows{display:flex;flex-direction:column}.drawer-row{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:12px;cursor:pointer;transition:background-color .18s ease}.drawer-row:active,.drawer-row:hover{background:#0000000b}.drawer-row+.drawer-row{border-top:1px solid rgba(0,0,0,.05)}.drawer-row-icon{font-size:22px;height:22px;width:22px;flex:0 0 auto}.drawer-row-label{flex:1 1 auto;font-size:15px;font-weight:500;line-height:1.2}.drawer-row-chevron{font-size:20px;height:20px;width:20px;flex:0 0 auto;opacity:.55}.drawer-row--sub .drawer-row-label{font-weight:600}.drawer-detail{padding:4px 4px 8px}.drawer-detail-back{display:flex;align-items:center;gap:6px;padding:10px 8px;cursor:pointer;font-size:16px;font-weight:600}.drawer-detail-back mat-icon{font-size:24px;height:24px;width:24px}.drawer-detail-section{margin-bottom:18px}.drawer-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:6px 12px 0}.drawer-chip{background:#0000000a;border-radius:10px;padding:10px 12px;font-size:13px;color:#333;text-align:center;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .18s ease}.drawer-chip:active{background:#00000014}.drawer-footer{flex:0 0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}.drawer-divider{height:1px;width:100%;opacity:.35;margin-bottom:14px}.drawer-actions{display:flex;flex-direction:column;gap:10px}.drawer-action,.drawer-action app-button-element,.drawer-action .button{width:100%}.drawer-action .button{justify-content:center}.fs-menu{position:fixed;inset:0;z-index:1000000;display:grid;grid-template-areas:\"stack\";overflow:hidden;animation:fsMenuFade .28s cubic-bezier(.16,1,.3,1) both}.fs-menu-bg{grid-area:stack;width:100%;height:100%;z-index:0}.fs-menu-inner{grid-area:stack;position:relative;z-index:1;display:flex;flex-direction:column;max-width:560px;margin:0 auto;width:100%;height:100%;min-height:0;padding:18px 24px calc(18px + env(safe-area-inset-bottom));overflow:hidden}.fs-menu-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-bottom:10px}.fs-menu-logo{display:flex;align-items:center;max-height:44px;overflow:hidden;cursor:pointer}.fs-menu-logo img{max-height:42px;width:auto!important}@keyframes fsMenuFade{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}.fs-menu-close{flex:none;width:40px!important;min-width:40px;height:40px;border-radius:50%;background:#7f7f7f24;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .2s ease}.fs-menu-close:hover{background:#7f7f7f3d}.fs-menu-close mat-icon{font-size:24px;height:24px;width:24px}.fs-menu-nav{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;margin-bottom:16px}.fs-menu-link{position:relative;display:flex;align-items:center;gap:12px;padding:13px 4px;cursor:pointer;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent, #888) 10%,transparent);animation:fsLinkIn .45s cubic-bezier(.16,1,.3,1) both}.fs-menu-link:nth-child(1){animation-delay:.05s}.fs-menu-link:nth-child(2){animation-delay:.1s}.fs-menu-link:nth-child(3){animation-delay:.15s}.fs-menu-link:nth-child(4){animation-delay:.2s}.fs-menu-link:nth-child(5){animation-delay:.25s}.fs-menu-link:nth-child(6){animation-delay:.3s}@keyframes fsLinkIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.fs-menu-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .2s ease}.fs-menu-link:hover .fs-menu-dot,.fs-menu-link.active .fs-menu-dot{opacity:1;transform:scale(1)}.fs-menu-text{font-size:clamp(1rem,5vw,1.6rem);font-weight:600;letter-spacing:-.3px;line-height:1.1;transition:transform .2s ease,opacity .2s ease}.fs-menu-link:hover .fs-menu-text{transform:translate(6px);opacity:.85}.fs-menu-arrow{margin-left:auto;flex:0 0 auto;font-size:22px;height:22px;width:22px;opacity:.55}.fs-menu-back{display:flex;align-items:center;gap:6px;background:transparent;border:none;cursor:pointer;padding:6px 0 14px;width:auto!important;font-size:15px;font-weight:600;opacity:.85}.fs-menu-back mat-icon{font-size:26px;height:26px;width:26px}.fs-menu-sublink{display:block;padding:9px 4px 9px 18px;font-size:1rem;font-weight:400;text-decoration:none;cursor:pointer;opacity:.78;border-bottom:1px solid color-mix(in srgb,var(--accent, #888) 16%,transparent);transition:opacity .2s ease,transform .2s ease}.fs-menu-sublink:hover{opacity:1;transform:translate(5px)}.fs-menu-cta{flex:0 0 auto;padding-top:4px}.fs-menu-cta app-button-element,.fs-menu-cta .button{width:100%;justify-content:center}.bs-nav{position:fixed;left:0;right:0;bottom:0;z-index:10001;pointer-events:none}.bs-nav-bar{pointer-events:auto;display:flex;align-items:stretch;justify-content:space-around;height:64px;padding-bottom:env(safe-area-inset-bottom);border-radius:18px 18px 0 0;box-shadow:0 -4px 20px #0000001f}.bs-tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent;border:none;cursor:pointer;padding:8px 4px;transition:transform .15s ease}.bs-tab:active{transform:translateY(1px)}.bs-tab-icon{font-size:23px;height:23px;width:23px;transition:color .2s ease}.bs-tab-label{font-size:10.5px;font-weight:500;letter-spacing:.2px;line-height:1;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}.bs-tab.active .bs-tab-label{font-weight:700}@media screen and (max-width: 475px){body{padding-bottom:var(--bottom-nav-height, 0px)}}@media (min-width: 476px){.site-header.ecom-header2 .top-bar,.site-header.ecom-header4 .top-bar{flex-direction:row-reverse}}.mega-menu-child-logo{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}.mega-menu-child-desc{font-size:11px;color:#999;margin-top:2px;line-height:1.3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth", "itemIndex"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { 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", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.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", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"], outputs: ["stickyScrolled"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }, { kind: "component", type: CountdownBannerComponent, selector: "simpo-countdown-banner", inputs: ["edit", "data", "customClass", "nextComponentColor", "index", "delete", "isHeaderRenderer"] }] }); }
17955
17983
  }
17956
17984
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
17957
17985
  type: Component,
@@ -17977,7 +18005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
17977
18005
  CountdownBannerComponent,
17978
18006
  ContentFitDirective,
17979
18007
  SociaIconsComponent,
17980
- ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n [class.margin-bottom]=\"shouldReserveMobileHeaderSpace\">\n <div [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\"\n [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && !isScrolled && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [class.dropdown-open]=\"showList\">\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n <ng-container *ngIf=\"style?.headline?.display\">\n <div>\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"style?.countdown?.display\">\n <simpo-countdown-banner [data]=\"data?.content?.countdownBanner\" [edit]=\"false\" [delete]=\"false\"\n [isHeaderRenderer]=\"true\">\n </simpo-countdown-banner>\n </ng-container>\n\n <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n\n <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\n [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\n </div>\n\n <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">search</mat-icon>\n </div> -->\n\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n </div>\n\n <ng-container\n *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader() && data?.styles?.enableHeaderCarousel\">\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n </ng-container>\n </div>\n\n <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container> -->\n\n <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN && isFullScreenMenuOpen\">\n <ng-container *ngTemplateOutlet=\"fullScreenMenuTemplate\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.BOTTOM_STICKY && isMobile\">\n <ng-container *ngTemplateOutlet=\"bottomStickyNavTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </div>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header2Template>\n <div class=\"header1\">\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header3Template>\n <div class=\"header1\">\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </ng-container>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header4Template>\n <div class=\"header1\">\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container> </ng-container>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b>{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \n ((content?.logo?.size >= 60 && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\n [class.w-75]=\"screenWidth < 475\" loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"\n (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n <ng-container *ngIf=\"screenWidth > 475; else pageLinksDefault\">\n <div class=\"dropdown_menu_static w-100\"\n (mouseleave)=\"showList = false; selectedCategory = null; openSubmenuChild = null\">\n <div class=\"dd-nav-scroll\">\n <div class=\"dd-nav\">\n <ng-container *ngFor=\"let item of footerMenu\">\n <ng-container *ngIf=\"item.showHeader\">\n <div class=\"dd-tab-wrap\">\n <button type=\"button\" class=\"dd-tab\"\n [class.dd-tab-active]=\"showList && selectedCategory === item?.children\"\n (click)=\"item?.children?.length ? toggleChildMenu(item, $event) : redirectionsOfMenu(item)\">\n <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"simpoColor\">{{item?.label | titlecase}}</span>\n <svg *ngIf=\"item?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\n fill=\"#000000\" />\n </svg>\n </button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\n\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n style=\"display: block;\">\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-template #pageLinksDefault>\n <div class=\"drawer-rows\">\n <ng-container *ngFor=\"let item of footerMenu\">\n <ng-container *ngIf=\"item.showHeader\">\n <div class=\"drawer-row\" (click)=\"redirectionsOfMenu(item)\" data-bs-dismiss=\"offcanvas\">\n <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n <mat-icon class=\"drawer-row-chevron\" *ngIf=\"item?.children?.length\"\n [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n\n </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <div class=\"d-flex\">\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n <div *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"navigateLogin()\" *ngIf=\"(passbookAppStatus || appointmentAppStatus) && !loggedIn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\">\n <mat-icon>person_outline</mat-icon>\n Login\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn && !isMobile\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\" [style.color]=\"accentColor\"\n (click)=\"goToAccount('LOGIN')\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n <path\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n </svg>\n &nbsp;\n Login</button>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && loggedIn\" [style.color]=\"accentColor\"\n (click)=\"goToAccount('PROFILE')\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n <path\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n </svg>\n &nbsp;Account</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\n <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\n <div class=\"item-count fw-bold\">\n {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\n <!-- Total : \u20B9{{ getCartTotalAmount }} -->\n </div>\n <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\n View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\n </div>\n </div>\n\n </div>\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"icons\" (click)=\"goToHome()\">\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n <span [simpoColor]=\"simpoColor\">Home</span>\n </div>\n <div class=\"icons\" (click)=\"searchProducts()\">\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n <span [simpoColor]=\"simpoColor\">Shop</span>\n </div>\n <div class=\"icons\" (click)=\"goToWishlist()\">\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</div>\n </div>\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n <span [simpoColor]=\"simpoColor\">Cart</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n </div> -->\n <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <!-- <span class=\"animated-placeholder position-absolute\" \n [class.animate]=\"animatePlaceholder\"\n *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\n {{ currentPlaceholder }}\n </span> -->\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n </div>\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n height=\"30\" version=\"1.1\">\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n </g>\n </svg>\n <div [style.color]=\"accentColor\">Schemes</div>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-center\">\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n Pincode\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n getPincode}}</div>\n\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getWishlistItemsCount}}</div>\n </div>\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getCartItemsCount}}</div>\n </div>\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n </div>\n <!-- (mouseleave)=\"showLogin = false\" -->\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n <!-- <div> -->\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n <!-- </div> -->\n </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | uppercase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\">\n <div #mobileOffcanvas class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n data-bs-backdrop=\"false\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n\n <!-- TOP BAR -->\n <div class=\"drawer-topbar\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"drawer-logo\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n </div>\n <button type=\"button\" class=\"drawer-close-btn\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close menu\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n </div>\n\n <!-- BODY -->\n <div class=\"offcanvas-body drawer-body\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"mobileMenuListTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n\n <!-- DIVIDER + QUICK ACTIONS -->\n <div class=\"drawer-footer\" *ngIf=\"action?.display && action?.buttons?.length\">\n <div class=\"drawer-divider\" [style.background]=\"accentColor\"></div>\n <div class=\"drawer-actions\">\n <div class=\"drawer-action\" *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n\n<ng-template #ecomProfileTemplate>\n <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\n\n\n <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\n\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b>{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n <div class=\"categories-wrapper\" *ngIf=\"!isMobile\" (mouseleave)=\"showList = false; showCollections = false\">\n\n <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\n\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\n [style.background]=\"data?.styles?.background?.color\">\n\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.background?.color\"\n (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\n {{ele?.label}}\n </div>\n </div>\n\n <!-- [class.hide-dropdown]=\"!showList\" -->\n <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\n <div class=\"row w-100 h-100 mega-menu-scroll-row\">\n <ng-container *ngFor=\"let ele of selectedCategory; let i = index; let last = last\">\n <div class=\"mega-menu-scroll-col\" [ngClass]=\"[\n ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES') ? 'col-3' : 'col-2',\n ele?.children?.length > 0 && !last ? 'has-right-border' : ''\n ]\">\n\n <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES' )\">\n <div class=\"mobile-submenu-card mb-3\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"ele.imageUrl\">\n <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"mobile-submenu-image collectionImage\" />\n <div class=\"mobile-submenu-caption\">{{ele?.label | uppercase}}</div>\n </div>\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"!ele.imageUrl\">\n {{ele?.label | titlecase}}\n </div>\n </ng-container>\n\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\"\n *ngIf=\"ele?.children?.length > 0\">\n {{ele?.label | titlecase}}\n </div>\n <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let child of ele?.children\">\n <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer d-flex align-items-center gap-2\">\n <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\"\n class=\"mega-menu-child-logo\" />\n <div>\n <div>{{child?.label | titlecase}}</div>\n <div *ngIf=\"child?.description\" class=\"mega-menu-child-desc\">{{child?.description}}</div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #mobileMenuListTemplate>\n <div class=\"mobile-menu-container\">\n\n <div class=\"drawer-rows\" *ngIf=\"!selectedMobileMenu\">\n <div class=\"drawer-row\" *ngFor=\"let ele of megaMenu\"\n (click)=\"ele?.children?.length ? selectMobileMenu(ele) : redirectionsOfMenu(ele)\"\n [attr.data-bs-dismiss]=\"ele?.children?.length ? null : 'offcanvas'\">\n <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ ele?.label | titlecase }}</span>\n <mat-icon class=\"drawer-row-chevron\" *ngIf=\"ele?.children?.length\"\n [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n </div>\n </div>\n\n <div class=\"drawer-detail\" *ngIf=\"selectedMobileMenu\">\n <div class=\"drawer-detail-back\" (click)=\"goBackMobileMenu()\">\n <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n <span [simpoColor]=\"simpoColor\">{{selectedMobileMenu?.label | titlecase}}</span>\n </div>\n\n <div class=\"drawer-detail-sections\">\n <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n <div class=\"drawer-detail-section\">\n <ng-container\n *ngIf=\"child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' )\">\n <div class=\"mobile-submenu-card\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\"\n *ngIf=\"child.imageUrl\">\n <img [src]=\"child.imageUrl\" [alt]=\"child?.label\" class=\"mobile-submenu-image collectionImage\" />\n <div class=\"mobile-submenu-caption\">{{child?.label | uppercase}}</div>\n </div>\n </ng-container>\n\n <ng-container\n *ngIf=\"!(child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' ) && child.imageUrl)\">\n <div class=\"drawer-row drawer-row--sub\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\">\n <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\" class=\"mega-menu-child-logo\" />\n <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n </div>\n\n <div class=\"drawer-detail-grid\" *ngIf=\"child?.children?.length\">\n <div class=\"drawer-chip\" *ngFor=\"let sub of child?.children\" (click)=\"redirectionsOfMenu(sub)\"\n data-bs-dismiss=\"offcanvas\">\n {{sub?.label | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\n <img [src]=\"ele?.imageUrls[0]\" [alt]=\"ele?.categoryName\" class=\"br-12 mobile-category-image\">\n </div>\n <div class=\"text-center category-name\">{{ele?.categoryName}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerce_header>\n <header class=\"site-header\" [ngClass]=\"{\n 'ecom-header1': style?.styling === 'Header1',\n 'ecom-header2': style?.styling === 'Header2',\n 'ecom-header3': style?.styling === 'Header3',\n 'ecom-header4': style?.styling === 'Header4'\n }\">\n <!-- Top Bar: Logo, Search, User Actions -->\n <div class=\"top-bar\">\n\n <!-- Mobile Menu Toggle -->\n <div class=\"header-logo-area\" [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\n <!-- HAMBURGER -->\n <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\" for=\"mobile-menu-checkbox\"\n class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" aria-label=\"Toggle menu\" (click)=\"goBackMobileMenu()\">\n <svg *ngIf=\"!isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n </svg>\n <svg *ngIf=\"isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"></line>\n </svg>\n </label>\n <!-- FULL SCREEN -->\n <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\" class=\"mobile-menu-btn\"\n aria-label=\"Toggle menu\" (click)=\"openFullScreenMenu()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n </svg>\n </label>\n\n <!-- Logo Section -->\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\n <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size + 15\"\n [height]=\"content?.logo?.size\">\n </a>\n\n <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n && content?.logo?.text?.isText \n && content?.logo?.text?.isIcon \n && content?.logo?.text?.url\">\n\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\n [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\n\n <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\n {{ content?.siteName?.value }}\n </span>\n </a>\n\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n && content?.logo?.text?.isText \n && !content?.logo?.text?.isIcon\">\n\n <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\n {{ content?.siteName?.value }}\n </span>\n </a>\n </div>\n\n <!-- Search Bar -->\n <div class=\"search-wrapper\"\n *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\n <div class=\"search-bar\">\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </div>\n </div>\n\n <!-- Dropdown menu style -->\n <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\n (mouseleave)=\"showList = false; selectedCategory = null\">\n <div class=\"dd-nav-scroll\">\n <div class=\"dd-nav\">\n <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\">\n <button type=\"button\" class=\"dd-tab\"\n [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\n (click)=\"ele?.children?.length ? toggleChildMenu(ele, $event) : redirectionsOfMenu(ele)\">\n <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"simpoColor\">{{ele?.label | titlecase}}</span>\n <svg *ngIf=\"ele?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\n fill=\"#000000\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\n\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n style=\"display: block;\">\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n <!-- Right Actions -->\n <div class=\"user-actions\">\n\n <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\n <a class=\"action-link icon-only dropdown-search-toggle\"\n (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\" aria-label=\"Toggle search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"storeAvaiable\">\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n *ngIf=\"!getPincode\">\n <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <path\n d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\n fill=\"#000000\" />\n </svg> -->\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\n <g>\n <path\n d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\n </path>\n <path\n d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\n </path>\n </g>\n </svg>\n\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\n\n </a>\n\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\n <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\n <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\n <path d=\"M2 7h20\"></path>\n <path\n d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\n </path>\n </svg>\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\n getPincode}}</span>\n\n </a>\n\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n </ng-container>\n\n <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\n (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\n <!-- User Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n </svg>\n </a>\n\n <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\n <!-- User Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n </svg>\n </a>\n\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n\n <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\n <!-- Heart Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path\n d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\n </path>\n </svg>\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</span>\n </a>\n\n <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\n <!-- Shopping Bag Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\n <path d=\"M3 6h18\"></path>\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n </svg>\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\n </a>\n\n <a class=\"action-link icon-only icon-container bookings-icon\" (click)=\"goToBookings()\">\n <!-- Bookings (calendar-check) Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"4\" y=\"7.5\" width=\"16\" height=\"12.5\" rx=\"2\"></rect>\n <path d=\"M8 7.5V6a4 4 0 0 1 8 0v1.5\"></path>\n <path d=\"M9.2 13.6l1.9 1.9 3.7-3.9\"></path>\n </svg>\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getBookingItemsCount\">{{getBookingItemsCount}}</span>\n </a>\n\n <div class=\"dropdown-search-expand\"\n *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\n <div class=\"dropdown-search-box\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"dropdown-search-icon search-btn\" (click)=\"searchProducts()\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\"\n (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\n <div class=\"search-bar\">\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </div>\n </div>\n\n </header>\n</ng-template>\n\n<ng-template #fullScreenMenuTemplate>\n <div class=\"fs-menu\">\n <div class=\"fs-menu-bg\" [simpoBackground]=\"backgroundInfo\"></div>\n <div class=\"fs-menu-inner\">\n <div class=\"fs-menu-head\">\n <div class=\"fs-menu-logo\" (click)=\"closeFullScreenMenu()\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n </div>\n <button class=\"fs-menu-close\" (click)=\"closeFullScreenMenu()\" aria-label=\"Close menu\">\n <mat-icon [simpoColor]=\"simpoColor\">close</mat-icon>\n </button>\n </div>\n <!-- Main level -->\n <nav class=\"fs-menu-nav\" *ngIf=\"!selectedMobileMenu\">\n <ng-container *ngFor=\"let item of footerMenu\">\n <ng-container *ngIf=\"item.showHeader\">\n <a class=\"fs-menu-link\" [class.active]=\"isNavItemActive(item)\" [style.--accent]=\"accentColor\"\n (click)=\"onFullScreenItemClick(item)\">\n <span class=\"fs-menu-dot\" [style.background]=\"accentColor\"></span>\n <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n <mat-icon class=\"fs-menu-arrow\" *ngIf=\"item?.children?.length\"\n [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n </a>\n </ng-container>\n </ng-container>\n </nav>\n\n <!-- Submenu (drill-in) level -->\n <nav class=\"fs-menu-nav fs-menu-sub\" *ngIf=\"selectedMobileMenu\">\n <button class=\"fs-menu-back\" (click)=\"goBackMobileMenu()\">\n <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n <span [simpoColor]=\"simpoColor\">{{ selectedMobileMenu?.label | titlecase }}</span>\n </button>\n <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n <a class=\"fs-menu-link\" [style.--accent]=\"accentColor\"\n (click)=\"redirectionsOfMenu(child); closeFullScreenMenu()\">\n <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n </a>\n <a class=\"fs-menu-sublink\" *ngFor=\"let sub of child?.children\" [simpoColor]=\"simpoColor\"\n (click)=\"redirectionsOfMenu(sub); closeFullScreenMenu()\">{{ sub?.label | titlecase }}</a>\n </ng-container>\n </nav>\n <div class=\"fs-menu-cta\" *ngIf=\"action?.display && action?.buttons?.length\">\n <ng-container *ngFor=\"let button of action?.buttons | slice:0:1\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #bottomStickyNavTemplate>\n <nav class=\"bs-nav\">\n <div class=\"bs-nav-bar\" [simpoBackground]=\"backgroundInfo\">\n <button class=\"bs-tab\" *ngFor=\"let item of bottomStickyNavItems; let i = index\"\n [class.active]=\"i === activeBottomNavIndex\" (click)=\"redirectionsOfMenu(item)\">\n <span class=\"bs-tab-label\" [style.color]=\"i === activeBottomNavIndex ? accentColor : null\"\n [simpoColor]=\"i === activeBottomNavIndex ? null : simpoColor\">{{ item?.label | titlecase }}</span>\n </button>\n </div>\n </nav>\n</ng-template>", styles: [".total-container div[simpoSticky]:not(.header--scrolled){top:0!important;left:0!important;right:0!important;margin:0 auto!important;width:100%!important}.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:20%!important;right:20%!important;width:60%!important;overflow:hidden!important;border-radius:60px!important;box-shadow:0 10px 40px #0000001f!important;z-index:1000001!important;transition:width .4s cubic-bezier(.16,1,.3,1)}.total-container div[simpoSticky].header--scrolled.dropdown-open,.header--scrolled.dropdown-open{overflow:visible!important}@media screen and (max-width: 475px){.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:5%!important;right:5%!important;width:90%!important}}.simpo-transparent-type{transition:background-color .3s ease!important}@keyframes simpo-slide-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.simpo-sticky-revealed{animation:simpo-slide-down .3s cubic-bezier(.16,1,.3,1) forwards;box-shadow:0 2px 12px #0000001f}.w-40{width:40%!important}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.category-name{text-transform:uppercase;white-space:normal;word-break:break-word;line-height:1.2;font-size:11px;letter-spacing:.4px;text-align:center;max-width:90px}.margin-bottom{margin-bottom:var(--margin-top, 0px)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top, 0px)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important;width:100%;max-width:100%;overflow-x:visible;overflow-y:visible}.page-links-nav{flex-direction:column;align-items:flex-start;padding-bottom:0;margin-bottom:0;overflow-x:visible}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#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;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.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:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}.pageLinks{width:100%!important;max-width:100%!important}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:75%;z-index:1000000000}@media screen and (max-width: 475px){.offcanvas{top:0!important;height:100vh!important;height:100dvh!important;width:100%;display:flex;flex-direction:column}.offcanvas-body{flex:1 1 auto;height:auto}.offcanvas-footer{height:auto}}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.mobileLoginButton{width:100%;height:40px;border-radius:8px;outline:none;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.pageLinks{display:flex;flex-direction:row;width:50%;max-width:50%;overflow:visible}.pageLinks .dropdown-menu{z-index:1010}.page-links-nav{display:flex;align-items:center;gap:15px;width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;padding-bottom:220px;margin-bottom:-220px;scrollbar-width:none}.page-links-nav::-webkit-scrollbar{display:none}.category-btn{font-size:16px!important}.h-70{height:70px}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:auto;max-height:50vh;overflow-y:auto;position:absolute;width:100%;z-index:1001}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.dropdown_menu_static{position:relative}.dropdown_menu{position:relative;width:55%;max-width:55%;min-width:420px;display:flex;justify-content:center;margin:0 auto}.dropdown_menu_static .dropdown_menu{position:relative;min-width:420px;max-width:55%;display:flex;justify-content:center}.dd-nav-scroll{width:100%;overflow-x:auto;overflow-y:visible;scrollbar-width:none}.dd-nav-scroll::-webkit-scrollbar{display:none}.dd-nav{display:inline-flex;align-items:flex-start;gap:18px;flex-wrap:nowrap;padding-top:5px;pointer-events:auto}.dd-tab-wrap{position:relative;display:inline-flex;pointer-events:auto}.dd-tab{border:none;background:transparent;padding:6px 2px;font-size:15px;font-weight:500;color:#30343b;line-height:1;border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:8px}.dd-tab:hover,.dd-tab.dd-tab-active{border-bottom-color:#2f3338}.dd-panel{position:absolute;top:100%;left:0;background:#fff;border:1px solid #ececef;padding:14px 0;z-index:1006;min-width:220px}.dd-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;font-size:16px;color:#2c2f35;transition:background-color .2s ease;cursor:pointer}.dd-item:hover{background-color:#f5f6f8}.dd-item-arrow{font-size:20px;line-height:1;color:#5a5f66}.dd-submenu{position:absolute;top:-10px;left:calc(100% + 3px);background:#fff;border:1px solid #ececef;box-shadow:0 10px 26px #1d212926;padding:10px 0;display:none;z-index:1007}.dd-item:hover .dd-submenu{display:block}.dd-sub-item{padding:10px 16px;font-size:15px;color:#2c2f35;transition:background-color .2s ease}.dd-sub-item:hover{background-color:#f5f6f8}.dropdown-search-toggle{cursor:pointer}.dropdown-search-expand{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;z-index:1010}.dropdown-search-box{width:100%;background:#f3f3f3;border:1px solid #e7e7e7;display:flex;align-items:center;gap:12px;padding:10px 14px}.dropdown-search-icon{color:#1f2328;flex:0 0 auto}.dropdown-search-box input{border:none;background:transparent;width:100%;font-size:14px;color:#2f3338;outline:none}.dropdown-search-close{color:#545861;cursor:pointer;flex:0 0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-btn{cursor:pointer;flex-shrink:0}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;padding:0 8px;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:100}.categories-wrapper .categories-header{border-top:1px solid rgba(0,0,0,.1)}.categories-header{gap:26px!important;overflow-x:auto;margin:8px 8px 0;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top, 0px);left:0;width:100vw;height:calc(100vh - var(--margin-top, 0px));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:auto;max-height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow-x:hidden;overflow-y:auto}.mega-menu-scroll-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.mega-menu-scroll-col{flex-shrink:0}.mega-menu-scroll-col.has-right-border{border-right:1px solid #e9e7e7}.collectionImage{border-radius:10px;height:70%!important}@media screen and (min-width: 476px){.list-category .mobile-submenu-card{aspect-ratio:4 / 3;overflow:hidden}.list-category .mobile-submenu-image.collectionImage{width:100%;height:100%!important;object-fit:cover;display:block}}.list-item>div{color:#585858}.list-item>div:hover{color:#000}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px;height:auto;max-height:36vh;overflow-y:auto}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}.mobile-menu-container{height:100%;overflow-y:auto}.mobile-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mobile-menu-item{display:flex;align-items:center;justify-content:space-between;background:#f5f5f5;border-radius:8px;padding:14px;cursor:pointer;transition:background-color .2s ease}.mobile-menu-item:active{background:#ebebeb}.mobile-menu-label{font-size:11px;letter-spacing:.5px;color:#1a1a1a;line-height:1.3}.mobile-menu-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#999;flex-shrink:0}.mobile-menu-detail{padding:0}.mobile-menu-back{display:flex;align-items:center;gap:4px;padding:14px 0;cursor:pointer;font-size:16px;color:#1a1a1a}.mobile-menu-back mat-icon{font-size:22px!important;width:22px!important;height:22px!important;color:#1a1a1a!important}.mobile-submenu-sections{overflow-y:auto}.mobile-submenu-section{margin-bottom:20px}.mobile-submenu-card{position:relative;border-radius:12px;overflow:hidden;cursor:pointer}.mobile-submenu-image{display:block;width:100%;height:auto!important}.mobile-submenu-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:14px;font-weight:700;letter-spacing:.6px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5);background:linear-gradient(180deg,#0000,#0009)}.mobile-submenu-header{font-size:14px;font-weight:700;letter-spacing:.5px;color:#1a1a1a;margin-bottom:12px;cursor:pointer}.mobile-submenu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mobile-submenu-item{background:#f5f5f5;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:400;color:#333;cursor:pointer;text-align:center;transition:background-color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-submenu-item:active{background:#ebebeb}.mobile-category-image{border-radius:50%;height:11vh;width:11vh;object-fit:cover}.drawer-topbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.06);flex:0 0 auto}.drawer-logo{flex:1 1 auto;display:flex;justify-content:flex-start;align-items:center;max-height:38px;overflow:hidden}.drawer-logo img{max-height:38px;width:auto}.drawer-close-btn{position:absolute;top:8px;right:8px;z-index:3;flex:none;background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 8px #00000024;cursor:pointer;width:30px!important;min-width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .18s ease}.drawer-close-btn:active{background:#0000000f}.drawer-close-btn mat-icon{color:#1a1a1a;font-size:22px;height:22px;width:22px}.drawer-body{flex:1 1 auto;overflow-y:auto;padding:4px 8px 8px}.drawer-rows{display:flex;flex-direction:column}.drawer-row{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:12px;cursor:pointer;transition:background-color .18s ease}.drawer-row:active,.drawer-row:hover{background:#0000000b}.drawer-row+.drawer-row{border-top:1px solid rgba(0,0,0,.05)}.drawer-row-icon{font-size:22px;height:22px;width:22px;flex:0 0 auto}.drawer-row-label{flex:1 1 auto;font-size:15px;font-weight:500;line-height:1.2}.drawer-row-chevron{font-size:20px;height:20px;width:20px;flex:0 0 auto;opacity:.55}.drawer-row--sub .drawer-row-label{font-weight:600}.drawer-detail{padding:4px 4px 8px}.drawer-detail-back{display:flex;align-items:center;gap:6px;padding:10px 8px;cursor:pointer;font-size:16px;font-weight:600}.drawer-detail-back mat-icon{font-size:24px;height:24px;width:24px}.drawer-detail-section{margin-bottom:18px}.drawer-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:6px 12px 0}.drawer-chip{background:#0000000a;border-radius:10px;padding:10px 12px;font-size:13px;color:#333;text-align:center;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .18s ease}.drawer-chip:active{background:#00000014}.drawer-footer{flex:0 0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}.drawer-divider{height:1px;width:100%;opacity:.35;margin-bottom:14px}.drawer-actions{display:flex;flex-direction:column;gap:10px}.drawer-action,.drawer-action app-button-element,.drawer-action .button{width:100%}.drawer-action .button{justify-content:center}.fs-menu{position:fixed;inset:0;z-index:1000000;display:grid;grid-template-areas:\"stack\";overflow:hidden;animation:fsMenuFade .28s cubic-bezier(.16,1,.3,1) both}.fs-menu-bg{grid-area:stack;width:100%;height:100%;z-index:0}.fs-menu-inner{grid-area:stack;position:relative;z-index:1;display:flex;flex-direction:column;max-width:560px;margin:0 auto;width:100%;height:100%;min-height:0;padding:18px 24px calc(18px + env(safe-area-inset-bottom));overflow:hidden}.fs-menu-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-bottom:10px}.fs-menu-logo{display:flex;align-items:center;max-height:44px;overflow:hidden;cursor:pointer}.fs-menu-logo img{max-height:42px;width:auto!important}@keyframes fsMenuFade{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}.fs-menu-close{flex:none;width:40px!important;min-width:40px;height:40px;border-radius:50%;background:#7f7f7f24;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .2s ease}.fs-menu-close:hover{background:#7f7f7f3d}.fs-menu-close mat-icon{font-size:24px;height:24px;width:24px}.fs-menu-nav{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;margin-bottom:16px}.fs-menu-link{position:relative;display:flex;align-items:center;gap:12px;padding:13px 4px;cursor:pointer;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent, #888) 10%,transparent);animation:fsLinkIn .45s cubic-bezier(.16,1,.3,1) both}.fs-menu-link:nth-child(1){animation-delay:.05s}.fs-menu-link:nth-child(2){animation-delay:.1s}.fs-menu-link:nth-child(3){animation-delay:.15s}.fs-menu-link:nth-child(4){animation-delay:.2s}.fs-menu-link:nth-child(5){animation-delay:.25s}.fs-menu-link:nth-child(6){animation-delay:.3s}@keyframes fsLinkIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.fs-menu-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .2s ease}.fs-menu-link:hover .fs-menu-dot,.fs-menu-link.active .fs-menu-dot{opacity:1;transform:scale(1)}.fs-menu-text{font-size:clamp(1rem,5vw,1.6rem);font-weight:600;letter-spacing:-.3px;line-height:1.1;transition:transform .2s ease,opacity .2s ease}.fs-menu-link:hover .fs-menu-text{transform:translate(6px);opacity:.85}.fs-menu-arrow{margin-left:auto;flex:0 0 auto;font-size:22px;height:22px;width:22px;opacity:.55}.fs-menu-back{display:flex;align-items:center;gap:6px;background:transparent;border:none;cursor:pointer;padding:6px 0 14px;width:auto!important;font-size:15px;font-weight:600;opacity:.85}.fs-menu-back mat-icon{font-size:26px;height:26px;width:26px}.fs-menu-sublink{display:block;padding:9px 4px 9px 18px;font-size:1rem;font-weight:400;text-decoration:none;cursor:pointer;opacity:.78;border-bottom:1px solid color-mix(in srgb,var(--accent, #888) 16%,transparent);transition:opacity .2s ease,transform .2s ease}.fs-menu-sublink:hover{opacity:1;transform:translate(5px)}.fs-menu-cta{flex:0 0 auto;padding-top:4px}.fs-menu-cta app-button-element,.fs-menu-cta .button{width:100%;justify-content:center}.bs-nav{position:fixed;left:0;right:0;bottom:0;z-index:10001;pointer-events:none}.bs-nav-bar{pointer-events:auto;display:flex;align-items:stretch;justify-content:space-around;height:64px;padding-bottom:env(safe-area-inset-bottom);border-radius:18px 18px 0 0;box-shadow:0 -4px 20px #0000001f}.bs-tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent;border:none;cursor:pointer;padding:8px 4px;transition:transform .15s ease}.bs-tab:active{transform:translateY(1px)}.bs-tab-icon{font-size:23px;height:23px;width:23px;transition:color .2s ease}.bs-tab-label{font-size:10.5px;font-weight:500;letter-spacing:.2px;line-height:1;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}.bs-tab.active .bs-tab-label{font-weight:700}@media screen and (max-width: 475px){body{padding-bottom:var(--bottom-nav-height, 0px)}}@media (min-width: 476px){.site-header.ecom-header2 .top-bar,.site-header.ecom-header4 .top-bar{flex-direction:row-reverse}}.mega-menu-child-logo{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}.mega-menu-child-desc{font-size:11px;color:#999;margin-top:2px;line-height:1.3}\n"] }]
18008
+ ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n [class.margin-bottom]=\"shouldReserveMobileHeaderSpace\">\n <div [simpoSticky]=\"resolvedStickyType\" (stickyScrolled)=\"onStickyScrolled($event)\"\n [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && !isScrolled && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\" [class.dropdown-open]=\"showList\">\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n <ng-container *ngIf=\"style?.headline?.display\">\n <div>\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"style?.countdown?.display\">\n <simpo-countdown-banner [data]=\"data?.content?.countdownBanner\" [edit]=\"false\" [delete]=\"false\"\n [isHeaderRenderer]=\"true\">\n </simpo-countdown-banner>\n </ng-container>\n\n <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\"\n [class.p-2]=\"resolvedStickyType === StickyType.SHRINK_ON_SCROLL && isScrolled && !edit\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n\n <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\n [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\n </div>\n\n <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">search</mat-icon>\n </div> -->\n\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n </div>\n\n <ng-container\n *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader() && data?.styles?.enableHeaderCarousel\">\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n </ng-container>\n </div>\n\n <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container> -->\n\n <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN && isFullScreenMenuOpen\">\n <ng-container *ngTemplateOutlet=\"fullScreenMenuTemplate\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.BOTTOM_STICKY && isMobile\">\n <ng-container *ngTemplateOutlet=\"bottomStickyNavTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </div>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header2Template>\n <div class=\"header1\">\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header3Template>\n <div class=\"header1\">\n <div [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </ng-container>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header4Template>\n <div class=\"header1\">\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container> </ng-container>\n <!-- HAMBURGER -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.HAMBURGER\"\n data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"goBackMobileMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <!-- FULL SCREEN -->\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile && resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\">\n <mat-icon [simpoColor]=\"simpoColor\" (click)=\"openFullScreenMenu()\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage && screenWidth > 475\"\n [class.w-40]=\"content?.logo?.isImage && screenWidth <= 475\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b>{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \n ((content?.logo?.size >= 60 && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\n [class.w-75]=\"screenWidth < 475\" loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"\n (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n <ng-container *ngIf=\"screenWidth > 475; else pageLinksDefault\">\n <div class=\"dropdown_menu_static w-100\"\n (mouseleave)=\"showList = false; selectedCategory = null; openSubmenuChild = null\">\n <div class=\"dd-nav-scroll\">\n <div class=\"dd-nav\">\n <ng-container *ngFor=\"let item of footerMenu\">\n <ng-container *ngIf=\"item.showHeader\">\n <div class=\"dd-tab-wrap\">\n <button type=\"button\" class=\"dd-tab\"\n [class.dd-tab-active]=\"showList && selectedCategory === item?.children\"\n (click)=\"item?.children?.length ? toggleChildMenu(item, $event) : redirectionsOfMenu(item)\">\n <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"simpoColor\">{{item?.label | titlecase}}</span>\n <svg *ngIf=\"item?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\n fill=\"#000000\" />\n </svg>\n </button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\n\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n style=\"display: block;\">\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-template #pageLinksDefault>\n <div class=\"drawer-rows\">\n <ng-container *ngFor=\"let item of footerMenu\">\n <ng-container *ngIf=\"item.showHeader\">\n <div class=\"drawer-row\" (click)=\"redirectionsOfMenu(item)\" data-bs-dismiss=\"offcanvas\">\n <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n <mat-icon class=\"drawer-row-chevron\" *ngIf=\"item?.children?.length\"\n [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n </div>\n </ng-container>\n </ng-container>\n </div>\n </ng-template>\n\n </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <div class=\"d-flex\">\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n <div *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"navigateLogin()\" *ngIf=\"(passbookAppStatus || appointmentAppStatus) && !loggedIn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\">\n <mat-icon>person_outline</mat-icon>\n Login\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn && !isMobile\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\" [style.color]=\"accentColor\"\n (click)=\"goToAccount('LOGIN')\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n <path\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n </svg>\n &nbsp;\n Login</button>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && loggedIn\" [style.color]=\"accentColor\"\n (click)=\"goToAccount('PROFILE')\">\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M12 13C14.7614 13 17 10.7614 17 8C17 5.23858 14.7614 3 12 3C9.23858 3 7 5.23858 7 8C7 10.7614 9.23858 13 12 13Z\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n <path\n d=\"M20 21C20 18.8783 19.1571 16.8434 17.6569 15.3431C16.1566 13.8429 14.1217 13 12 13C9.87827 13 7.84344 13.8429 6.34315 15.3431C4.84285 16.8434 4 18.8783 4 21\"\n stroke=\"#333333\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n </svg>\n &nbsp;Account</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\n <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\n <div class=\"item-count fw-bold\">\n {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\n <!-- Total : \u20B9{{ getCartTotalAmount }} -->\n </div>\n <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\n View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\n </div>\n </div>\n\n </div>\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"icons\" (click)=\"goToHome()\">\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n <span [simpoColor]=\"simpoColor\">Home</span>\n </div>\n <div class=\"icons\" (click)=\"searchProducts()\">\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n <span [simpoColor]=\"simpoColor\">Shop</span>\n </div>\n <div class=\"icons\" (click)=\"goToWishlist()\">\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</div>\n </div>\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n <span [simpoColor]=\"simpoColor\">Cart</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n </div> -->\n <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <!-- <span class=\"animated-placeholder position-absolute\" \n [class.animate]=\"animatePlaceholder\"\n *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\n {{ currentPlaceholder }}\n </span> -->\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n </div>\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n height=\"30\" version=\"1.1\">\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n </g>\n </svg>\n <div [style.color]=\"accentColor\">Schemes</div>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-center\">\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n Pincode\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n getPincode}}</div>\n\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getWishlistItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getWishlistItemsCount}}</div>\n </div>\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getCartItemsCount}}</div>\n </div>\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n </div>\n <!-- (mouseleave)=\"showLogin = false\" -->\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n <!-- <div> -->\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n <!-- </div> -->\n </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | uppercase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-container *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\">\n <div #mobileOffcanvas class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n data-bs-backdrop=\"false\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n\n <!-- TOP BAR -->\n <div class=\"drawer-topbar\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"drawer-logo\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n </div>\n <button type=\"button\" class=\"drawer-close-btn\" data-bs-dismiss=\"offcanvas\" aria-label=\"Close menu\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n </div>\n\n <!-- BODY -->\n <div class=\"offcanvas-body drawer-body\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"mobileMenuListTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n\n <!-- DIVIDER + QUICK ACTIONS -->\n <div class=\"drawer-footer\" *ngIf=\"action?.display && action?.buttons?.length\">\n <div class=\"drawer-divider\" [style.background]=\"accentColor\"></div>\n <div class=\"drawer-actions\">\n <div class=\"drawer-action\" *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n </div>\n </div>\n </div>\n </div>\n</ng-container>\n\n<ng-template #ecomProfileTemplate>\n <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\n\n\n <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\n\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b>{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n <div class=\"categories-wrapper\" *ngIf=\"!isMobile\" (mouseleave)=\"showList = false; showCollections = false\">\n\n <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\n\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\n [style.background]=\"data?.styles?.background?.color\">\n\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.background?.color\"\n (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\n {{ele?.label}}\n </div>\n </div>\n\n <!-- [class.hide-dropdown]=\"!showList\" -->\n <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\n <div class=\"row w-100 h-100 mega-menu-scroll-row\">\n <ng-container *ngFor=\"let ele of selectedCategory; let i = index; let last = last\">\n <div class=\"mega-menu-scroll-col\" [ngClass]=\"[\n ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES') ? 'col-3' : 'col-2',\n ele?.children?.length > 0 && !last ? 'has-right-border' : ''\n ]\">\n\n <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORIES' )\">\n <div class=\"mobile-submenu-card mb-3\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"ele.imageUrl\">\n <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"mobile-submenu-image collectionImage\" />\n <div class=\"mobile-submenu-caption\">{{ele?.label | uppercase}}</div>\n </div>\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\" *ngIf=\"!ele.imageUrl\">\n {{ele?.label | titlecase}}\n </div>\n </ng-container>\n\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\"\n *ngIf=\"ele?.children?.length > 0\">\n {{ele?.label | titlecase}}\n </div>\n <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let child of ele?.children\">\n <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer d-flex align-items-center gap-2\">\n <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\"\n class=\"mega-menu-child-logo\" />\n <div>\n <div>{{child?.label | titlecase}}</div>\n <div *ngIf=\"child?.description\" class=\"mega-menu-child-desc\">{{child?.description}}</div>\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #mobileMenuListTemplate>\n <div class=\"mobile-menu-container\">\n\n <div class=\"drawer-rows\" *ngIf=\"!selectedMobileMenu\">\n <div class=\"drawer-row\" *ngFor=\"let ele of megaMenu\"\n (click)=\"ele?.children?.length ? selectMobileMenu(ele) : redirectionsOfMenu(ele)\"\n [attr.data-bs-dismiss]=\"ele?.children?.length ? null : 'offcanvas'\">\n <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ ele?.label | titlecase }}</span>\n <mat-icon class=\"drawer-row-chevron\" *ngIf=\"ele?.children?.length\"\n [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n </div>\n </div>\n\n <div class=\"drawer-detail\" *ngIf=\"selectedMobileMenu\">\n <div class=\"drawer-detail-back\" (click)=\"goBackMobileMenu()\">\n <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n <span [simpoColor]=\"simpoColor\">{{selectedMobileMenu?.label | titlecase}}</span>\n </div>\n\n <div class=\"drawer-detail-sections\">\n <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n <div class=\"drawer-detail-section\">\n <ng-container\n *ngIf=\"child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' )\">\n <div class=\"mobile-submenu-card\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\"\n *ngIf=\"child.imageUrl\">\n <img [src]=\"child.imageUrl\" [alt]=\"child?.label\" class=\"mobile-submenu-image collectionImage\" />\n <div class=\"mobile-submenu-caption\">{{child?.label | uppercase}}</div>\n </div>\n </ng-container>\n\n <ng-container\n *ngIf=\"!(child?.children?.length == 0 && (child.type=='COLLECTIONS' || child.type=='CATEGORIES' ) && child.imageUrl)\">\n <div class=\"drawer-row drawer-row--sub\" (click)=\"redirectionsOfMenu(child)\" data-bs-dismiss=\"offcanvas\">\n <img *ngIf=\"child?.logoUrl\" [src]=\"child?.logoUrl\" [alt]=\"child?.label\" class=\"mega-menu-child-logo\" />\n <span class=\"drawer-row-label\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n </div>\n\n <div class=\"drawer-detail-grid\" *ngIf=\"child?.children?.length\">\n <div class=\"drawer-chip\" *ngFor=\"let sub of child?.children\" (click)=\"redirectionsOfMenu(sub)\"\n data-bs-dismiss=\"offcanvas\">\n {{sub?.label | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\n <img [src]=\"ele?.imageUrls[0]\" [alt]=\"ele?.categoryName\" class=\"br-12 mobile-category-image\">\n </div>\n <div class=\"text-center category-name\">{{ele?.categoryName}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerce_header>\n <header class=\"site-header\" [ngClass]=\"{\n 'ecom-header1': style?.styling === 'Header1',\n 'ecom-header2': style?.styling === 'Header2',\n 'ecom-header3': style?.styling === 'Header3',\n 'ecom-header4': style?.styling === 'Header4'\n }\">\n <!-- Top Bar: Logo, Search, User Actions -->\n <div class=\"top-bar\">\n\n <!-- Mobile Menu Toggle -->\n <div class=\"header-logo-area\" [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\n <!-- HAMBURGER -->\n <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.HAMBURGER\" for=\"mobile-menu-checkbox\"\n class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" aria-label=\"Toggle menu\" (click)=\"goBackMobileMenu()\">\n <svg *ngIf=\"!isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n </svg>\n <svg *ngIf=\"isOffcanvasOpen\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"18\" x2=\"18\" y2=\"6\"></line>\n </svg>\n </label>\n <!-- FULL SCREEN -->\n <label *ngIf=\"resolvedMobileMenuType === MobileMenuType.FULL_SCREEN\" class=\"mobile-menu-btn\"\n aria-label=\"Toggle menu\" (click)=\"openFullScreenMenu()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\n </svg>\n </label>\n\n <!-- Logo Section -->\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\n <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size + 15\"\n [height]=\"content?.logo?.size\">\n </a>\n\n <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n && content?.logo?.text?.isText \n && content?.logo?.text?.isIcon \n && content?.logo?.text?.url\">\n\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\n [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\n\n <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\n {{ content?.siteName?.value }}\n </span>\n </a>\n\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \n && content?.logo?.text?.isText \n && !content?.logo?.text?.isIcon\">\n\n <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\n {{ content?.siteName?.value }}\n </span>\n </a>\n </div>\n\n <!-- Search Bar -->\n <div class=\"search-wrapper\"\n *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\n <div class=\"search-bar\">\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </div>\n </div>\n\n <!-- Dropdown menu style -->\n <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\n (mouseleave)=\"showList = false; selectedCategory = null\">\n <div class=\"dd-nav-scroll\">\n <div class=\"dd-nav\">\n <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\">\n <button type=\"button\" class=\"dd-tab\"\n [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\n (click)=\"ele?.children?.length ? toggleChildMenu(ele, $event) : redirectionsOfMenu(ele)\">\n <span class=\"text-nowrap\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"simpoColor\">{{ele?.label | titlecase}}</span>\n <svg *ngIf=\"ele?.children?.length\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20px\" height=\"20px\"\n viewBox=\"0 0 24 24\" fill=\"none\" [simpoColor]=\"simpoColor\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n d=\"M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z\"\n fill=\"#000000\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory?.length\" (click)=\"$event.stopPropagation()\"\n [style.left.px]=\"dropdownLeft\" [style.top.px]=\"dropdownTop\">\n <div class=\"dd-item\" *ngFor=\"let child of selectedCategory\" [class.open-submenu]=\"openSubmenuChild === child\"\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : toggleSubMenu(child, $event)\">\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\n\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length && openSubmenuChild === child\"\n style=\"display: block;\">\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n <!-- Right Actions -->\n <div class=\"user-actions\">\n\n <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\n <a class=\"action-link icon-only dropdown-search-toggle\"\n (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\" aria-label=\"Toggle search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </a>\n </ng-container>\n\n <ng-container *ngIf=\"storeAvaiable\">\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n *ngIf=\"!getPincode\">\n <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <path\n d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\n fill=\"#000000\" />\n </svg> -->\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\n <g>\n <path\n d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\n </path>\n <path\n d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\n </path>\n </g>\n </svg>\n\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\n\n </a>\n\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\n <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\n <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\n <path d=\"M2 7h20\"></path>\n <path\n d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\n </path>\n </svg>\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\n getPincode}}</span>\n\n </a>\n\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n </ng-container>\n\n <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\n (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\n <!-- User Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n </svg>\n </a>\n\n <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\n <!-- User Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\n </svg>\n </a>\n\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n\n <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\n <!-- Heart Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path\n d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\n </path>\n </svg>\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getWishlistItemsCount\">{{getWishlistItemsCount}}</span>\n </a>\n\n <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\n <!-- Shopping Bag Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\n <path d=\"M3 6h18\"></path>\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\n </svg>\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\n </a>\n\n <a class=\"action-link icon-only icon-container bookings-icon\" (click)=\"goToBookings()\"\n *ngIf=\"appointmentSettings?.homeVisitProductsEnabled || appointmentSettings?.videoCallProductsEnabled\">\n <!-- Bookings (calendar-check) Icon SVG -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"4\" y=\"7.5\" width=\"16\" height=\"12.5\" rx=\"2\"></rect>\n <path d=\"M8 7.5V6a4 4 0 0 1 8 0v1.5\"></path>\n <path d=\"M9.2 13.6l1.9 1.9 3.7-3.9\"></path>\n </svg>\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\n *ngIf=\"getBookingItemsCount\">{{getBookingItemsCount}}</span>\n </a>\n\n <div class=\"dropdown-search-expand\"\n *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\n <div class=\"dropdown-search-box\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"dropdown-search-icon search-btn\" (click)=\"searchProducts()\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\"\n (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar\">\n <div class=\"search-bar\">\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\"\n (keydown.enter)=\"searchProducts()\" aria-label=\"Search\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"search-icon search-btn\" (click)=\"searchProducts()\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </div>\n </div>\n\n </header>\n</ng-template>\n\n<ng-template #fullScreenMenuTemplate>\n <div class=\"fs-menu\">\n <div class=\"fs-menu-bg\" [simpoBackground]=\"backgroundInfo\"></div>\n <div class=\"fs-menu-inner\">\n <div class=\"fs-menu-head\">\n <div class=\"fs-menu-logo\" (click)=\"closeFullScreenMenu()\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n </div>\n <button class=\"fs-menu-close\" (click)=\"closeFullScreenMenu()\" aria-label=\"Close menu\">\n <mat-icon [simpoColor]=\"simpoColor\">close</mat-icon>\n </button>\n </div>\n <!-- Main level -->\n <nav class=\"fs-menu-nav\" *ngIf=\"!selectedMobileMenu\">\n <ng-container *ngFor=\"let item of footerMenu\">\n <ng-container *ngIf=\"item.showHeader\">\n <a class=\"fs-menu-link\" [class.active]=\"isNavItemActive(item)\" [style.--accent]=\"accentColor\"\n (click)=\"onFullScreenItemClick(item)\">\n <span class=\"fs-menu-dot\" [style.background]=\"accentColor\"></span>\n <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ item?.label | titlecase }}</span>\n <mat-icon class=\"fs-menu-arrow\" *ngIf=\"item?.children?.length\"\n [simpoColor]=\"simpoColor\">chevron_right</mat-icon>\n </a>\n </ng-container>\n </ng-container>\n </nav>\n\n <!-- Submenu (drill-in) level -->\n <nav class=\"fs-menu-nav fs-menu-sub\" *ngIf=\"selectedMobileMenu\">\n <button class=\"fs-menu-back\" (click)=\"goBackMobileMenu()\">\n <mat-icon [simpoColor]=\"simpoColor\">chevron_left</mat-icon>\n <span [simpoColor]=\"simpoColor\">{{ selectedMobileMenu?.label | titlecase }}</span>\n </button>\n <ng-container *ngFor=\"let child of selectedMobileMenu?.children\">\n <a class=\"fs-menu-link\" [style.--accent]=\"accentColor\"\n (click)=\"redirectionsOfMenu(child); closeFullScreenMenu()\">\n <span class=\"fs-menu-text\" [simpoColor]=\"simpoColor\">{{ child?.label | titlecase }}</span>\n </a>\n <a class=\"fs-menu-sublink\" *ngFor=\"let sub of child?.children\" [simpoColor]=\"simpoColor\"\n (click)=\"redirectionsOfMenu(sub); closeFullScreenMenu()\">{{ sub?.label | titlecase }}</a>\n </ng-container>\n </nav>\n <div class=\"fs-menu-cta\" *ngIf=\"action?.display && action?.buttons?.length\">\n <ng-container *ngFor=\"let button of action?.buttons | slice:0:1\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\" [isFullWidth]=\"true\"></app-button-element>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #bottomStickyNavTemplate>\n <nav class=\"bs-nav\">\n <div class=\"bs-nav-bar\" [simpoBackground]=\"backgroundInfo\">\n <button class=\"bs-tab\" *ngFor=\"let item of bottomStickyNavItems; let i = index\"\n [class.active]=\"i === activeBottomNavIndex\" (click)=\"redirectionsOfMenu(item)\">\n <span class=\"bs-tab-label\" [style.color]=\"i === activeBottomNavIndex ? accentColor : null\"\n [simpoColor]=\"i === activeBottomNavIndex ? null : simpoColor\">{{ item?.label | titlecase }}</span>\n </button>\n </div>\n </nav>\n</ng-template>", styles: [".total-container div[simpoSticky]:not(.header--scrolled){top:0!important;left:0!important;right:0!important;margin:0 auto!important;width:100%!important}.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:20%!important;right:20%!important;width:60%!important;overflow:hidden!important;border-radius:60px!important;box-shadow:0 10px 40px #0000001f!important;z-index:1000001!important;transition:width .4s cubic-bezier(.16,1,.3,1)}.total-container div[simpoSticky].header--scrolled.dropdown-open,.header--scrolled.dropdown-open{overflow:visible!important}@media screen and (max-width: 475px){.total-container div[simpoSticky].header--scrolled,.header--scrolled{top:10px!important;left:5%!important;right:5%!important;width:90%!important}}.simpo-transparent-type{transition:background-color .3s ease!important}@keyframes simpo-slide-down{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.simpo-sticky-revealed{animation:simpo-slide-down .3s cubic-bezier(.16,1,.3,1) forwards;box-shadow:0 2px 12px #0000001f}.w-40{width:40%!important}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.category-name{text-transform:uppercase;white-space:normal;word-break:break-word;line-height:1.2;font-size:11px;letter-spacing:.4px;text-align:center;max-width:90px}.margin-bottom{margin-bottom:var(--margin-top, 0px)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top, 0px)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important;width:100%;max-width:100%;overflow-x:visible;overflow-y:visible}.page-links-nav{flex-direction:column;align-items:flex-start;padding-bottom:0;margin-bottom:0;overflow-x:visible}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#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;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.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:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}.pageLinks{width:100%!important;max-width:100%!important}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:75%;z-index:1000000000}@media screen and (max-width: 475px){.offcanvas{top:0!important;height:100vh!important;height:100dvh!important;width:100%;display:flex;flex-direction:column}.offcanvas-body{flex:1 1 auto;height:auto}.offcanvas-footer{height:auto}}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.mobileLoginButton{width:100%;height:40px;border-radius:8px;outline:none;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.pageLinks{display:flex;flex-direction:row;width:50%;max-width:50%;overflow:visible}.pageLinks .dropdown-menu{z-index:1010}.page-links-nav{display:flex;align-items:center;gap:15px;width:100%;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;padding-bottom:220px;margin-bottom:-220px;scrollbar-width:none}.page-links-nav::-webkit-scrollbar{display:none}.category-btn{font-size:16px!important}.h-70{height:70px}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:auto;max-height:50vh;overflow-y:auto;position:absolute;width:100%;z-index:1001}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.dropdown_menu_static{position:relative}.dropdown_menu{position:relative;width:55%;max-width:55%;min-width:420px;display:flex;justify-content:center;margin:0 auto}.dropdown_menu_static .dropdown_menu{position:relative;min-width:420px;max-width:55%;display:flex;justify-content:center}.dd-nav-scroll{width:100%;overflow-x:auto;overflow-y:visible;scrollbar-width:none}.dd-nav-scroll::-webkit-scrollbar{display:none}.dd-nav{display:inline-flex;align-items:flex-start;gap:18px;flex-wrap:nowrap;padding-top:5px;pointer-events:auto}.dd-tab-wrap{position:relative;display:inline-flex;pointer-events:auto}.dd-tab{border:none;background:transparent;padding:6px 2px;font-size:15px;font-weight:500;color:#30343b;line-height:1;border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:8px}.dd-tab:hover,.dd-tab.dd-tab-active{border-bottom-color:#2f3338}.dd-panel{position:absolute;top:100%;left:0;background:#fff;border:1px solid #ececef;padding:14px 0;z-index:1006;min-width:220px}.dd-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;font-size:16px;color:#2c2f35;transition:background-color .2s ease;cursor:pointer}.dd-item:hover{background-color:#f5f6f8}.dd-item-arrow{font-size:20px;line-height:1;color:#5a5f66}.dd-submenu{position:absolute;top:-10px;left:calc(100% + 3px);background:#fff;border:1px solid #ececef;box-shadow:0 10px 26px #1d212926;padding:10px 0;display:none;z-index:1007}.dd-item:hover .dd-submenu{display:block}.dd-sub-item{padding:10px 16px;font-size:15px;color:#2c2f35;transition:background-color .2s ease}.dd-sub-item:hover{background-color:#f5f6f8}.dropdown-search-toggle{cursor:pointer}.dropdown-search-expand{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;z-index:1010}.dropdown-search-box{width:100%;background:#f3f3f3;border:1px solid #e7e7e7;display:flex;align-items:center;gap:12px;padding:10px 14px}.dropdown-search-icon{color:#1f2328;flex:0 0 auto}.dropdown-search-box input{border:none;background:transparent;width:100%;font-size:14px;color:#2f3338;outline:none}.dropdown-search-close{color:#545861;cursor:pointer;flex:0 0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-btn{cursor:pointer;flex-shrink:0}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;padding:0 8px;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:100}.categories-wrapper .categories-header{border-top:1px solid rgba(0,0,0,.1)}.categories-header{gap:26px!important;overflow-x:auto;margin:8px 8px 0;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top, 0px);left:0;width:100vw;height:calc(100vh - var(--margin-top, 0px));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:auto;max-height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow-x:hidden;overflow-y:auto}.mega-menu-scroll-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.mega-menu-scroll-col{flex-shrink:0}.mega-menu-scroll-col.has-right-border{border-right:1px solid #e9e7e7}.collectionImage{border-radius:10px;height:70%!important}@media screen and (min-width: 476px){.list-category .mobile-submenu-card{aspect-ratio:4 / 3;overflow:hidden}.list-category .mobile-submenu-image.collectionImage{width:100%;height:100%!important;object-fit:cover;display:block}}.list-item>div{color:#585858}.list-item>div:hover{color:#000}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px;height:auto;max-height:36vh;overflow-y:auto}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}.mobile-menu-container{height:100%;overflow-y:auto}.mobile-menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mobile-menu-item{display:flex;align-items:center;justify-content:space-between;background:#f5f5f5;border-radius:8px;padding:14px;cursor:pointer;transition:background-color .2s ease}.mobile-menu-item:active{background:#ebebeb}.mobile-menu-label{font-size:11px;letter-spacing:.5px;color:#1a1a1a;line-height:1.3}.mobile-menu-arrow{font-size:18px!important;width:18px!important;height:18px!important;color:#999;flex-shrink:0}.mobile-menu-detail{padding:0}.mobile-menu-back{display:flex;align-items:center;gap:4px;padding:14px 0;cursor:pointer;font-size:16px;color:#1a1a1a}.mobile-menu-back mat-icon{font-size:22px!important;width:22px!important;height:22px!important;color:#1a1a1a!important}.mobile-submenu-sections{overflow-y:auto}.mobile-submenu-section{margin-bottom:20px}.mobile-submenu-card{position:relative;border-radius:12px;overflow:hidden;cursor:pointer}.mobile-submenu-image{display:block;width:100%;height:auto!important}.mobile-submenu-caption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:14px;font-weight:700;letter-spacing:.6px;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5);background:linear-gradient(180deg,#0000,#0009)}.mobile-submenu-header{font-size:14px;font-weight:700;letter-spacing:.5px;color:#1a1a1a;margin-bottom:12px;cursor:pointer}.mobile-submenu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mobile-submenu-item{background:#f5f5f5;border-radius:8px;padding:10px 14px;font-size:12px;font-weight:400;color:#333;cursor:pointer;text-align:center;transition:background-color .2s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-submenu-item:active{background:#ebebeb}.mobile-category-image{border-radius:50%;height:11vh;width:11vh;object-fit:cover}.drawer-topbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.06);flex:0 0 auto}.drawer-logo{flex:1 1 auto;display:flex;justify-content:flex-start;align-items:center;max-height:38px;overflow:hidden}.drawer-logo img{max-height:38px;width:auto}.drawer-close-btn{position:absolute;top:8px;right:8px;z-index:3;flex:none;background:#fff;border:1px solid rgba(0,0,0,.1);box-shadow:0 2px 8px #00000024;cursor:pointer;width:30px!important;min-width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .18s ease}.drawer-close-btn:active{background:#0000000f}.drawer-close-btn mat-icon{color:#1a1a1a;font-size:22px;height:22px;width:22px}.drawer-body{flex:1 1 auto;overflow-y:auto;padding:4px 8px 8px}.drawer-rows{display:flex;flex-direction:column}.drawer-row{display:flex;align-items:center;gap:14px;padding:14px 12px;border-radius:12px;cursor:pointer;transition:background-color .18s ease}.drawer-row:active,.drawer-row:hover{background:#0000000b}.drawer-row+.drawer-row{border-top:1px solid rgba(0,0,0,.05)}.drawer-row-icon{font-size:22px;height:22px;width:22px;flex:0 0 auto}.drawer-row-label{flex:1 1 auto;font-size:15px;font-weight:500;line-height:1.2}.drawer-row-chevron{font-size:20px;height:20px;width:20px;flex:0 0 auto;opacity:.55}.drawer-row--sub .drawer-row-label{font-weight:600}.drawer-detail{padding:4px 4px 8px}.drawer-detail-back{display:flex;align-items:center;gap:6px;padding:10px 8px;cursor:pointer;font-size:16px;font-weight:600}.drawer-detail-back mat-icon{font-size:24px;height:24px;width:24px}.drawer-detail-section{margin-bottom:18px}.drawer-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:6px 12px 0}.drawer-chip{background:#0000000a;border-radius:10px;padding:10px 12px;font-size:13px;color:#333;text-align:center;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .18s ease}.drawer-chip:active{background:#00000014}.drawer-footer{flex:0 0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}.drawer-divider{height:1px;width:100%;opacity:.35;margin-bottom:14px}.drawer-actions{display:flex;flex-direction:column;gap:10px}.drawer-action,.drawer-action app-button-element,.drawer-action .button{width:100%}.drawer-action .button{justify-content:center}.fs-menu{position:fixed;inset:0;z-index:1000000;display:grid;grid-template-areas:\"stack\";overflow:hidden;animation:fsMenuFade .28s cubic-bezier(.16,1,.3,1) both}.fs-menu-bg{grid-area:stack;width:100%;height:100%;z-index:0}.fs-menu-inner{grid-area:stack;position:relative;z-index:1;display:flex;flex-direction:column;max-width:560px;margin:0 auto;width:100%;height:100%;min-height:0;padding:18px 24px calc(18px + env(safe-area-inset-bottom));overflow:hidden}.fs-menu-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-bottom:10px}.fs-menu-logo{display:flex;align-items:center;max-height:44px;overflow:hidden;cursor:pointer}.fs-menu-logo img{max-height:42px;width:auto!important}@keyframes fsMenuFade{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}.fs-menu-close{flex:none;width:40px!important;min-width:40px;height:40px;border-radius:50%;background:#7f7f7f24;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .2s ease}.fs-menu-close:hover{background:#7f7f7f3d}.fs-menu-close mat-icon{font-size:24px;height:24px;width:24px}.fs-menu-nav{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;margin-bottom:16px}.fs-menu-link{position:relative;display:flex;align-items:center;gap:12px;padding:13px 4px;cursor:pointer;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent, #888) 10%,transparent);animation:fsLinkIn .45s cubic-bezier(.16,1,.3,1) both}.fs-menu-link:nth-child(1){animation-delay:.05s}.fs-menu-link:nth-child(2){animation-delay:.1s}.fs-menu-link:nth-child(3){animation-delay:.15s}.fs-menu-link:nth-child(4){animation-delay:.2s}.fs-menu-link:nth-child(5){animation-delay:.25s}.fs-menu-link:nth-child(6){animation-delay:.3s}@keyframes fsLinkIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.fs-menu-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .2s ease}.fs-menu-link:hover .fs-menu-dot,.fs-menu-link.active .fs-menu-dot{opacity:1;transform:scale(1)}.fs-menu-text{font-size:clamp(1rem,5vw,1.6rem);font-weight:600;letter-spacing:-.3px;line-height:1.1;transition:transform .2s ease,opacity .2s ease}.fs-menu-link:hover .fs-menu-text{transform:translate(6px);opacity:.85}.fs-menu-arrow{margin-left:auto;flex:0 0 auto;font-size:22px;height:22px;width:22px;opacity:.55}.fs-menu-back{display:flex;align-items:center;gap:6px;background:transparent;border:none;cursor:pointer;padding:6px 0 14px;width:auto!important;font-size:15px;font-weight:600;opacity:.85}.fs-menu-back mat-icon{font-size:26px;height:26px;width:26px}.fs-menu-sublink{display:block;padding:9px 4px 9px 18px;font-size:1rem;font-weight:400;text-decoration:none;cursor:pointer;opacity:.78;border-bottom:1px solid color-mix(in srgb,var(--accent, #888) 16%,transparent);transition:opacity .2s ease,transform .2s ease}.fs-menu-sublink:hover{opacity:1;transform:translate(5px)}.fs-menu-cta{flex:0 0 auto;padding-top:4px}.fs-menu-cta app-button-element,.fs-menu-cta .button{width:100%;justify-content:center}.bs-nav{position:fixed;left:0;right:0;bottom:0;z-index:10001;pointer-events:none}.bs-nav-bar{pointer-events:auto;display:flex;align-items:stretch;justify-content:space-around;height:64px;padding-bottom:env(safe-area-inset-bottom);border-radius:18px 18px 0 0;box-shadow:0 -4px 20px #0000001f}.bs-tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent;border:none;cursor:pointer;padding:8px 4px;transition:transform .15s ease}.bs-tab:active{transform:translateY(1px)}.bs-tab-icon{font-size:23px;height:23px;width:23px;transition:color .2s ease}.bs-tab-label{font-size:10.5px;font-weight:500;letter-spacing:.2px;line-height:1;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}.bs-tab.active .bs-tab-label{font-weight:700}@media screen and (max-width: 475px){body{padding-bottom:var(--bottom-nav-height, 0px)}}@media (min-width: 476px){.site-header.ecom-header2 .top-bar,.site-header.ecom-header4 .top-bar{flex-direction:row-reverse}}.mega-menu-child-logo{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}.mega-menu-child-desc{font-size:11px;color:#999;margin-top:2px;line-height:1.3}\n"] }]
17981
18009
  }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i3$2.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }, { type: undefined, decorators: [{
17982
18010
  type: Inject,
17983
18011
  args: [LOCAL_STORAGE]