simpo-component-library 3.6.332 → 3.6.334
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.
- package/esm2022/lib/sections/header-section/header-section.component.mjs +20 -11
- package/esm2022/lib/services/rest.service.mjs +21 -7
- package/fesm2022/simpo-component-library.mjs +36 -15
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/directive/background-directive.d.ts +1 -1
- package/lib/directive/button-directive.directive.d.ts +1 -1
- package/lib/directive/color.directive.d.ts +1 -1
- package/lib/ecommerce/sections/authentication-required/authentication-required.component.d.ts +1 -1
- package/lib/ecommerce/sections/new-collection/new-collection.component.d.ts +1 -1
- package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +2 -2
- package/lib/ecommerce/sections/product-list/product-list.component.d.ts +1 -1
- package/lib/ecommerce/sections/schemes/schemes.component.d.ts +1 -1
- package/lib/ecommerce/sections/store-list/store-list.component.d.ts +1 -1
- package/lib/ecommerce/sections/store-page/store-page.component.d.ts +1 -1
- package/lib/elements/pricing-s1/pricing-s1.component.d.ts +1 -1
- package/lib/sections/banner-carousel/banner-carousel.component.d.ts +1 -1
- package/lib/sections/banner-grid-section/banner-grid-section.component.d.ts +1 -1
- package/lib/sections/contact-us/contact-us.component.d.ts +1 -1
- package/lib/sections/header-section/header-section.component.d.ts +4 -2
- package/lib/sections/moving-text/moving-text.component.d.ts +1 -1
- package/lib/sections/pricing-section/pricing-section.component.d.ts +2 -2
- package/lib/services/rest.service.d.ts +4 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.334.tgz +0 -0
- package/simpo-component-library-3.6.332.tgz +0 -0
|
@@ -6572,12 +6572,13 @@ class checkItemAlreadyAdded {
|
|
|
6572
6572
|
class RestService {
|
|
6573
6573
|
constructor(http,
|
|
6574
6574
|
// private readonly eventService: EventsService,
|
|
6575
|
-
BASE_URL, ECOMMERCE_URL, CMIS_URL, cookieService) {
|
|
6575
|
+
BASE_URL, ECOMMERCE_URL, CMIS_URL, cookieService, storage) {
|
|
6576
6576
|
this.http = http;
|
|
6577
6577
|
this.BASE_URL = BASE_URL;
|
|
6578
6578
|
this.ECOMMERCE_URL = ECOMMERCE_URL;
|
|
6579
6579
|
this.CMIS_URL = CMIS_URL;
|
|
6580
6580
|
this.cookieService = cookieService;
|
|
6581
|
+
this.storage = storage;
|
|
6581
6582
|
// private BASE_URL: string = "https://dev-api.simpo.ai/";
|
|
6582
6583
|
// private ECOMMERCE_URL: string = "https://dev-ecommerce.simpo.ai/";
|
|
6583
6584
|
// private CMIS_URL: string = "https://api-cmis.tejsoft.com/"; //production
|
|
@@ -6869,10 +6870,19 @@ class RestService {
|
|
|
6869
6870
|
getAllComponentCategories() {
|
|
6870
6871
|
return this.http.get(this.BASE_URL + `admin/master/template/category/all`);
|
|
6871
6872
|
}
|
|
6873
|
+
parseJson(raw) {
|
|
6874
|
+
if (!raw)
|
|
6875
|
+
return null;
|
|
6876
|
+
try {
|
|
6877
|
+
return JSON.parse(raw);
|
|
6878
|
+
}
|
|
6879
|
+
catch {
|
|
6880
|
+
return null;
|
|
6881
|
+
}
|
|
6882
|
+
}
|
|
6872
6883
|
getTemplate() {
|
|
6873
|
-
|
|
6874
|
-
|
|
6875
|
-
JSON.parse(localStorage.getItem('websiteData') ?? '{}')?.homePageId;
|
|
6884
|
+
const details = this.parseJson(this.storage.getItem('bDetails'));
|
|
6885
|
+
const templateId = details?.templateId ?? '';
|
|
6876
6886
|
return this.http.get(this.BASE_URL + `business/v3/website/${templateId}/pages/list`);
|
|
6877
6887
|
}
|
|
6878
6888
|
getEcommerceConfigs() {
|
|
@@ -7047,7 +7057,7 @@ class RestService {
|
|
|
7047
7057
|
getMetalPrice(storeId) {
|
|
7048
7058
|
return this.http.get(this.passBookUrl + `ext/connect/simpo/metal/prices?id=${storeId}`);
|
|
7049
7059
|
}
|
|
7050
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, deps: [{ token: i1.HttpClient }, { token: API_URL }, { token: ECOMMERCE_URL }, { token: CMIS_URL }, { token: i2$3.CookieService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
7060
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, deps: [{ token: i1.HttpClient }, { token: API_URL }, { token: ECOMMERCE_URL }, { token: CMIS_URL }, { token: i2$3.CookieService }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
7051
7061
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, providedIn: 'root' }); }
|
|
7052
7062
|
}
|
|
7053
7063
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RestService, decorators: [{
|
|
@@ -7064,7 +7074,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7064
7074
|
}] }, { type: undefined, decorators: [{
|
|
7065
7075
|
type: Inject,
|
|
7066
7076
|
args: [CMIS_URL]
|
|
7067
|
-
}] }, { type: i2$3.CookieService }
|
|
7077
|
+
}] }, { type: i2$3.CookieService }, { type: undefined, decorators: [{
|
|
7078
|
+
type: Inject,
|
|
7079
|
+
args: [LOCAL_STORAGE]
|
|
7080
|
+
}] }] });
|
|
7068
7081
|
|
|
7069
7082
|
class Cart {
|
|
7070
7083
|
constructor(json, type = null) {
|
|
@@ -14276,7 +14289,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
14276
14289
|
|
|
14277
14290
|
class HeaderSectionComponent {
|
|
14278
14291
|
// matDialog = inject(MatDialog);
|
|
14279
|
-
constructor(_eventService, router, activatedRoute, matDialog, storageService, restService, eventService
|
|
14292
|
+
constructor(_eventService, router, activatedRoute, matDialog, storageService, restService, eventService, storage
|
|
14293
|
+
// private cdRef: ChangeDetectorRef
|
|
14294
|
+
) {
|
|
14280
14295
|
this._eventService = _eventService;
|
|
14281
14296
|
this.router = router;
|
|
14282
14297
|
this.activatedRoute = activatedRoute;
|
|
@@ -14284,6 +14299,7 @@ class HeaderSectionComponent {
|
|
|
14284
14299
|
this.storageService = storageService;
|
|
14285
14300
|
this.restService = restService;
|
|
14286
14301
|
this.eventService = eventService;
|
|
14302
|
+
this.storage = storage;
|
|
14287
14303
|
this.edit = false;
|
|
14288
14304
|
this.scrollValue = 0;
|
|
14289
14305
|
this.color = '#000000';
|
|
@@ -14305,8 +14321,8 @@ class HeaderSectionComponent {
|
|
|
14305
14321
|
this.schemeAvailable = false;
|
|
14306
14322
|
this.Object = Object;
|
|
14307
14323
|
this.showPincodeInput = false;
|
|
14308
|
-
this.pincode =
|
|
14309
|
-
this.getPincode =
|
|
14324
|
+
this.pincode = this.storage.getItem('pincode') ?? "";
|
|
14325
|
+
this.getPincode = this.storage.getItem('pincode') || '';
|
|
14310
14326
|
this.pinError = false;
|
|
14311
14327
|
this.showLogin = false;
|
|
14312
14328
|
this.byMetalAndStone = [
|
|
@@ -14428,7 +14444,9 @@ class HeaderSectionComponent {
|
|
|
14428
14444
|
this.resizeObserver.observe(this.childContainer.nativeElement);
|
|
14429
14445
|
}
|
|
14430
14446
|
checkPassbookApp() {
|
|
14431
|
-
this.
|
|
14447
|
+
const details = this.storage.getItem('bId');
|
|
14448
|
+
const bId = details ?? '';
|
|
14449
|
+
this.restService.PassbookAppStatus(bId).subscribe((res) => {
|
|
14432
14450
|
if (res?.data) {
|
|
14433
14451
|
this.passbookAppStatus = true;
|
|
14434
14452
|
}
|
|
@@ -14458,7 +14476,7 @@ class HeaderSectionComponent {
|
|
|
14458
14476
|
this.showEditors = isShow;
|
|
14459
14477
|
}
|
|
14460
14478
|
goToHome() {
|
|
14461
|
-
if (
|
|
14479
|
+
if (this.storage.getItem('REQUEST_FROM') === 'E_COMMERCE')
|
|
14462
14480
|
return;
|
|
14463
14481
|
this.router.navigate(['']);
|
|
14464
14482
|
}
|
|
@@ -14571,8 +14589,8 @@ class HeaderSectionComponent {
|
|
|
14571
14589
|
}
|
|
14572
14590
|
setPincode() {
|
|
14573
14591
|
if (this.pincode && this.pincode?.length == 6) {
|
|
14574
|
-
|
|
14575
|
-
this.getPincode =
|
|
14592
|
+
this.storage.setItem('pincode', this.pincode);
|
|
14593
|
+
this.getPincode = this.storage.getItem('pincode') || '';
|
|
14576
14594
|
this.pinError = false;
|
|
14577
14595
|
}
|
|
14578
14596
|
else {
|
|
@@ -14595,7 +14613,7 @@ class HeaderSectionComponent {
|
|
|
14595
14613
|
navigateLogin() {
|
|
14596
14614
|
this.router.navigate(['/login']);
|
|
14597
14615
|
}
|
|
14598
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: RestService }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14616
|
+
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 }); }
|
|
14599
14617
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite && isMobile\">\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n <ng-container *ngIf=\"style?.headline?.display\">\n <div>\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n </div>\n </ng-container>\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">search</mat-icon>\n </div> -->\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header2Template>\n <div class=\"header1\">\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header3Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header4Template>\n <div class=\"header1\">\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container> </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\n (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n <div class=\"d-flex gap-3\"\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | lowercase | titlecase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <div class=\"d-flex\">\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n <div *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\n <mat-icon>person_outline</mat-icon>\n Login\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"icons\" (click)=\"goToHome()\">\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n <span [simpoColor]=\"simpoColor\">Home</span>\n </div>\n <div class=\"icons\" (click)=\"searchProducts()\">\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n <span [simpoColor]=\"simpoColor\">Shop</span>\n </div>\n <div class=\"icons\" (click)=\"goToWishlist()\">\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\n </div>\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n <span [simpoColor]=\"simpoColor\">Cart</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n </div> -->\n <div class=\"w-75 d-flex align-items-center\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n </div>\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n height=\"30\" version=\"1.1\">\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n </g>\n </svg>\n <div [style.color]=\"accentColor\">Schemes</div>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-center\">\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n Pincode\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n getPincode}}</div>\n\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n </div>\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getCartItemsCount}}</div>\n </div>\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n </div>\n <!-- (mouseleave)=\"showLogin = false\" -->\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n <!-- <div> -->\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n <!-- </div> -->\n </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | uppercase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n <div class=\"offcanvas-header\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\n </div>\n <div class=\"offcanvas-body\">\n <div class=\"pages\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"offcanvas-footer\">\n <div class=\"canvas-button\">\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #ecomProfileTemplate>\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n\n\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\n\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\n {{ele?.categoryName | titlecase}}\n </div>\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"data?.styles?.headline?.color\">\n Collections\n </div>\n </div>\n <!-- (mouseleave)=\"showList = false\" -->\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\n <div class=\"list-header mb-3\">By Price</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\n <div class=\"each-price cursor-pointer\"\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\n {{price | titlecase}}\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4 h-100 overflow-scroll\"\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\n <div class=\"list-header mb-3\">By Style</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\n |\n titlecase}}</div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\n <div class=\"list-header mb-3\">By Metal & Stone</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\n <div class=\"d-flex gap-2 align-items-center\">\n <div style=\"width: 15px;height: 20px;\">\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"each-price cursor-pointer\">{{collection.name\n |\n titlecase}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- (mouseleave)=\"showCollections = false\" -->\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\n <div class=\"collection row col-3 align-items-center\"\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\n <div class=\"col-imag col-4\">\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"col-8 text-overflow\">\n {{collection?.collectionName | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\n (click)=\"applyFilterToList(image, 'collections')\">\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\n <div class=\"text-center p-2 btm-col-name position-absolute\"\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n [spacingHorizontal]=\"stylesLayout\">\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\n </div>\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\n </div>\n </div>\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
|
|
14600
14618
|
}
|
|
14601
14619
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
|
|
@@ -14635,7 +14653,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
14635
14653
|
MovingTextComponent,
|
|
14636
14654
|
ContentFitDirective,
|
|
14637
14655
|
], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n [class.margin-bottom]=\"isHeaderSticky && isEcommerceWebsite && isMobile\">\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n <ng-container *ngIf=\"style?.headline?.display\">\n <div>\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n </div>\n </ng-container>\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">search</mat-icon>\n </div> -->\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header2Template>\n <div class=\"header1\">\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header3Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header4Template>\n <div class=\"header1\">\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container> </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\n (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n <div class=\"d-flex gap-3\"\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | lowercase | titlecase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <div class=\"d-flex\">\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n <div *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\n <mat-icon>person_outline</mat-icon>\n Login\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"icons\" (click)=\"goToHome()\">\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n <span [simpoColor]=\"simpoColor\">Home</span>\n </div>\n <div class=\"icons\" (click)=\"searchProducts()\">\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n <span [simpoColor]=\"simpoColor\">Shop</span>\n </div>\n <div class=\"icons\" (click)=\"goToWishlist()\">\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\n </div>\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n <span [simpoColor]=\"simpoColor\">Cart</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n </div> -->\n <div class=\"w-75 d-flex align-items-center\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n </div>\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n height=\"30\" version=\"1.1\">\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n </g>\n </svg>\n <div [style.color]=\"accentColor\">Schemes</div>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-center\">\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n Pincode\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n getPincode}}</div>\n\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n </div>\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getCartItemsCount}}</div>\n </div>\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n </div>\n <!-- (mouseleave)=\"showLogin = false\" -->\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n <!-- <div> -->\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n <!-- </div> -->\n </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | uppercase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n <div class=\"offcanvas-header\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\n </div>\n <div class=\"offcanvas-body\">\n <div class=\"pages\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"offcanvas-footer\">\n <div class=\"canvas-button\">\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #ecomProfileTemplate>\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n\n\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\n\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\n {{ele?.categoryName | titlecase}}\n </div>\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"data?.styles?.headline?.color\">\n Collections\n </div>\n </div>\n <!-- (mouseleave)=\"showList = false\" -->\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\n <div class=\"list-header mb-3\">By Price</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\n <div class=\"each-price cursor-pointer\"\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\n {{price | titlecase}}\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4 h-100 overflow-scroll\"\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\n <div class=\"list-header mb-3\">By Style</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\n |\n titlecase}}</div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\n <div class=\"list-header mb-3\">By Metal & Stone</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\n <div class=\"d-flex gap-2 align-items-center\">\n <div style=\"width: 15px;height: 20px;\">\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"each-price cursor-pointer\">{{collection.name\n |\n titlecase}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- (mouseleave)=\"showCollections = false\" -->\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\n <div class=\"collection row col-3 align-items-center\"\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\n <div class=\"col-imag col-4\">\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"col-8 text-overflow\">\n {{collection?.collectionName | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\n (click)=\"applyFilterToList(image, 'collections')\">\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\n <div class=\"text-center p-2 btm-col-name position-absolute\"\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n [spacingHorizontal]=\"stylesLayout\">\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\n </div>\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\n </div>\n </div>\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"] }]
|
|
14638
|
-
}], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }
|
|
14656
|
+
}], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }, { type: undefined, decorators: [{
|
|
14657
|
+
type: Inject,
|
|
14658
|
+
args: [LOCAL_STORAGE]
|
|
14659
|
+
}] }], propDecorators: { data: [{
|
|
14639
14660
|
type: Input
|
|
14640
14661
|
}], nextComponent: [{
|
|
14641
14662
|
type: Input
|