simpo-component-library 3.6.440 → 3.6.442

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 (7) hide show
  1. package/esm2022/lib/sections/header-section/header-section.component.mjs +57 -125
  2. package/fesm2022/simpo-component-library.mjs +42 -122
  3. package/fesm2022/simpo-component-library.mjs.map +1 -1
  4. package/lib/sections/header-section/header-section.component.d.ts +3 -16
  5. package/package.json +1 -1
  6. package/simpo-component-library-3.6.442.tgz +0 -0
  7. package/simpo-component-library-3.6.440.tgz +0 -0
package/fesm2022/simpo-component-library.mjs CHANGED
@@ -14299,9 +14299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
14299
14299
 
14300
14300
  class HeaderSectionComponent {
14301
14301
  // matDialog = inject(MatDialog);
14302
- constructor(_eventService, router, activatedRoute, matDialog, storageService, restService, eventService, storage
14303
- // private cdRef: ChangeDetectorRef
14304
- ) {
14302
+ constructor(_eventService, router, activatedRoute, matDialog, storageService, restService, eventService) {
14305
14303
  this._eventService = _eventService;
14306
14304
  this.router = router;
14307
14305
  this.activatedRoute = activatedRoute;
@@ -14309,7 +14307,6 @@ class HeaderSectionComponent {
14309
14307
  this.storageService = storageService;
14310
14308
  this.restService = restService;
14311
14309
  this.eventService = eventService;
14312
- this.storage = storage;
14313
14310
  this.edit = false;
14314
14311
  this.scrollValue = 0;
14315
14312
  this.color = '#000000';
@@ -14330,49 +14327,7 @@ class HeaderSectionComponent {
14330
14327
  this.storeAvaiable = false;
14331
14328
  this.schemeAvailable = false;
14332
14329
  this.Object = Object;
14333
- this.showPincodeInput = false;
14334
- this.pincode = this.storage.getItem('pincode') ?? "";
14335
- this.getPincode = this.storage.getItem('pincode') || '';
14336
- this.pinError = false;
14337
- this.showLogin = false;
14338
- this.byMetalAndStone = [
14339
- {
14340
- name: 'Gold',
14341
- imageUrl: 'https://cdn.caratlane.com/media/static/images/web/menu/22kt-Gold-2x.png',
14342
- status: false
14343
- },
14344
- {
14345
- name: 'Diamond',
14346
- imageUrl: 'https://cdn.caratlane.com/media/static/images/web/menu/Diamond-1x.png',
14347
- status: false
14348
- },
14349
- {
14350
- name: 'Pearl',
14351
- imageUrl: 'https://cdn.caratlane.com/static/images/discovery/responsive-hamburger-menu/products-and-services/pearl-1x.png',
14352
- status: false
14353
- },
14354
- {
14355
- name: 'Gemstone',
14356
- imageUrl: 'https://cdn.caratlane.com/media/static/images/web/menu/Gemstone-1x.png',
14357
- status: false
14358
- },
14359
- {
14360
- name: 'Yellow Gold',
14361
- imageUrl: 'https://cdn.caratlane.com/media/static/images/web/menu/Yellow-Gold-1x.png',
14362
- status: false
14363
- },
14364
- {
14365
- name: 'Rose Gold',
14366
- imageUrl: 'https://cdn.caratlane.com/media/static/images/web/menu/Rose-Gold-1x.png',
14367
- status: false
14368
- },
14369
- {
14370
- name: 'White Gold',
14371
- imageUrl: 'https://cdn.caratlane.com/media/static/images/web/menu/white-Gold-1x.png',
14372
- status: false
14373
- }
14374
- ];
14375
- // this.getScreenSize();
14330
+ this.getScreenSize();
14376
14331
  this.storageService.updateAllData();
14377
14332
  }
14378
14333
  waitBeforeSearch() {
@@ -14428,7 +14383,6 @@ class HeaderSectionComponent {
14428
14383
  this.isScrolled = window.scrollY > 50;
14429
14384
  }
14430
14385
  ngOnInit() {
14431
- console.log('222,this is the first step');
14432
14386
  this.content = this.data?.content;
14433
14387
  this.style = this.data?.styles;
14434
14388
  this.action = this.data?.action;
@@ -14441,36 +14395,35 @@ class HeaderSectionComponent {
14441
14395
  if (this.isEcommerceWebsite) {
14442
14396
  this.getCategoriesHeader();
14443
14397
  }
14444
- // setTimeout(() => {
14445
- // this.getParentHeight()
14446
- // }, 3000)
14398
+ setTimeout(() => {
14399
+ this.getParentHeight();
14400
+ }, 3000);
14447
14401
  this.checkPassbookApp();
14448
14402
  }
14449
14403
  ngAfterViewInit() {
14450
14404
  this.resizeObserver = new ResizeObserver(() => {
14451
- // setTimeout(() => {
14452
- // this.getParentHeight()
14453
- // }, 1000)
14405
+ setTimeout(() => {
14406
+ this.getParentHeight();
14407
+ }, 1000);
14454
14408
  });
14455
- console.log('111');
14456
14409
  this.resizeObserver.observe(this.childContainer.nativeElement);
14457
14410
  }
14458
14411
  checkPassbookApp() {
14459
- const details = this.storage.getItem('bId');
14460
- const bId = details ?? '';
14461
- this.restService.PassbookAppStatus(bId).subscribe((res) => {
14412
+ this.restService.PassbookAppStatus(localStorage.getItem('bId')).subscribe((res) => {
14462
14413
  if (res?.data) {
14463
14414
  this.passbookAppStatus = true;
14464
14415
  }
14465
14416
  });
14466
- console.log('333,this is passbook');
14467
14417
  }
14468
- // getParentHeight() {
14469
- // this.height = this.childContainer?.nativeElement?.scrollHeight;
14470
- // if (this.nextComponent?.styles?.merge)
14471
- // this.eventService.elementHeight.emit(this.height)
14472
- // document.documentElement.style.setProperty("--margin-top", this.height + "px")
14473
- // }
14418
+ getScreenSize(event) {
14419
+ this.screenWidth = window.innerWidth;
14420
+ }
14421
+ getParentHeight() {
14422
+ this.height = this.childContainer?.nativeElement?.scrollHeight;
14423
+ if (this.nextComponent?.styles?.merge)
14424
+ this.eventService.elementHeight.emit(this.height);
14425
+ document.documentElement.style.setProperty("--margin-top", this.height + "px");
14426
+ }
14474
14427
  get getDropdownLinks() {
14475
14428
  if (this.content?.ecomlinks && this.isEcommerceWebsite)
14476
14429
  return Object.keys(this.content?.ecomlinks);
@@ -14486,7 +14439,7 @@ class HeaderSectionComponent {
14486
14439
  this.showEditors = isShow;
14487
14440
  }
14488
14441
  goToHome() {
14489
- if (this.storage.getItem('REQUEST_FROM') === 'E_COMMERCE')
14442
+ if (localStorage.getItem('REQUEST_FROM') === 'E_COMMERCE')
14490
14443
  return;
14491
14444
  this.router.navigate(['']);
14492
14445
  }
@@ -14495,7 +14448,7 @@ class HeaderSectionComponent {
14495
14448
  }
14496
14449
  get backgroundInfo() {
14497
14450
  let background = {};
14498
- // this.getParentHeight();
14451
+ this.getParentHeight();
14499
14452
  return this.nextComponent?.styles?.merge && this.scrollValue == 0 && !this.isMobile ? { ...this.nextComponent.styles.background } : { ...this.data?.styles.background };
14500
14453
  }
14501
14454
  get simpoColor() {
@@ -14515,9 +14468,9 @@ class HeaderSectionComponent {
14515
14468
  }
14516
14469
  editSection() {
14517
14470
  this._eventService.toggleEditorEvent.emit(false);
14518
- // setTimeout(() => {
14519
- // this._eventService.editSection.emit({ data: this.data });
14520
- // }, 100);
14471
+ setTimeout(() => {
14472
+ this._eventService.editSection.emit({ data: this.data });
14473
+ }, 100);
14521
14474
  }
14522
14475
  get canShowMobileFooter() {
14523
14476
  return this.isEcommerceWebsite;
@@ -14583,48 +14536,8 @@ class HeaderSectionComponent {
14583
14536
  goToStores() {
14584
14537
  this.router.navigate(['/stores']);
14585
14538
  }
14586
- applyFilterToList(obj, type) {
14587
- if (type == 'price') {
14588
- this.router.navigate(['/list'], { queryParams: { category: this.selectedCategory?.categoryName, minPrice: obj?.minPrice, maxPrice: obj?.maxPrice, pageNo: 1 } });
14589
- }
14590
- if (type == 'collection') {
14591
- this.router.navigate(['/list'], { queryParams: { category: this.selectedCategory?.categoryName, collections: obj?.replaceAll(" ", '_'), pageNo: 1 } });
14592
- }
14593
- if (type == 'collections') {
14594
- this.router.navigate(['/list'], { queryParams: { collections: obj?.replaceAll(" ", '_'), pageNo: 1 } });
14595
- }
14596
- }
14597
- filterByCategory() {
14598
- this.router.navigate(['/list'], { queryParams: { category: this.selectedCategory?.categoryName, pageNo: 1 } });
14599
- }
14600
- setPincode() {
14601
- if (this.pincode && this.pincode?.length == 6) {
14602
- this.storage.setItem('pincode', this.pincode);
14603
- this.getPincode = this.storage.getItem('pincode') || '';
14604
- this.pinError = false;
14605
- }
14606
- else {
14607
- this.pinError = true;
14608
- }
14609
- }
14610
- goToSchemes() {
14611
- this.router.navigate(['/scheme-enrollment']);
14612
- }
14613
- getRGBA(bgColor, opacity) {
14614
- const r = parseInt(bgColor.slice(1, 3), 16);
14615
- const g = parseInt(bgColor.slice(3, 5), 16);
14616
- const b = parseInt(bgColor.slice(5, 7), 16);
14617
- return `rgba(${r}, ${g}, ${b}, ${opacity / 100})`;
14618
- }
14619
- showCategoryMobileHeader() {
14620
- const pathname = window.location.pathname;
14621
- return pathname.includes('/list') || pathname === '/' || pathname === '';
14622
- }
14623
- navigateLogin() {
14624
- this.router.navigate(['/login']);
14625
- }
14626
- 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: i1$1.MatDialog }, { token: StorageServiceService }, { token: RestService }, { token: EventsService }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Component }); }
14627
- 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:scroll": "onScroll($event)", "window:resize": "height($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], 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]=\"isHeaderSticky && isEcommerceWebsite && isMobile\">\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\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 <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" 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 <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\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 *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\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 <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\">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 <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </div>\n <div class=\"text-end\">\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>\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 <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n <mat-icon [simpoColor]=\"simpoColor\">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 <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </div>\n <div class=\"text-end\">\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\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\n (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\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{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\"\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (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 <div class=\"d-flex gap-3\"\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\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\" [accentColor]=\"accentColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n </div>\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 category-btn\" type=\"button\"\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | lowercase | titlecase}}\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\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 && !loggedIn\" [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\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\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>\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\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo.background?.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=\"schemeAvailable\">\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>\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<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n <div class=\"offcanvas-header\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\n </div>\n <div class=\"offcanvas-body\">\n <div class=\"pages\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"offcanvas-footer\">\n <div class=\"canvas-button\">\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #ecomProfileTemplate>\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 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 [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{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-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\n {{ele?.categoryName | titlecase}}\n </div>\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"data?.styles?.headline?.color\">\n Collections\n </div>\n </div>\n <!-- (mouseleave)=\"showList = false\" -->\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\n <div class=\"list-header mb-3\">By Price</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\n <div class=\"each-price cursor-pointer\"\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\n {{price | titlecase}}\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4 h-100 overflow-scroll\"\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\n <div class=\"list-header mb-3\">By Style</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\n |\n titlecase}}</div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\n <div class=\"list-header mb-3\">By Metal & Stone</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\n <div class=\"d-flex gap-2 align-items-center\">\n <div style=\"width: 15px;height: 20px;\">\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"each-price cursor-pointer\">{{collection.name\n |\n titlecase}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- (mouseleave)=\"showCollections = false\" -->\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\n <div class=\"collection row col-3 align-items-center\"\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\n <div class=\"col-imag col-4\">\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"col-8 text-overflow\">\n {{collection?.collectionName | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\n (click)=\"applyFilterToList(image, 'collections')\">\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\n <div class=\"text-center p-2 btm-col-name position-absolute\"\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\n </div>\n </ng-container>\n </div>\n </div>\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\">\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\">\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\n </div>\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\n </div>\n </div>\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.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:max-content!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{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.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}.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}}.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:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.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:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.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:8px}.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:130%;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:-15px;top:130%;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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { 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: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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"] }, { 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"] }] }); }
14539
+ 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: i1$1.MatDialog }, { token: StorageServiceService }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
14540
+ 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:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], 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]=\"isHeaderSticky && isEcommerceWebsite && isMobile\">\n <!-- <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\" -->\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\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 <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" 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 <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\n <ng-container *ngTemplateOutlet=\"null\"></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 *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\"> -->\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile \">\n <ng-container *ngTemplateOutlet=\"null\"></ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? null : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\">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 ? null : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </div>\n <div class=\"text-end\">\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>\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 ? null : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n <mat-icon [simpoColor]=\"simpoColor\">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 ? null : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container> </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </div>\n <div class=\"text-end\">\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\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\n (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\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{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\"\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (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 <div class=\"d-flex gap-3\"\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\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\" [accentColor]=\"accentColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n </div>\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 category-btn\" type=\"button\"\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | lowercase | titlecase}}\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\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 && !loggedIn\" [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\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\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>\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=\"w-75 d-flex align-items-center\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo.background?.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=\"schemeAvailable\">\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 <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>\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>\n </div>\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 <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</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<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n <div class=\"offcanvas-header\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\n </div>\n <div class=\"offcanvas-body\">\n <div class=\"pages\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"offcanvas-footer\">\n <div class=\"canvas-button\">\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #ecomProfileTemplate>\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 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 [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{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", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.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:max-content!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{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.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}.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}}.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:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.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:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.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:8px}.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:130%;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:-15px;top:130%;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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { 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: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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"] }, { 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"] }] }); }
14628
14541
  }
14629
14542
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
14630
14543
  type: Component,
@@ -14632,15 +14545,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
14632
14545
  CommonModule,
14633
14546
  SimpoButtonComponent,
14634
14547
  GenderIcon,
14548
+ CartComponent,
14549
+ SociaIconsComponent,
14635
14550
  MatIcon,
14636
14551
  NavbarButtonElementComponent,
14637
14552
  FormsModule,
14638
14553
  HoverElementsComponent,
14554
+ AnimationDirective,
14639
14555
  BackgroundDirective,
14556
+ BannerContentFitDirective,
14557
+ BorderDirective,
14558
+ ButtonDirectiveDirective,
14559
+ ColumnDirectiveDirective,
14560
+ ContainerFitDirective,
14561
+ simpoConetenAlignmentDirective,
14640
14562
  ContentFitDirective,
14563
+ CornerDirective,
14564
+ SimpoFooterLayoutDirective,
14641
14565
  HoverDirective,
14566
+ ImageDirectiveDirective,
14642
14567
  OverlayDirective,
14643
14568
  SimpoStickyDirective,
14569
+ PositionLayoutDirectiveDirective,
14570
+ TextBackgroundDirectiveDirective,
14644
14571
  ColorDirective,
14645
14572
  MatBottomSheetModule,
14646
14573
  MatButtonModule,
@@ -14648,11 +14575,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
14648
14575
  SpacingHorizontalDirective,
14649
14576
  MovingTextComponent,
14650
14577
  ContentFitDirective,
14651
- ], 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]=\"isHeaderSticky && isEcommerceWebsite && isMobile\">\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\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 <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" 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 <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\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 *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\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 <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\">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 <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </div>\n <div class=\"text-end\">\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>\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 <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n <mat-icon [simpoColor]=\"simpoColor\">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 <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </div>\n <div class=\"text-end\">\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\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\n (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\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{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\"\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (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 <div class=\"d-flex gap-3\"\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\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\" [accentColor]=\"accentColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n </div>\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 category-btn\" type=\"button\"\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | lowercase | titlecase}}\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\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 && !loggedIn\" [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\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\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>\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\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo.background?.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=\"schemeAvailable\">\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>\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<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n <div class=\"offcanvas-header\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\n </div>\n <div class=\"offcanvas-body\">\n <div class=\"pages\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"offcanvas-footer\">\n <div class=\"canvas-button\">\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #ecomProfileTemplate>\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 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 [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{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-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\n {{ele?.categoryName | titlecase}}\n </div>\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"data?.styles?.headline?.color\">\n Collections\n </div>\n </div>\n <!-- (mouseleave)=\"showList = false\" -->\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\n <div class=\"list-header mb-3\">By Price</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\n <div class=\"each-price cursor-pointer\"\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\n {{price | titlecase}}\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4 h-100 overflow-scroll\"\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\n <div class=\"list-header mb-3\">By Style</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\n |\n titlecase}}</div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\n <div class=\"list-header mb-3\">By Metal & Stone</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\n <div class=\"d-flex gap-2 align-items-center\">\n <div style=\"width: 15px;height: 20px;\">\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"each-price cursor-pointer\">{{collection.name\n |\n titlecase}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- (mouseleave)=\"showCollections = false\" -->\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\n <div class=\"collection row col-3 align-items-center\"\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\n <div class=\"col-imag col-4\">\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"col-8 text-overflow\">\n {{collection?.collectionName | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\n (click)=\"applyFilterToList(image, 'collections')\">\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\n <div class=\"text-center p-2 btm-col-name position-absolute\"\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\n </div>\n </ng-container>\n </div>\n </div>\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\">\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\">\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\n </div>\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\n </div>\n </div>\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.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:max-content!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{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.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}.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}}.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:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.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:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.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:8px}.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:130%;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:-15px;top:130%;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}\n"] }]
14652
- }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }, { type: undefined, decorators: [{
14653
- type: Inject,
14654
- args: [LOCAL_STORAGE]
14655
- }] }], propDecorators: { data: [{
14578
+ ], 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]=\"isHeaderSticky && isEcommerceWebsite && isMobile\">\n <!-- <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\" -->\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\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 <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" 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 <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\n <ng-container *ngTemplateOutlet=\"null\"></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 *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\"> -->\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile \">\n <ng-container *ngTemplateOutlet=\"null\"></ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? null : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\">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 ? null : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </div>\n <div class=\"text-end\">\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>\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 ? null : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n <mat-icon [simpoColor]=\"simpoColor\">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 ? null : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container> </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </div>\n <div class=\"text-end\">\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\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\n (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\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{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\"\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (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 <div class=\"d-flex gap-3\"\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\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\" [accentColor]=\"accentColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n </div>\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 category-btn\" type=\"button\"\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | lowercase | titlecase}}\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\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 && !loggedIn\" [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\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\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>\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=\"w-75 d-flex align-items-center\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo.background?.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=\"schemeAvailable\">\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 <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>\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>\n </div>\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 <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</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<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n <div class=\"offcanvas-header\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\n </div>\n <div class=\"offcanvas-body\">\n <div class=\"pages\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"offcanvas-footer\">\n <div class=\"canvas-button\">\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #ecomProfileTemplate>\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 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 [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{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", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.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:max-content!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{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.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}.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}}.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:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.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:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.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:8px}.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:130%;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:-15px;top:130%;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}\n"] }]
14579
+ }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }], propDecorators: { data: [{
14656
14580
  type: Input
14657
14581
  }], nextComponent: [{
14658
14582
  type: Input
@@ -14668,11 +14592,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
14668
14592
  }], onScroll: [{
14669
14593
  type: HostListener,
14670
14594
  args: ['window:scroll', ['$event']]
14671
- }],
14672
- // getScreenSize(event?: number) {
14673
- // this.screenWidth = window.innerWidth;
14674
- // }
14675
- height: [{
14595
+ }], getScreenSize: [{
14676
14596
  type: HostListener,
14677
14597
  args: ['window:resize', ['$event']]
14678
14598
  }] } });