simpo-component-library 3.6.812 → 3.6.813

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 (25) hide show
  1. package/esm2022/lib/sections/header-section/header-section.component.mjs +3 -3
  2. package/fesm2022/simpo-component-library.mjs +2 -2
  3. package/fesm2022/simpo-component-library.mjs.map +1 -1
  4. package/lib/components/input-fields/input-fields.component.d.ts +1 -1
  5. package/lib/ecommerce/sections/authentication-required/authentication-required.component.d.ts +1 -1
  6. package/lib/ecommerce/sections/featured-category/featured-category.component.d.ts +1 -1
  7. package/lib/ecommerce/sections/featured-category/featured-collection.component.d.ts +1 -1
  8. package/lib/ecommerce/sections/new-collection/new-collection.component.d.ts +1 -1
  9. package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -1
  10. package/lib/ecommerce/sections/schemes/schemes.component.d.ts +1 -1
  11. package/lib/elements/link-editor/link-editor.component.d.ts +1 -1
  12. package/lib/sections/banner-carousel/banner-carousel.component.d.ts +2 -2
  13. package/lib/sections/carousel-banner/carousel-banner.component.d.ts +1 -1
  14. package/lib/sections/contact-us/contact-us.component.d.ts +1 -1
  15. package/lib/sections/faq-columns-cards/faq-columns-cards.component.d.ts +1 -1
  16. package/lib/sections/faq-section/faq-section.component.d.ts +1 -1
  17. package/lib/sections/image-grid-hotspot/image-grid-hotspot.component.d.ts +1 -1
  18. package/lib/sections/image-grid-section/image-grid-section.component.d.ts +1 -1
  19. package/lib/sections/image-section/image-section.component.d.ts +2 -2
  20. package/lib/sections/logo-showcase/logo-showcase.component.d.ts +2 -2
  21. package/lib/sections/new-testimonials/new-testimonials.component.d.ts +1 -1
  22. package/lib/sections/pricing-section/pricing-section.component.d.ts +2 -2
  23. package/package.json +1 -1
  24. package/simpo-component-library-3.6.813.tgz +0 -0
  25. package/simpo-component-library-3.6.812.tgz +0 -0
package/fesm2022/simpo-component-library.mjs CHANGED
@@ -17290,7 +17290,7 @@ class HeaderSectionComponent {
17290
17290
  }
17291
17291
  }
17292
17292
  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 }); }
17293
- 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\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [class.margin-bottom]=\"isHeaderSticky && isMobile && categoryList?.length == 0\">\r\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n [class.header--scrolled]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n\r\n <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n\r\n <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n </div>\r\n\r\n <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div> -->\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container> -->\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div [class.w-15]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div [class.w-15]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \r\n ((content?.logo?.size >= 60 && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n <mat-icon>person_outline</mat-icon>\r\n Login\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn && !isMobile\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n <div class=\"item-count fw-bold\">\r\n {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n [style.color]=\"backgroundInfo?.accentColor\">\r\n <!-- <span class=\"animated-placeholder position-absolute\" \r\n [class.animate]=\"animatePlaceholder\"\r\n *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n {{ currentPlaceholder }}\r\n </span> -->\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n height=\"30\" version=\"1.1\">\r\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\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\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\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\"\r\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n </g>\r\n </svg>\r\n <div [style.color]=\"accentColor\">Schemes</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\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\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\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\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\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\"\r\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : (style?.styling === 'Header1' || style?.styling === 'Header3') && !isEcommerceWebsite, 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4' || isEcommerceWebsite}\">\r\n <div class=\"offcanvas-header\" [simpoBackground]=\"style?.background\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\r\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\r\n\r\n\r\n <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\r\n\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-wrapper\"\r\n *ngIf=\"(categoryList?.length > 0 || collectionList?.collections?.length > 0) && !isMobile\"\r\n (mouseleave)=\"showList = false; showCollections = false\">\r\n\r\n <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\r\n\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\r\n [style.background]=\"data?.styles?.headline?.color\">\r\n\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\r\n {{ele?.label | titlecase}}\r\n </div>\r\n </div>\r\n\r\n <!-- [class.hide-dropdown]=\"!showList\" -->\r\n <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\r\n <div class=\"row w-100 h-100 mega-menu-scroll-row\">\r\n <ng-container *ngFor=\"let ele of selectedCategory; let i = index\">\r\n <div class=\"mega-menu-scroll-col\" [ngClass]=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORY') ? 'col-3' : 'col-2'\">\r\n\r\n <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORY' )\">\r\n <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"w-100 mb-2 br-12 cursor-pointer collectionImage\" *ngIf=\"ele.imageUrl\" (click)=\"redirectionsOfMenu(ele)\" />\r\n </ng-container>\r\n\r\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\">\r\n {{ele?.label | titlecase}}\r\n </div>\r\n <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let child of ele?.children\">\r\n <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer\">\r\n {{child?.label | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\r\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerce_header>\r\n <header class=\"site-header\">\r\n <!-- Top Bar: Logo, Search, User Actions -->\r\n <div class=\"top-bar\">\r\n\r\n <!-- Mobile Menu Toggle (Checkbox Hack) -->\r\n <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n <label for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n </svg>\r\n </label>\r\n\r\n <!-- Logo Section -->\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size + 15\"\r\n [height]=\"content?.logo?.size\">\r\n </a>\r\n\r\n <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && content?.logo?.text?.isIcon \r\n && content?.logo?.text?.url\">\r\n\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\r\n [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\r\n\r\n <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && !content?.logo?.text?.isIcon\">\r\n\r\n <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n </div>\r\n\r\n <!-- Search Bar -->\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown menu style -->\r\n <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\r\n (mouseleave)=\"showList = false; selectedCategory = null\">\r\n <div class=\"dd-nav\">\r\n <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\" (mouseenter)=\"setChildMenu(ele)\">\r\n <button type=\"button\" class=\"dd-tab\" [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\r\n (click)=\"redirectionsOfMenu(ele)\">\r\n <span class=\"text-nowrap\">{{ele?.label | titlecase}}</span>\r\n <img style=\"width:20px; height:20px\" class=\"tab-arrow\" *ngIf=\"ele?.children?.length\"\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/334952c1776866431821dropdown-arrow-svgrepo-com.svg\"\r\n alt=\"dropdown arrow\">\r\n </button>\r\n\r\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory === ele?.children && ele?.children?.length\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"dd-item\" *ngFor=\"let child of ele?.children\"\r\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : ''\">\r\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\r\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\r\n\r\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length\">\r\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\r\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\r\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- Right Actions -->\r\n <div class=\"user-actions\">\r\n \r\n <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\r\n <a class=\"action-link icon-only dropdown-search-toggle\" (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\"\r\n aria-label=\"Toggle search\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"storeAvaiable\">\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n *ngIf=\"!getPincode\">\r\n <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n <path\r\n d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n fill=\"#000000\" />\r\n </svg> -->\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\r\n <g>\r\n <path\r\n d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\r\n </path>\r\n <path\r\n d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\r\n </path>\r\n </g>\r\n </svg>\r\n\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n </a>\r\n\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n <path d=\"M2 7h20\"></path>\r\n <path\r\n d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n </path>\r\n </svg>\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n getPincode}}</span>\r\n\r\n </a>\r\n\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n\r\n <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n <!-- Heart Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path\r\n d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n </path>\r\n </svg>\r\n <!-- <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\">2</span> -->\r\n </a>\r\n\r\n <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n <!-- Shopping Bag Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n <path d=\"M3 6h18\"></path>\r\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n </svg>\r\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n </a>\r\n\r\n <div class=\"dropdown-search-expand\"\r\n *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\r\n <div class=\"dropdown-search-box\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"dropdown-search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n </header>\r\n</ng-template>", styles: [".total-container div[simpoSticky]{top:0!important;left:0!important;right:0!important;margin:0 auto!important;width:100%!important}.header--scrolled{top:10px!important;left:4%!important;right:4%!important;width:92%!important;overflow:hidden!important;border-radius:60px!important;box-shadow:0 10px 40px #0000001f!important;z-index:1000001!important;transition:width .4s cubic-bezier(.16,1,.3,1)}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.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%;z-index:1001}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.dropdown_menu{position:relative;min-width:420px}.dd-nav{display:flex;align-items:center;gap:18px}.dd-tab-wrap{position:relative;display:inline-flex}.dd-tab{border:none;background:transparent;padding:6px 2px 12px;font-size:15px;font-weight:500;color:#30343b;line-height:1;border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:8px}.dd-tab:hover,.dd-tab.dd-tab-active{border-bottom-color:#2f3338}.dd-panel{position:absolute;top:100%;background:#fff;border:1px solid #ececef;box-shadow:0 12px 35px #1d212929;padding:14px 0;z-index:1006}.dd-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;font-size:16px;color:#2c2f35;transition:background-color .2s ease;cursor:pointer}.dd-item:hover{background-color:#f5f6f8}.dd-item-arrow{font-size:20px;line-height:1;color:#5a5f66}.dd-submenu{position:absolute;top:-10px;left:calc(100% + 8px);background:#fff;border:1px solid #ececef;box-shadow:0 10px 26px #1d212926;padding:10px 0;display:none;z-index:1007}.dd-item:hover .dd-submenu{display:block}.dd-sub-item{padding:10px 16px;font-size:15px;color:#2c2f35;transition:background-color .2s ease}.dd-sub-item:hover{background-color:#f5f6f8}.dropdown-search-toggle{cursor:pointer}.dropdown-search-expand{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;z-index:1010}.dropdown-search-box{width:100%;background:#f3f3f3;border:1px solid #e7e7e7;display:flex;align-items:center;gap:12px;padding:10px 14px}.dropdown-search-icon{color:#1f2328;flex:0 0 auto}.dropdown-search-box input{border:none;background:transparent;width:100%;font-size:14px;color:#2f3338;outline:none}.dropdown-search-close{color:#545861;cursor:pointer;flex:0 0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{position:relative;display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:1000}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative;z-index:1002}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top);left:0;width:100vw;height:calc(100vh - var(--margin-top));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow:hidden}.mega-menu-scroll-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.mega-menu-scroll-col{flex-shrink:0}.collectionImage{border-radius:10px;height:70%!important}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { 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"] }] }); }
17293
+ 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\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [class.margin-bottom]=\"isHeaderSticky && isMobile && categoryList?.length == 0\">\r\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n [class.header--scrolled]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n\r\n <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n\r\n <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n </div>\r\n\r\n <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div> -->\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container> -->\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div [class.w-15]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div [class.w-15]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \r\n ((content?.logo?.size >= 60 && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n <mat-icon>person_outline</mat-icon>\r\n Login\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn && !isMobile\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n <div class=\"item-count fw-bold\">\r\n {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n [style.color]=\"backgroundInfo?.accentColor\">\r\n <!-- <span class=\"animated-placeholder position-absolute\" \r\n [class.animate]=\"animatePlaceholder\"\r\n *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n {{ currentPlaceholder }}\r\n </span> -->\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n height=\"30\" version=\"1.1\">\r\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\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\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\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\"\r\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n </g>\r\n </svg>\r\n <div [style.color]=\"accentColor\">Schemes</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\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\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\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\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\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\"\r\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : (style?.styling === 'Header1' || style?.styling === 'Header3') && !isEcommerceWebsite, 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4' || isEcommerceWebsite}\">\r\n <div class=\"offcanvas-header\" [simpoBackground]=\"style?.background\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\r\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\r\n\r\n\r\n <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\r\n\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-wrapper\"\r\n *ngIf=\"(categoryList?.length > 0 || collectionList?.collections?.length > 0) && !isMobile\"\r\n (mouseleave)=\"showList = false; showCollections = false\">\r\n\r\n <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\r\n\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\r\n [style.background]=\"data?.styles?.headline?.color\">\r\n\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\r\n {{ele?.label | titlecase}}\r\n </div>\r\n </div>\r\n\r\n <!-- [class.hide-dropdown]=\"!showList\" -->\r\n <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\r\n <div class=\"row w-100 h-100 mega-menu-scroll-row\">\r\n <ng-container *ngFor=\"let ele of selectedCategory; let i = index\">\r\n <div class=\"mega-menu-scroll-col\" [ngClass]=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORY') ? 'col-3' : 'col-2'\">\r\n\r\n <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORY' )\">\r\n <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"w-100 mb-2 br-12 cursor-pointer collectionImage\" *ngIf=\"ele.imageUrl\" (click)=\"redirectionsOfMenu(ele)\" />\r\n </ng-container>\r\n\r\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\">\r\n {{ele?.label | titlecase}}\r\n </div>\r\n <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let child of ele?.children\">\r\n <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer\">\r\n {{child?.label | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\r\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerce_header>\r\n <header class=\"site-header\">\r\n <!-- Top Bar: Logo, Search, User Actions -->\r\n <div class=\"top-bar\">\r\n\r\n <!-- Mobile Menu Toggle (Checkbox Hack) -->\r\n <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n <label for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n </svg>\r\n </label>\r\n\r\n <!-- Logo Section -->\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size + 15\"\r\n [height]=\"content?.logo?.size\">\r\n </a>\r\n\r\n <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && content?.logo?.text?.isIcon \r\n && content?.logo?.text?.url\">\r\n\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\r\n [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\r\n\r\n <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && !content?.logo?.text?.isIcon\">\r\n\r\n <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n </div>\r\n\r\n <!-- Search Bar -->\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown menu style -->\r\n <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\r\n (mouseleave)=\"showList = false; selectedCategory = null\">\r\n <div class=\"dd-nav\">\r\n <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\" (mouseenter)=\"setChildMenu(ele)\">\r\n <button type=\"button\" class=\"dd-tab\" [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\r\n (click)=\"redirectionsOfMenu(ele)\">\r\n <span class=\"text-nowrap\">{{ele?.label | titlecase}}</span>\r\n <img style=\"width:20px; height:20px\" class=\"tab-arrow\" *ngIf=\"ele?.children?.length\"\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/334952c1776866431821dropdown-arrow-svgrepo-com.svg\"\r\n alt=\"dropdown arrow\">\r\n </button>\r\n\r\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory === ele?.children && ele?.children?.length\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"dd-item\" *ngFor=\"let child of ele?.children\"\r\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : ''\">\r\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\r\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\r\n\r\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length\">\r\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\r\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\r\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- Right Actions -->\r\n <div class=\"user-actions\">\r\n \r\n <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\r\n <a class=\"action-link icon-only dropdown-search-toggle\" (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\"\r\n aria-label=\"Toggle search\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"storeAvaiable\">\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n *ngIf=\"!getPincode\">\r\n <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n <path\r\n d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n fill=\"#000000\" />\r\n </svg> -->\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\r\n <g>\r\n <path\r\n d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\r\n </path>\r\n <path\r\n d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\r\n </path>\r\n </g>\r\n </svg>\r\n\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n </a>\r\n\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n <path d=\"M2 7h20\"></path>\r\n <path\r\n d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n </path>\r\n </svg>\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n getPincode}}</span>\r\n\r\n </a>\r\n\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n\r\n <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n <!-- Heart Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path\r\n d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n </path>\r\n </svg>\r\n <!-- <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\">2</span> -->\r\n </a>\r\n\r\n <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n <!-- Shopping Bag Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n <path d=\"M3 6h18\"></path>\r\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n </svg>\r\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n </a>\r\n\r\n <div class=\"dropdown-search-expand\"\r\n *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\r\n <div class=\"dropdown-search-box\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"dropdown-search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n </header>\r\n</ng-template>", styles: [".total-container div[simpoSticky]{top:0!important;left:0!important;right:0!important;margin:0 auto!important;width:100%!important}.header--scrolled{top:10px!important;left:4%!important;right:4%!important;width:92%!important;overflow:hidden!important;border-radius:60px!important;box-shadow:0 10px 40px #0000001f!important;z-index:1000001!important;transition:width .4s cubic-bezier(.16,1,.3,1)}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.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%;z-index:1001}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.dropdown_menu{position:relative;min-width:420px}.dd-nav{display:flex;align-items:center;gap:18px}.dd-tab-wrap{position:relative;display:inline-flex}.dd-tab{border:none;background:transparent;padding:6px 2px 12px;font-size:15px;font-weight:500;color:#30343b;line-height:1;border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:8px}.dd-tab:hover,.dd-tab.dd-tab-active{border-bottom-color:#2f3338}.dd-panel{position:absolute;top:100%;background:#fff;border:1px solid #ececef;box-shadow:0 12px 35px #1d212929;padding:14px 0;z-index:1006}.dd-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;font-size:16px;color:#2c2f35;transition:background-color .2s ease;cursor:pointer}.dd-item:hover{background-color:#f5f6f8}.dd-item-arrow{font-size:20px;line-height:1;color:#5a5f66}.dd-submenu{position:absolute;top:-10px;left:calc(100% + 8px);background:#fff;border:1px solid #ececef;box-shadow:0 10px 26px #1d212926;padding:10px 0;display:none;z-index:1007}.dd-item:hover .dd-submenu{display:block}.dd-sub-item{padding:10px 16px;font-size:15px;color:#2c2f35;transition:background-color .2s ease}.dd-sub-item:hover{background-color:#f5f6f8}.dropdown-search-toggle{cursor:pointer}.dropdown-search-expand{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;z-index:1010}.dropdown-search-box{width:100%;background:#f3f3f3;border:1px solid #e7e7e7;display:flex;align-items:center;gap:12px;padding:10px 14px}.dropdown-search-icon{color:#1f2328;flex:0 0 auto}.dropdown-search-box input{border:none;background:transparent;width:100%;font-size:14px;color:#2f3338;outline:none}.dropdown-search-close{color:#545861;cursor:pointer;flex:0 0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:1000}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative;z-index:1002}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top);left:0;width:100vw;height:calc(100vh - var(--margin-top));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow:hidden}.mega-menu-scroll-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.mega-menu-scroll-col{flex-shrink:0}.collectionImage{border-radius:10px;height:70%!important}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo", "disabled", "loading", "isFullWidth"] }, { 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"] }] }); }
17294
17294
  }
17295
17295
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
17296
17296
  type: Component,
@@ -17314,7 +17314,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
17314
17314
  SpacingHorizontalDirective,
17315
17315
  MovingTextComponent,
17316
17316
  ContentFitDirective,
17317
- ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [class.margin-bottom]=\"isHeaderSticky && isMobile && categoryList?.length == 0\">\r\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n [class.header--scrolled]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n\r\n <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n\r\n <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n </div>\r\n\r\n <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div> -->\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container> -->\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div [class.w-15]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div [class.w-15]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \r\n ((content?.logo?.size >= 60 && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n <mat-icon>person_outline</mat-icon>\r\n Login\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn && !isMobile\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n <div class=\"item-count fw-bold\">\r\n {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n [style.color]=\"backgroundInfo?.accentColor\">\r\n <!-- <span class=\"animated-placeholder position-absolute\" \r\n [class.animate]=\"animatePlaceholder\"\r\n *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n {{ currentPlaceholder }}\r\n </span> -->\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n height=\"30\" version=\"1.1\">\r\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\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\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\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\"\r\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n </g>\r\n </svg>\r\n <div [style.color]=\"accentColor\">Schemes</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\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\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\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\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\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\"\r\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : (style?.styling === 'Header1' || style?.styling === 'Header3') && !isEcommerceWebsite, 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4' || isEcommerceWebsite}\">\r\n <div class=\"offcanvas-header\" [simpoBackground]=\"style?.background\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\r\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\r\n\r\n\r\n <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\r\n\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-wrapper\"\r\n *ngIf=\"(categoryList?.length > 0 || collectionList?.collections?.length > 0) && !isMobile\"\r\n (mouseleave)=\"showList = false; showCollections = false\">\r\n\r\n <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\r\n\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\r\n [style.background]=\"data?.styles?.headline?.color\">\r\n\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\r\n {{ele?.label | titlecase}}\r\n </div>\r\n </div>\r\n\r\n <!-- [class.hide-dropdown]=\"!showList\" -->\r\n <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\r\n <div class=\"row w-100 h-100 mega-menu-scroll-row\">\r\n <ng-container *ngFor=\"let ele of selectedCategory; let i = index\">\r\n <div class=\"mega-menu-scroll-col\" [ngClass]=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORY') ? 'col-3' : 'col-2'\">\r\n\r\n <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORY' )\">\r\n <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"w-100 mb-2 br-12 cursor-pointer collectionImage\" *ngIf=\"ele.imageUrl\" (click)=\"redirectionsOfMenu(ele)\" />\r\n </ng-container>\r\n\r\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\">\r\n {{ele?.label | titlecase}}\r\n </div>\r\n <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let child of ele?.children\">\r\n <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer\">\r\n {{child?.label | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\r\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerce_header>\r\n <header class=\"site-header\">\r\n <!-- Top Bar: Logo, Search, User Actions -->\r\n <div class=\"top-bar\">\r\n\r\n <!-- Mobile Menu Toggle (Checkbox Hack) -->\r\n <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n <label for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n </svg>\r\n </label>\r\n\r\n <!-- Logo Section -->\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size + 15\"\r\n [height]=\"content?.logo?.size\">\r\n </a>\r\n\r\n <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && content?.logo?.text?.isIcon \r\n && content?.logo?.text?.url\">\r\n\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\r\n [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\r\n\r\n <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && !content?.logo?.text?.isIcon\">\r\n\r\n <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n </div>\r\n\r\n <!-- Search Bar -->\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown menu style -->\r\n <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\r\n (mouseleave)=\"showList = false; selectedCategory = null\">\r\n <div class=\"dd-nav\">\r\n <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\" (mouseenter)=\"setChildMenu(ele)\">\r\n <button type=\"button\" class=\"dd-tab\" [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\r\n (click)=\"redirectionsOfMenu(ele)\">\r\n <span class=\"text-nowrap\">{{ele?.label | titlecase}}</span>\r\n <img style=\"width:20px; height:20px\" class=\"tab-arrow\" *ngIf=\"ele?.children?.length\"\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/334952c1776866431821dropdown-arrow-svgrepo-com.svg\"\r\n alt=\"dropdown arrow\">\r\n </button>\r\n\r\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory === ele?.children && ele?.children?.length\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"dd-item\" *ngFor=\"let child of ele?.children\"\r\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : ''\">\r\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\r\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\r\n\r\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length\">\r\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\r\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\r\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- Right Actions -->\r\n <div class=\"user-actions\">\r\n \r\n <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\r\n <a class=\"action-link icon-only dropdown-search-toggle\" (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\"\r\n aria-label=\"Toggle search\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"storeAvaiable\">\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n *ngIf=\"!getPincode\">\r\n <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n <path\r\n d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n fill=\"#000000\" />\r\n </svg> -->\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\r\n <g>\r\n <path\r\n d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\r\n </path>\r\n <path\r\n d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\r\n </path>\r\n </g>\r\n </svg>\r\n\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n </a>\r\n\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n <path d=\"M2 7h20\"></path>\r\n <path\r\n d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n </path>\r\n </svg>\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n getPincode}}</span>\r\n\r\n </a>\r\n\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n\r\n <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n <!-- Heart Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path\r\n d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n </path>\r\n </svg>\r\n <!-- <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\">2</span> -->\r\n </a>\r\n\r\n <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n <!-- Shopping Bag Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n <path d=\"M3 6h18\"></path>\r\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n </svg>\r\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n </a>\r\n\r\n <div class=\"dropdown-search-expand\"\r\n *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\r\n <div class=\"dropdown-search-box\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"dropdown-search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n </header>\r\n</ng-template>", styles: [".total-container div[simpoSticky]{top:0!important;left:0!important;right:0!important;margin:0 auto!important;width:100%!important}.header--scrolled{top:10px!important;left:4%!important;right:4%!important;width:92%!important;overflow:hidden!important;border-radius:60px!important;box-shadow:0 10px 40px #0000001f!important;z-index:1000001!important;transition:width .4s cubic-bezier(.16,1,.3,1)}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.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%;z-index:1001}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.dropdown_menu{position:relative;min-width:420px}.dd-nav{display:flex;align-items:center;gap:18px}.dd-tab-wrap{position:relative;display:inline-flex}.dd-tab{border:none;background:transparent;padding:6px 2px 12px;font-size:15px;font-weight:500;color:#30343b;line-height:1;border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:8px}.dd-tab:hover,.dd-tab.dd-tab-active{border-bottom-color:#2f3338}.dd-panel{position:absolute;top:100%;background:#fff;border:1px solid #ececef;box-shadow:0 12px 35px #1d212929;padding:14px 0;z-index:1006}.dd-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;font-size:16px;color:#2c2f35;transition:background-color .2s ease;cursor:pointer}.dd-item:hover{background-color:#f5f6f8}.dd-item-arrow{font-size:20px;line-height:1;color:#5a5f66}.dd-submenu{position:absolute;top:-10px;left:calc(100% + 8px);background:#fff;border:1px solid #ececef;box-shadow:0 10px 26px #1d212926;padding:10px 0;display:none;z-index:1007}.dd-item:hover .dd-submenu{display:block}.dd-sub-item{padding:10px 16px;font-size:15px;color:#2c2f35;transition:background-color .2s ease}.dd-sub-item:hover{background-color:#f5f6f8}.dropdown-search-toggle{cursor:pointer}.dropdown-search-expand{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;z-index:1010}.dropdown-search-box{width:100%;background:#f3f3f3;border:1px solid #e7e7e7;display:flex;align-items:center;gap:12px;padding:10px 14px}.dropdown-search-icon{color:#1f2328;flex:0 0 auto}.dropdown-search-box input{border:none;background:transparent;width:100%;font-size:14px;color:#2f3338;outline:none}.dropdown-search-close{color:#545861;cursor:pointer;flex:0 0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{position:relative;display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:1000}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative;z-index:1002}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top);left:0;width:100vw;height:calc(100vh - var(--margin-top));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow:hidden}.mega-menu-scroll-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.mega-menu-scroll-col{flex-shrink:0}.collectionImage{border-radius:10px;height:70%!important}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}\n"] }]
17317
+ ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\r\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\r\n [class.margin-bottom]=\"isHeaderSticky && isMobile && categoryList?.length == 0\">\r\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\r\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\r\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\r\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\"\r\n [class.header--scrolled]=\"data?.styles?.shrinkOnScroll && isHeaderSticky && scrollValue > 0 && !edit\">\r\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n\r\n <div *ngIf=\"style?.styling === 'Header1' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4' && !isEcommerceWebsite\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoOverlay]=\"backgroundInfo\" [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n\r\n <div [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\" *ngIf=\"isEcommerceWebsite\"\r\n [simpoLayout]=\"screenWidth > 475 ? stylesLayout : undefined\" [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"ecommerce_header\"></ng-container>\r\n </div>\r\n\r\n <!-- <div class=\"input-group mx-2 mb-2 w-96\" *ngIf=\"isMobile && isEcommerceWebsite && !restrictCartBarInPages()\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search for items\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div> -->\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile && data?.styles?.menuType === 'MEGA_MENU'\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\r\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- <ng-container *ngIf=\"isEcommerceWebsite && isMobile && !restrictInPages()\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container> -->\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div [class.w-15]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 94 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div [class.w-15]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"text-end\" [class.w-15]=\"content?.logo?.isImage\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer mx-1\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size + 80\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : \r\n ((content?.logo?.size >= 60 && content?.logo?.size <= 100) ? (20) : ((content?.logo?.size || 10) - 10))\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\r\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\">\r\n <mat-icon>person_outline</mat-icon>\r\n Login\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn && !isMobile\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"cart-footer\" [style.background]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount > 0 && !restrictCartBarInPages()\">\r\n <div class=\"d-flex justify-content-between px-3 py-2 h-100 align-items-center\">\r\n <div class=\"item-count fw-bold\">\r\n {{ getCartItemsCount ?? 3 }} {{ getCartItemsCount > 1 ? 'items' : 'item' }} in cart\r\n <!-- Total : \u20B9{{ getCartTotalAmount }} -->\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2 fw-bold\" (click)=\"goToCart()\">\r\n View Cart <mat-icon [simpoColor]=\"accentColor\">arrow_forward</mat-icon>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"w-75 d-flex align-items-center\" [ngClass]=\"{'justify-content-center' : !passbookAppStatus}\">\r\n <div class=\"input-group w-75 ml-2\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search For Items\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\r\n [style.color]=\"backgroundInfo?.accentColor\">\r\n <!-- <span class=\"animated-placeholder position-absolute\" \r\n [class.animate]=\"animatePlaceholder\"\r\n *ngIf=\"style?.searchBarPlaceholderList.length > 1 && style?.smartSearchBar\">\r\n {{ currentPlaceholder }}\r\n </span> -->\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType === 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\r\n height=\"30\" version=\"1.1\">\r\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\r\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\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\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path\r\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\"\r\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\r\n stroke-opacity=\"1\" />\r\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\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\r\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\r\n </g>\r\n </svg>\r\n <div [style.color]=\"accentColor\">Schemes</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\r\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\r\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\r\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\r\n getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path\r\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\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\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\"\r\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n <path\r\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\"\r\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : (style?.styling === 'Header1' || style?.styling === 'Header3') && !isEcommerceWebsite, 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4' || isEcommerceWebsite}\">\r\n <div class=\"offcanvas-header\" [simpoBackground]=\"style?.background\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <!-- <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-22 px-3 py-1\"\r\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"backgroundInfo?.color\">search</mat-icon> -->\r\n\r\n\r\n <!-- <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"> -->\r\n\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b>{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-wrapper\"\r\n *ngIf=\"(categoryList?.length > 0 || collectionList?.collections?.length > 0) && !isMobile\"\r\n (mouseleave)=\"showList = false; showCollections = false\">\r\n\r\n <div class=\"blur-overlay\" [class.active]=\"showList || showCollections\"></div>\r\n\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" [spacingHorizontal]=\"stylesLayout\"\r\n [style.background]=\"data?.styles?.headline?.color\">\r\n\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of megaMenu; let i = index\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\r\n (mouseenter)=\"setChildMenu(ele)\" (click)=\"redirectionsOfMenu(ele)\">\r\n {{ele?.label | titlecase}}\r\n </div>\r\n </div>\r\n\r\n <!-- [class.hide-dropdown]=\"!showList\" -->\r\n <div class=\"list-category\" [class.show-dropdown]=\"showList\" [class.hide-dropdown]=\"!showList\">\r\n <div class=\"row w-100 h-100 mega-menu-scroll-row\">\r\n <ng-container *ngFor=\"let ele of selectedCategory; let i = index\">\r\n <div class=\"mega-menu-scroll-col\" [ngClass]=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORY') ? 'col-3' : 'col-2'\">\r\n\r\n <ng-container *ngIf=\"ele?.children?.length == 0 && (ele.type=='COLLECTIONS' || ele.type=='CATEGORY' )\">\r\n <img [src]=\"ele.imageUrl\" [alt]=\"ele?.label\" class=\"w-100 mb-2 br-12 cursor-pointer collectionImage\" *ngIf=\"ele.imageUrl\" (click)=\"redirectionsOfMenu(ele)\" />\r\n </ng-container>\r\n\r\n <div class=\"list-header mb-3 cursor-pointer\" (click)=\"redirectionsOfMenu(ele)\">\r\n {{ele?.label | titlecase}}\r\n </div>\r\n <ng-container *ngIf=\"ele?.children && ele?.children.length > 0\">\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let child of ele?.children\">\r\n <div (click)=\"redirectionsOfMenu(child)\" class=\"cursor-pointer\">\r\n {{child?.label | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileCategoryHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\" [class.margin-top-mob]=\"isHeaderSticky\">\r\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center w-100\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerce_header>\r\n <header class=\"site-header\">\r\n <!-- Top Bar: Logo, Search, User Actions -->\r\n <div class=\"top-bar\">\r\n\r\n <!-- Mobile Menu Toggle (Checkbox Hack) -->\r\n <div [ngClass]=\"{'mobile-header-left-side': screenWidth <= 475}\">\r\n <label for=\"mobile-menu-checkbox\" class=\"mobile-menu-btn\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRight\" aria-controls=\"offcanvasRight\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"></line>\r\n <line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"></line>\r\n <line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"></line>\r\n </svg>\r\n </label>\r\n\r\n <!-- Logo Section -->\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\">\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"Logo\" class=\"logo-img\" [width]=\"content?.logo?.size + 15\"\r\n [height]=\"content?.logo?.size\">\r\n </a>\r\n\r\n <a class=\"textPluslogo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && content?.logo?.text?.isIcon \r\n && content?.logo?.text?.url\">\r\n\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"Icon\" class=\"logo-icon\"\r\n [width]=\"content?.logo?.size + 15\" [height]=\"content?.logo?.size\">\r\n\r\n <span class=\"logo-text\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 475\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n\r\n <a class=\"logo\" (click)=\"!edit ? goToHome() : ''\" *ngIf=\"!content?.logo?.isImage \r\n && content?.logo?.text?.isText \r\n && !content?.logo?.text?.isIcon\">\r\n\r\n <span class=\"logo-main\" [simpoColor]=\"simpoColor\">\r\n {{ content?.siteName?.value }}\r\n </span>\r\n </a>\r\n </div>\r\n\r\n <!-- Search Bar -->\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth > 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown menu style -->\r\n <div class=\"dropdown_menu\" *ngIf=\"screenWidth > 475 && data?.styles?.menuType === 'DROPDOWN_MENU'\"\r\n (mouseleave)=\"showList = false; selectedCategory = null\">\r\n <div class=\"dd-nav\">\r\n <div class=\"dd-tab-wrap\" *ngFor=\"let ele of megaMenu\" (mouseenter)=\"setChildMenu(ele)\">\r\n <button type=\"button\" class=\"dd-tab\" [class.dd-tab-active]=\"showList && selectedCategory === ele?.children\"\r\n (click)=\"redirectionsOfMenu(ele)\">\r\n <span class=\"text-nowrap\">{{ele?.label | titlecase}}</span>\r\n <img style=\"width:20px; height:20px\" class=\"tab-arrow\" *ngIf=\"ele?.children?.length\"\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/334952c1776866431821dropdown-arrow-svgrepo-com.svg\"\r\n alt=\"dropdown arrow\">\r\n </button>\r\n\r\n <div class=\"dd-panel\" *ngIf=\"showList && selectedCategory === ele?.children && ele?.children?.length\"\r\n (click)=\"$event.stopPropagation()\">\r\n <div class=\"dd-item\" *ngFor=\"let child of ele?.children\"\r\n (click)=\"!child?.children?.length ? redirectionsOfMenu(child) : ''\">\r\n <span class=\"text-nowrap\">{{child?.label | titlecase}}</span>\r\n <span class=\"dd-item-arrow\" *ngIf=\"child?.children?.length\">&#8250;</span>\r\n\r\n <div class=\"dd-submenu\" *ngIf=\"child?.children?.length\">\r\n <div class=\"dd-sub-item\" *ngFor=\"let sub of child?.children\"\r\n (click)=\"redirectionsOfMenu(sub); $event.stopPropagation()\">\r\n <span class=\"text-nowrap\">{{sub?.label | titlecase}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <!-- Right Actions -->\r\n <div class=\"user-actions\">\r\n \r\n <ng-container *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar\">\r\n <a class=\"action-link icon-only dropdown-search-toggle\" (click)=\"showDropdownDesktopSearch = !showDropdownDesktopSearch\"\r\n aria-label=\"Toggle search\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n </a>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"storeAvaiable\">\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\r\n *ngIf=\"!getPincode\">\r\n <!-- <svg width=\"20\" height=\"20\" viewBox=\"0 0 17 17\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\r\n stroke=\"currentColor\" fill=\"none\" [simpoColor]=\"simpoColor\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\r\n <path\r\n d=\"M8.5 0.5c-3.032 0-5.5 2.467-5.5 5.5 0 4.373 4.913 10.086 5.122 10.328l0.378 0.435 0.378-0.436c0.209-0.241 5.122-5.954 5.122-10.327 0-3.033-2.468-5.5-5.5-5.5zM8.5 15.215c-1.146-1.424-4.5-5.879-4.5-9.215 0-2.481 2.019-4.5 4.5-4.5s4.5 2.019 4.5 4.5c0 3.333-3.354 7.791-4.5 9.215zM8.5 3.139c-1.654 0-3 1.346-3 3s1.346 3 3 3 3-1.346 3-3-1.346-3-3-3zM8.5 8.139c-1.103 0-2-0.897-2-2s0.897-2 2-2 2 0.897 2 2-0.897 2-2 2z\"\r\n fill=\"#000000\" />\r\n </svg> -->\r\n\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"\r\n [simpoColor]=\"simpoColor\" stroke=\"currentColor\" fill=\"currentColor\">\r\n <g>\r\n <path\r\n d=\"M341.476 338.285c54.483-85.493 47.634-74.827 49.204-77.056C410.516 233.251 421 200.322 421 166 421 74.98 347.139 0 256 0 165.158 0 91 74.832 91 166c0 34.3 10.704 68.091 31.19 96.446l48.332 75.84C118.847 346.227 31 369.892 31 422c0 18.995 12.398 46.065 71.462 67.159C143.704 503.888 198.231 512 256 512c108.025 0 225-30.472 225-90 0-52.117-87.744-75.757-139.524-83.715zm-194.227-92.34a15.57 15.57 0 0 0-.517-.758C129.685 221.735 121 193.941 121 166c0-75.018 60.406-136 135-136 74.439 0 135 61.009 135 136 0 27.986-8.521 54.837-24.646 77.671-1.445 1.906 6.094-9.806-110.354 172.918L147.249 245.945zM256 482c-117.994 0-195-34.683-195-60 0-17.016 39.568-44.995 127.248-55.901l55.102 86.463a14.998 14.998 0 0 0 25.298 0l55.101-86.463C411.431 377.005 451 404.984 451 422c0 25.102-76.313 60-195 60z\">\r\n </path>\r\n <path\r\n d=\"M256 91c-41.355 0-75 33.645-75 75s33.645 75 75 75 75-33.645 75-75-33.645-75-75-75zm0 120c-24.813 0-45-20.187-45-45s20.187-45 45-45 45 20.187 45 45-20.187 45-45 45z\">\r\n </path>\r\n </g>\r\n </svg>\r\n\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">Enter Pincode</span>\r\n\r\n </a>\r\n\r\n <a class=\"action-link store-link\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\r\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7\"></path>\r\n <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"></path>\r\n <path d=\"M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4\"></path>\r\n <path d=\"M2 7h20\"></path>\r\n <path\r\n d=\"M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7\">\r\n </path>\r\n </svg>\r\n <span class=\"store-text\" [simpoColor]=\"simpoColor\">{{\"Delivering to: \" +\r\n getPincode}}</span>\r\n\r\n </a>\r\n\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14 pincode-text\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <a class=\"action-link icon-only login-btn\" *ngIf=\"!loggedIn\"\r\n (mouseenter)=\"showLogin = true;showPincodeInput = false\" (click)=\"showLogin = !showLogin\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <a class=\"action-link icon-only\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n <!-- User Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\"></circle>\r\n </svg>\r\n </a>\r\n\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\r\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n\r\n <a class=\"action-link icon-only icon-container wishlist-icon\" (click)=\"goToWishlist()\">\r\n <!-- Heart Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path\r\n d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\">\r\n </path>\r\n </svg>\r\n <!-- <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\">2</span> -->\r\n </a>\r\n\r\n <a class=\"action-link icon-only icon-container cart-icon\" (click)=\"goToCart()\">\r\n <!-- Shopping Bag Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" [simpoColor]=\"simpoColor\"\r\n stroke=\"currentColor\" fill=\"none\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z\"></path>\r\n <path d=\"M3 6h18\"></path>\r\n <path d=\"M16 10a4 4 0 0 1-8 0\"></path>\r\n </svg>\r\n <span class=\"count-badge\" [style.backgroundColor]=\"accentColor\" [simpoColor]=\"accentColor\"\r\n *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</span>\r\n </a>\r\n\r\n <div class=\"dropdown-search-expand\"\r\n *ngIf=\"data?.styles?.menuType === 'DROPDOWN_MENU' && screenWidth > 475 && content?.showSearchBar && showDropdownDesktopSearch\">\r\n <div class=\"dropdown-search-box\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"dropdown-search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for...\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n class=\"dropdown-search-close\" (click)=\"showDropdownDesktopSearch = false\" aria-label=\"Close search\">\r\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\r\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"search-wrapper\" *ngIf=\"screenWidth <= 475 && content?.showSearchBar && data?.styles?.menuType !== 'DROPDOWN_MENU'\">\r\n <div class=\"search-bar\">\r\n <!-- Search Icon SVG -->\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"search-icon\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\r\n </svg>\r\n <input type=\"text\" placeholder=\"Search for item\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\r\n aria-label=\"Search\">\r\n </div>\r\n </div>\r\n\r\n </header>\r\n</ng-template>", styles: [".total-container div[simpoSticky]{top:0!important;left:0!important;right:0!important;margin:0 auto!important;width:100%!important}.header--scrolled{top:10px!important;left:4%!important;right:4%!important;width:92%!important;overflow:hidden!important;border-radius:60px!important;box-shadow:0 10px 40px #0000001f!important;z-index:1000001!important;transition:width .4s cubic-bezier(.16,1,.3,1)}*{font-family:var(--website-font-family)}.animated-placeholder{left:12%;transform:translateY(-50%);transition:all .4s ease;font-size:14px;top:49%;color:#6f6f6f;font-weight:300}.animated-placeholder.animate{transform:translateY(-150%);opacity:0}.w-5{width:5%}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem;flex:0 0 auto}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.w-5{width:100%!important}.logo-main,.logo-text{font-size:17px!important}.left-logo-text{padding-top:10px}.mob-form-control{width:96%;border-radius:12px!important}.input-group mat-icon{width:10%!important}.categories-header{height:unset!important}.margin-top-mob{margin-top:var(--margin-top)}.w-98{width:98%}.w-96{width:96%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.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%;z-index:1001}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:6px;height:40px}.h-45{height:45vh}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:0;top:90%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}.cart-footer{position:fixed;width:96%;height:45px;bottom:65px;z-index:100;left:8px;border-radius:10px}.item-count{align-content:center}.fs-22{font-size:22px}.w-15{width:15%!important}.site-header{width:100%;border-bottom:1px solid transparent}.top-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto}.dropdown_menu{position:relative;min-width:420px}.dd-nav{display:flex;align-items:center;gap:18px}.dd-tab-wrap{position:relative;display:inline-flex}.dd-tab{border:none;background:transparent;padding:6px 2px 12px;font-size:15px;font-weight:500;color:#30343b;line-height:1;border-bottom:3px solid transparent;display:inline-flex;align-items:center;gap:8px}.dd-tab:hover,.dd-tab.dd-tab-active{border-bottom-color:#2f3338}.dd-panel{position:absolute;top:100%;background:#fff;border:1px solid #ececef;box-shadow:0 12px 35px #1d212929;padding:14px 0;z-index:1006}.dd-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;font-size:16px;color:#2c2f35;transition:background-color .2s ease;cursor:pointer}.dd-item:hover{background-color:#f5f6f8}.dd-item-arrow{font-size:20px;line-height:1;color:#5a5f66}.dd-submenu{position:absolute;top:-10px;left:calc(100% + 8px);background:#fff;border:1px solid #ececef;box-shadow:0 10px 26px #1d212926;padding:10px 0;display:none;z-index:1007}.dd-item:hover .dd-submenu{display:block}.dd-sub-item{padding:10px 16px;font-size:15px;color:#2c2f35;transition:background-color .2s ease}.dd-sub-item:hover{background-color:#f5f6f8}.dropdown-search-toggle{cursor:pointer}.dropdown-search-expand{position:absolute;top:calc(100% + 10px);right:0;min-width:320px;z-index:1010}.dropdown-search-box{width:100%;background:#f3f3f3;border:1px solid #e7e7e7;display:flex;align-items:center;gap:12px;padding:10px 14px}.dropdown-search-icon{color:#1f2328;flex:0 0 auto}.dropdown-search-box input{border:none;background:transparent;width:100%;font-size:14px;color:#2f3338;outline:none}.dropdown-search-close{color:#545861;cursor:pointer;flex:0 0 auto}.logo{display:flex;flex-direction:column;align-items:flex-start;color:#5e4042;line-height:1;text-decoration:auto}.logo-img{display:block}.logo-main{font-family:Playfair Display,serif;font-size:32px;font-weight:500;letter-spacing:.5px}.logo-sub{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;margin-left:2px}.search-wrapper{flex:1;display:flex;justify-content:center;max-width:600px}.search-bar{width:100%;background-color:#f3f3f3;border-radius:8px;display:flex;align-items:center;padding:10px 16px;gap:12px}.search-icon{color:#333;width:18px;height:18px}.search-bar input{border:none;background:transparent;width:100%;font-family:Montserrat,sans-serif;font-size:14px;color:#1a1a1a;outline:none}.search-bar input::placeholder{color:#888;font-weight:400}.user-actions{display:flex;align-items:center;gap:24px}.action-link{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#333}.action-link:hover{color:#5e4042}.store-text{white-space:nowrap}.icon-only svg{display:block;cursor:pointer}.main-nav{border-top:1px solid transparent;padding-bottom:15px}.nav-list{display:flex;justify-content:center;flex-wrap:wrap;gap:32px;padding:10px 40px}.nav-list li{position:relative}.nav-list a{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;color:#333;padding:5px 0;display:inline-block}.nav-list a:hover{color:#5e4042}.has-badge{position:relative}.badge{position:absolute;top:-12px;right:-10px;background-color:#a87b7b;color:#fff;font-size:9px;font-weight:600;padding:2px 6px;border-radius:10px;line-height:1;white-space:nowrap}.mobile-menu-checkbox{display:none}.mobile-menu-btn{display:none;cursor:pointer;color:#333}.hero-placeholder{height:80vh;background-color:#f9f9f9;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#5e4042}.hero-placeholder h1{font-family:Playfair Display,serif;font-size:3rem;margin-bottom:1rem}@media (max-width: 1024px){.nav-list{gap:20px}.store-text{display:none}.search-wrapper{margin:0 20px}}@media (max-width: 768px){.top-bar{padding:15px 20px;flex-wrap:wrap}.search-wrapper{order:3;width:100%;max-width:100%;margin:0 0 15px}.user-actions{gap:16px}.main-nav{display:none;width:100%;background:#fff;border-top:1px solid #eee}.nav-list{flex-direction:column;align-items:center;gap:15px;padding:20px}.badge{position:relative;top:-2px;right:auto;margin-left:8px;vertical-align:middle}.mobile-menu-btn{display:block}.mobile-menu-checkbox:checked~.main-nav{display:block}}@media screen and (max-width: 475px){.store-link{display:none}.info-container{width:100vw;top:62%}}.icon-container{position:relative}.count-badge{position:absolute;top:-8px;right:-8px;font-size:10px;font-weight:600;height:18px;width:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid #ffffff}.textPluslogo{display:flex;align-items:center;gap:8px;flex-shrink:0;text-decoration:none}.logo-icon{color:#5e4042}.logo-text{font-size:28px;font-weight:600;color:#1a1a1a;letter-spacing:-.5px}.mobile-header-left-side{display:flex;align-items:center;gap:15px}.categories-wrapper{position:relative;width:100%;z-index:1000}.categories-header{gap:26px!important;overflow-x:auto;width:100%;align-items:center;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;position:relative;z-index:1002}.categories-header::-webkit-scrollbar{display:none}.category{position:relative;border-bottom:3px solid transparent;transition:border-color .35s ease,color .35s ease}.category:hover{border-bottom-color:var(--border-color)}.blur-overlay{position:fixed;top:var(--margin-top);left:0;width:100vw;height:calc(100vh - var(--margin-top));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:#ffffff47;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;z-index:1000}.blur-overlay.active{opacity:1;visibility:visible}.list-category{padding:20px 30px;color:#111;background:#fff!important;height:50vh;position:absolute;top:100%;left:0;width:100%;z-index:1003;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease;will-change:opacity,transform;box-shadow:0 18px 40px #0000001a;overflow:hidden}.mega-menu-scroll-row{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}.mega-menu-scroll-col{flex-shrink:0}.collectionImage{border-radius:10px;height:70%!important}.show-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}.hide-dropdown{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px)}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.each-price{transition:transform .25s ease,font-weight .25s ease,color .25s ease}.each-price:hover{font-weight:700;transform:translate(4px)}.image-container{cursor:pointer;overflow:hidden}.image-container img{border-radius:12px;transition:transform .35s ease}.image-container:hover img{transform:scale(1.04)}.collection{height:max-content;cursor:pointer;transition:transform .25s ease}.collection:hover{transform:translateY(-2px)}\n"] }]
17318
17318
  }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }, { type: undefined, decorators: [{
17319
17319
  type: Inject,
17320
17320
  args: [LOCAL_STORAGE]