simpo-component-library 1.3.11 → 1.3.13

package/fesm2022/simpo-component-library.mjs

@@ -1,24 +1,24 @@
 import * as i2 from '@angular/common';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Input, EventEmitter, Injectable, Directive, HostListener, NgModule, Output, ViewChild, PLATFORM_ID, Inject } from '@angular/core';
+import { Component, Input, EventEmitter, Injectable, Directive, HostListener, NgModule, Output, ViewChild, Inject, PLATFORM_ID } from '@angular/core';
 import { MatGridListModule } from '@angular/material/grid-list';
 import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
 import * as i2$2 from '@angular/material/dialog';
-import { MatDialogModule } from '@angular/material/dialog';
+import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import * as i2$3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i1 from '@angular/platform-browser';
+import { map } from 'rxjs';
+import * as i1$1 from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
 import * as i2$4 from '@angular/router';
 import * as i2$5 from '@angular/material/snack-bar';
 import * as i2$6 from 'ngx-skeleton-loader';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import * as mapboxgl from 'mapbox-gl';
-import * as i1$1 from '@angular/common/http';
-import { HttpClientModule } from '@angular/common/http';
-import { map } from 'rxjs';
 import * as i8 from '@angular/material/slider';
 import { MatSliderModule } from '@angular/material/slider';
 import { MatSelectModule } from '@angular/material/select';
@@ -2981,7 +2981,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
             }] } });
 
 var cartId = "";
-var orderedItems = [
+var orderedItems$1 = [
 	{
 		itemId: "1ef50089-2cf0-6bdf-8ea9-b51e0a912f33",
 		businessId: "21",
@@ -2995,7 +2995,7 @@ var orderedItems = [
 		taxAfterDiscount: 10
 	}
 ];
-var billdetails = {
+var billdetails$1 = {
 	totalNetValue: 260,
 	totalGrossValue: 0,
 	totalTax: 20,
@@ -3010,7 +3010,7 @@ var billdetails = {
 		igstValue: 5
 	}
 };
-var locationDetails = {
+var locationDetails$1 = {
 	countryId: "",
 	cityId: "",
 	stateId: "",
@@ -3021,22 +3021,163 @@ var locationDetails = {
 	localityName: "",
 	pinCode: ""
 };
-var platform = "WEB";
-var totalAmount = 400;
+var platform$1 = "WEB";
+var totalAmount$1 = 400;
 var UserCart = {
 	cartId: cartId,
-	orderedItems: orderedItems,
-	billdetails: billdetails,
-	locationDetails: locationDetails,
-	platform: platform,
-	totalAmount: totalAmount
+	orderedItems: orderedItems$1,
+	billdetails: billdetails$1,
+	locationDetails: locationDetails$1,
+	platform: platform$1,
+	totalAmount: totalAmount$1
 };
 
+class RestService {
+    constructor(http, eventService) {
+        this.http = http;
+        this.eventService = eventService;
+        this.BASE_URL = "https://dev-api.simpo.ai/";
+        this.environmentTypeSubscriber = null;
+        this.environmentTypeSubscriber = this.eventService.environmentType.subscribe((response) => {
+            if (response == "DEV")
+                this.BASE_URL = "https://dev-api.simpo.ai/";
+            else if (response == "STAGE")
+                this.BASE_URL = "https://state-api.simpo.ai/";
+            else
+                this.BASE_URL = "https://api.simpo.ai/";
+        });
+    }
+    ngOnDestroy() {
+        if (this.environmentTypeSubscriber)
+            this.environmentTypeSubscriber?.unsubscribe();
+    }
+    getFeaturedProduct(collectionId) {
+        let subIndustryId = JSON.parse(localStorage.getItem("bDetails") ?? "{}")?.subIndustryId;
+        if (!subIndustryId)
+            subIndustryId = JSON.parse(localStorage.getItem("websiteData") ?? "{}")?.subIndustryId;
+        return this.http.get(this.BASE_URL + `ecommerce/product/collection/id?collectionId=${collectionId || ''}&subIndustryId=${subIndustryId || ''}`).pipe(map((response) => response.data?.map((product) => new Product(product))));
+    }
+    getProductDetails(productId = null) {
+        const payload = {
+            pageNo: 0,
+            pageSize: 1,
+            itemId: productId
+        };
+        return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => response.data.data.map((product) => new Product(product))));
+    }
+    getAllCategories() {
+        const payload = {
+            pageNo: 0,
+            pageSize: 10,
+            businessId: localStorage.getItem("bId")
+        };
+        return this.http.put(this.BASE_URL + 'ecommerce/inventory/get/category', payload).pipe(map((response) => response.data.data?.map((category) => new Category(category))));
+    }
+    getAllCollections() {
+        const payload = {
+            pageNo: 0,
+            pageSize: 10,
+            businessId: localStorage.getItem("bId")
+        };
+        return this.http.put(this.BASE_URL + 'ecommerce/inventory/get/collection', payload).pipe(map((response) => response.data.data?.map((collection) => new Collection(collection))));
+    }
+    getFilteredProduct(collectionIds, categoryIds, searchText, minPrice, maxPrice, pageNo, size) {
+        const payload = {
+            "businessId": localStorage.getItem("bId"),
+            "collectionId": collectionIds,
+            "categoryId": categoryIds,
+            "searchText": searchText,
+            "minPrice": minPrice ?? 0,
+            "maxPrice": maxPrice ?? 0,
+            "pageNo": pageNo,
+            "pageSize": size
+        };
+        return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload);
+    }
+    generateOTP(mobile, countryCode) {
+        return this.http.post(this.BASE_URL + `ecommerce/user/otp/trigger?mobile=${mobile}&countryCode=${countryCode}`, null);
+    }
+    verifyOTP(mobile, otp) {
+        const businessId = localStorage.getItem("bId") ?? "";
+        return this.http.put(this.BASE_URL + `ecommerce/user/authenticate?mobile=${map}&otp=${otp}&businessId=${businessId}`, null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RestService, deps: [{ token: i1$1.HttpClient }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RestService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RestService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: EventsService }] });
+
+class AuthenticateUserComponent {
+    constructor(matData, restService, dialogRef) {
+        this.matData = matData;
+        this.restService = restService;
+        this.dialogRef = dialogRef;
+        // @Input() responseData?: any;
+        // @Input() index? : number;
+        // @Input() edit? : boolean;
+        // @Input() delete? : boolean;
+        this.otpString = "";
+        this.screen = 'LOGIN';
+        this.mobile = null;
+        this.countryCode = "91";
+    }
+    ngOnInit() {
+        if (this.matData)
+            this.data = this.matData;
+        this.styles = this.data?.styles;
+    }
+    move(event, idx) {
+        document.getElementById("otp_" + (idx + 1))?.focus();
+    }
+    close() {
+        this.dialogRef.close();
+    }
+    goBack() {
+        this.otpString = '';
+        this.screen = "LOGIN";
+    }
+    generateOTP() {
+        this.restService.generateOTP(this.countryCode ?? "", this.mobile ?? "").subscribe((response) => {
+            this.screen = "OTP";
+        });
+    }
+    verifyOTP() {
+        this.restService.verifyOTP(this.mobile ?? "", this.otpString).subscribe((response) => {
+            // localStorage.setItem("userId", response.userId);
+            this.dialogRef.close();
+        });
+    }
+    resendOTP() {
+        // this.restService.re
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AuthenticateUserComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: RestService }, { token: i2$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: AuthenticateUserComponent, isStandalone: true, selector: "simpo-authenticate-user", inputs: { data: "data" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"screen\">\r\n    <section style=\"padding: 15px;\" class=\"d-flex flex-column align-item-center justify-content-center position-relative\" *ngSwitchCase=\"'LOGIN'\">\r\n        <h5 class=\"text-center\">Excee Fashion</h5>\r\n        <h2 class=\"text-center\">Welcome</h2>\r\n        <p class=\"text-center\">Log or Signup in to your account</p>\r\n        <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n        <p class=\"text-center\">You will receive an SMS verification</p>\r\n\r\n        <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n            <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n            [color]=\"styles?.background?.accentColor\" (click)=\"generateOTP()\">Continue</button>\r\n            <div class=\"alternate-opt text-center\" [style.color]=\"data.styles.background.accentColor\">Use email instead</div>\r\n        </div>\r\n        <div class=\"close-btn\" (click)=\"close()\">\r\n            <mat-icon>close</mat-icon>\r\n        </div>\r\n    </section>\r\n    <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\" class=\"d-flex flex-column align-item-center justify-content-center position-relative\">\r\n        <h5 class=\"text-center\">Excee Fashion</h5>\r\n        <h2 class=\"text-center\">Verify OTP</h2>\r\n        <p class=\"text-center\">Enter the 4-digit that we have sent via the phone number +{{ countryCode }}{{ mobile }}</p>\r\n        <div class=\"otpContainer\">\r\n            <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n                <input type=\"number\" class=\"otp\" [(ngModel)]=\"otpString[idx]\" max=\"1\" [id]=\"'otp_'+idx\" (keyup)=\"move($event, idx)\">\r\n            </ng-container>\r\n        </div>\r\n\r\n        <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n            <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n            [color]=\"styles?.background?.accentColor\" (click)=\"verifyOTP()\">Continue</button>\r\n            <div class=\"alternate-opt text-center\" [style.color]=\"data.styles.background.accentColor\" (click)=\"resendOTP()\">Resend code</div>\r\n        </div>\r\n       \r\n        <div class=\"close-btn\" (click)=\"close()\">\r\n            <mat-icon>close</mat-icon>\r\n        </div>\r\n        <div class=\"back-btn\" (click)=\"goBack()\">\r\n            <mat-icon>keyboard_backspace</mat-icon>\r\n        </div>\r\n    </section>\r\n</ng-container>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: AuthenticateUserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'simpo-authenticate-user', standalone: true, imports: [
+                        FormsModule,
+                        MatIcon,
+                        CommonModule,
+                        ButtonDirectiveDirective,
+                    ], template: "<ng-container [ngSwitch]=\"screen\">\r\n    <section style=\"padding: 15px;\" class=\"d-flex flex-column align-item-center justify-content-center position-relative\" *ngSwitchCase=\"'LOGIN'\">\r\n        <h5 class=\"text-center\">Excee Fashion</h5>\r\n        <h2 class=\"text-center\">Welcome</h2>\r\n        <p class=\"text-center\">Log or Signup in to your account</p>\r\n        <input type=\"number\" placeholder=\"Mobile Number\" [(ngModel)]=\"mobile\">\r\n        <p class=\"text-center\">You will receive an SMS verification</p>\r\n\r\n        <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n            <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n            [color]=\"styles?.background?.accentColor\" (click)=\"generateOTP()\">Continue</button>\r\n            <div class=\"alternate-opt text-center\" [style.color]=\"data.styles.background.accentColor\">Use email instead</div>\r\n        </div>\r\n        <div class=\"close-btn\" (click)=\"close()\">\r\n            <mat-icon>close</mat-icon>\r\n        </div>\r\n    </section>\r\n    <section *ngSwitchCase=\"'OTP'\" style=\"padding: 15px;\" class=\"d-flex flex-column align-item-center justify-content-center position-relative\">\r\n        <h5 class=\"text-center\">Excee Fashion</h5>\r\n        <h2 class=\"text-center\">Verify OTP</h2>\r\n        <p class=\"text-center\">Enter the 4-digit that we have sent via the phone number +{{ countryCode }}{{ mobile }}</p>\r\n        <div class=\"otpContainer\">\r\n            <ng-container *ngFor=\"let _ of [].constructor(4); let idx = index\">\r\n                <input type=\"number\" class=\"otp\" [(ngModel)]=\"otpString[idx]\" max=\"1\" [id]=\"'otp_'+idx\" (keyup)=\"move($event, idx)\">\r\n            </ng-container>\r\n        </div>\r\n\r\n        <div class=\"action-btn d-flex flex-column align-item-center justify-content-center\">\r\n            <button class=\"btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons[0]?.styles\"\r\n            [color]=\"styles?.background?.accentColor\" (click)=\"verifyOTP()\">Continue</button>\r\n            <div class=\"alternate-opt text-center\" [style.color]=\"data.styles.background.accentColor\" (click)=\"resendOTP()\">Resend code</div>\r\n        </div>\r\n       \r\n        <div class=\"close-btn\" (click)=\"close()\">\r\n            <mat-icon>close</mat-icon>\r\n        </div>\r\n        <div class=\"back-btn\" (click)=\"goBack()\">\r\n            <mat-icon>keyboard_backspace</mat-icon>\r\n        </div>\r\n    </section>\r\n</ng-container>", styles: ["input,button{width:80%!important;margin:10px auto}input{padding:10px}.alternate-opt:hover{text-decoration:underline;cursor:pointer}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer}.otpContainer{display:flex;gap:4px;margin:auto}.otpContainer .otp{border-radius:50%;padding:5px;height:50px;width:50px!important;margin:5px!important;text-align:center}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.back-btn{position:absolute;top:10px;left:10px;cursor:pointer}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: RestService }, { type: i2$2.MatDialogRef }], propDecorators: { data: [{
+                type: Input
+            }] } });
+
 class NavbarSectionComponent {
-    constructor(_eventService, router, activatedRoute) {
+    constructor(_eventService, router, activatedRoute, matDialog) {
         this._eventService = _eventService;
         this.router = router;
         this.activatedRoute = activatedRoute;
+        this.matDialog = matDialog;
         this.edit = false;
         this.scrollValue = 0;
         this.color = '#000000';
@@ -3046,13 +3187,18 @@ class NavbarSectionComponent {
         this.getScreenSize();
     }
     searchProducts() {
-        if (this.searchText.length > 2)
-            this.router.navigate(['/list'], { queryParams: { searchTxt: this.searchText } });
-        else
-            this.router.navigate(['/'], { queryParams: { searchTxt: this.searchText } });
+        this.router.navigate(['/list'], { queryParams: { searchTxt: this.searchText } });
     }
     goToAccount() {
-        this.router.navigate(['/profile']);
+        if (this.screenWidth <= 475)
+            this.router.navigate(['/profile']);
+        else {
+            this.matDialog.open(AuthenticateUserComponent, {
+                height: '50vh',
+                width: '35vw',
+                data: this.data
+            });
+        }
     }
     goToCart() {
         this.router.navigate(['/cart']);
@@ -3152,12 +3298,18 @@ class NavbarSectionComponent {
         object.forEach((key) => keys.push(Object.values(key)));
         return [...new Set(keys)];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid position-relative \">\r\n      <div class=\"w-50 left-logo-text d-flex\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n          <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n            <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n            loading=\"lazy\">\r\n          </div>\r\n          <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n            <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n          *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n          loading=\"lazy\">\r\n        </div>\r\n\r\n        <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n          <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n            <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n            <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n              <li *ngFor=\"let value of getValues(content?.ecomLinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n            </ul>\r\n          </ng-container>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n        <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n          <i class=\"fa fa-search mx-2\" aria-hidden=\"true\"></i>\r\n          <mat-icon class=\"mx-2\">add_shopping_cart</mat-icon>\r\n          <mat-icon class=\"mx-2\">person_outline</mat-icon>\r\n        </div>\r\n        <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n          aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n          <hr>\r\n          <hr>\r\n          <hr>\r\n        </button>\r\n      </div>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"navbar-nav align-items-center\">\r\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n              <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                <ng-container *ngIf=\"item.showHeader\">\r\n                  <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                  [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                  <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                    <div style=\"position: relative;margin-right: 10px;\">\r\n                      <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n                <div *ngFor=\"let button of action?.buttons\">\r\n                  <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n                  <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n          <div class=\"inner-height p-4\">\r\n            <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n              <div class=\"d-flex flex-column w-100\">\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <div class=\"title-row\">\r\n                    <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n                      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n                        <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                        loading=\"lazy\">\r\n                      </div>\r\n                      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex gap-3 align-items-center\"\r\n                      *ngIf=\"content?.logo?.isImage\">\r\n                      <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                      loading=\"lazy\">\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                  <div class=\"d-flex flex-column gap-4 w-100\">\r\n                    <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                      <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex flex-column\">\r\n                <div class=\"d-flex\">\r\n                  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                        <div style=\"position: relative;margin-right: 10px;\">\r\n                          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                        </div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex mt-4\">\r\n                  <div *ngIf=\"action?.display\" class=\"button-display\">\r\n                    <div *ngFor=\"let button of action?.buttons\">\r\n                      <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                        [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n            <div class=\"input-group\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n              <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n              <mat-icon>add_shopping_cart</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Bag</span>\r\n              <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n              <mat-icon>person_outline</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Account</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:370px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }, { token: i2$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid position-relative \">\r\n      <div class=\"w-50 left-logo-text d-flex\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n          <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n            <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n            loading=\"lazy\">\r\n          </div>\r\n          <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n            <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n          *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n          loading=\"lazy\">\r\n        </div>\r\n\r\n        <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n          <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n            <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n            <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n              <li *ngFor=\"let value of getValues(content?.ecomLinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n            </ul>\r\n          </ng-container>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n        <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n          <i class=\"fa fa-search mx-2\" aria-hidden=\"true\"></i>\r\n          <mat-icon class=\"mx-2\">add_shopping_cart</mat-icon>\r\n          <mat-icon class=\"mx-2\">person_outline</mat-icon>\r\n        </div>\r\n        <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n          aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n          <hr>\r\n          <hr>\r\n          <hr>\r\n        </button>\r\n      </div>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"navbar-nav align-items-center\">\r\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n              <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                <ng-container *ngIf=\"item.showHeader\">\r\n                  <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                  [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                  <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                    <div style=\"position: relative;margin-right: 10px;\">\r\n                      <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n                <div *ngFor=\"let button of action?.buttons\">\r\n                  <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n                  <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n          <div class=\"inner-height p-4\">\r\n            <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n              <div class=\"d-flex flex-column w-100\">\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <div class=\"title-row\">\r\n                    <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n                      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n                        <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                        loading=\"lazy\">\r\n                      </div>\r\n                      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex gap-3 align-items-center\"\r\n                      *ngIf=\"content?.logo?.isImage\">\r\n                      <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                      loading=\"lazy\">\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                  <div class=\"d-flex flex-column gap-4 w-100\">\r\n                    <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                      <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex flex-column\">\r\n                <div class=\"d-flex\">\r\n                  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                        <div style=\"position: relative;margin-right: 10px;\">\r\n                          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                        </div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex mt-4\">\r\n                  <div *ngIf=\"action?.display\" class=\"button-display\">\r\n                    <div *ngFor=\"let button of action?.buttons\">\r\n                      <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                        [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n            <div class=\"input-group\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n              <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n              <mat-icon>favorite_border</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Favourite</span>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n              <mat-icon>add_shopping_cart</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Bag</span>\r\n              <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n              <mat-icon>person_outline</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Account</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId"] }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: SimpoFooterLayoutDirective, selector: "[simpoFooterLayout]", inputs: ["simpoFooterLayout"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: NavbarSectionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-navbar-section', standalone: true, imports: [CommonModule, SimpoButtonComponent, SociaIconsComponent, MatIcon, NavbarButtonElementComponent,
+            args: [{ selector: 'simpo-navbar-section', standalone: true, imports: [
+                        CommonModule,
+                        SimpoButtonComponent,
+                        SociaIconsComponent,
+                        MatIcon,
+                        NavbarButtonElementComponent,
+                        MatDialogModule,
                         FormsModule,
                         HoverElementsComponent,
                         AnimationDirective,
@@ -3177,8 +3329,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         SimpoStickyDirective,
                         PositionLayoutDirectiveDirective,
                         TextBackgroundDirectiveDirective,
-                        ColorDirective], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid position-relative \">\r\n      <div class=\"w-50 left-logo-text d-flex\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n          <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n            <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n            loading=\"lazy\">\r\n          </div>\r\n          <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n            <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n          *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n          loading=\"lazy\">\r\n        </div>\r\n\r\n        <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n          <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n            <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n            <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n              <li *ngFor=\"let value of getValues(content?.ecomLinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n            </ul>\r\n          </ng-container>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n        <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n          <i class=\"fa fa-search mx-2\" aria-hidden=\"true\"></i>\r\n          <mat-icon class=\"mx-2\">add_shopping_cart</mat-icon>\r\n          <mat-icon class=\"mx-2\">person_outline</mat-icon>\r\n        </div>\r\n        <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n          aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n          <hr>\r\n          <hr>\r\n          <hr>\r\n        </button>\r\n      </div>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"navbar-nav align-items-center\">\r\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n              <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                <ng-container *ngIf=\"item.showHeader\">\r\n                  <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                  [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                  <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                    <div style=\"position: relative;margin-right: 10px;\">\r\n                      <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n                <div *ngFor=\"let button of action?.buttons\">\r\n                  <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n                  <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n          <div class=\"inner-height p-4\">\r\n            <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n              <div class=\"d-flex flex-column w-100\">\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <div class=\"title-row\">\r\n                    <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n                      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n                        <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                        loading=\"lazy\">\r\n                      </div>\r\n                      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex gap-3 align-items-center\"\r\n                      *ngIf=\"content?.logo?.isImage\">\r\n                      <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                      loading=\"lazy\">\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                  <div class=\"d-flex flex-column gap-4 w-100\">\r\n                    <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                      <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex flex-column\">\r\n                <div class=\"d-flex\">\r\n                  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                        <div style=\"position: relative;margin-right: 10px;\">\r\n                          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                        </div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex mt-4\">\r\n                  <div *ngIf=\"action?.display\" class=\"button-display\">\r\n                    <div *ngFor=\"let button of action?.buttons\">\r\n                      <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                        [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n            <div class=\"input-group\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n              <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n              <mat-icon>add_shopping_cart</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Bag</span>\r\n              <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n              <mat-icon>person_outline</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Account</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:370px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}\n"] }]
-        }], ctorParameters: () => [{ type: EventsService }, { type: i2$4.Router }, { type: i2$4.ActivatedRoute }], propDecorators: { data: [{
+                        ColorDirective
+                    ], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\" [simpoBackground]=\"backgroundInfo\" class=\"total-container\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\" [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\" [ngClass]=\"{'ecomStyle': isEcommerceWebsite}\">\r\n    <nav #childContainer class=\"navbar navbar-expand-lg d-block mb-0\" [simpoFooterLayout]=\"style?.layout\">\r\n    <div class=\"container-fluid position-relative \">\r\n      <div class=\"w-50 left-logo-text d-flex\">\r\n        <!-- <a class=\"navbar-brand\" href=\"#\">{{content?.siteName?.value}}</a> -->\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n          <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n            <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n            loading=\"lazy\">\r\n          </div>\r\n          <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n            <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex gap-3 gap-lg-3 align-items-lg-center\"\r\n          *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\"(click)=\"goToHome()\">\r\n          <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n          loading=\"lazy\">\r\n        </div>\r\n\r\n        <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"isEcommerceWebsite && screenWidth > 768\">\r\n          <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n            <a class=\"nav-link dropdown-toggle mx-2\" href=\"#\" [id]=\"'navbarDropdownMenuLink_' + idx\" role=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">{{ link | uppercase }}</a>\r\n            <ul class=\"dropdown-menu fs-6 position-absolute\" [attr.aria-labelledby]=\"'navbarDropdownMenuLink_'+idx\">\r\n              <li *ngFor=\"let value of getValues(content?.ecomLinks?.[link])\"><a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a></li>\r\n            </ul>\r\n          </ng-container>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"w-50 right-btn d-flex justify-content-end\">\r\n        <div *ngIf=\"screenWidth <= 768 && isEcommerceWebsite\" class=\"d-flex align-items-center justify-content-around\">\r\n          <i class=\"fa fa-search mx-2\" aria-hidden=\"true\"></i>\r\n          <mat-icon class=\"mx-2\">add_shopping_cart</mat-icon>\r\n          <mat-icon class=\"mx-2\">person_outline</mat-icon>\r\n        </div>\r\n        <button class=\"navbar-toggler menu-icon\" [simpoColor]=\"simpoColor\" [id]=\"data?.id\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNavAltMarkup\" *ngIf=\"screenWidth < 769\"\r\n          aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\r\n          <hr>\r\n          <hr>\r\n          <hr>\r\n        </button>\r\n      </div>\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"navbar-nav align-items-center\">\r\n            <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n              <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                <ng-container *ngIf=\"item.showHeader\">\r\n                  <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"\r\n                  [bgColor]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n                </ng-container>\r\n              </ng-container>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                  <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                    <div style=\"position: relative;margin-right: 10px;\">\r\n                      <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                    </div>\r\n                  </ng-container>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex\">\r\n              <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n                <div *ngFor=\"let button of action?.buttons\">\r\n                  <button class=\"button\" (click)=\"redirectTo(button?.content)\" simpoButtonDirective [scrollValue]=\"scrollValue\" [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button.styles\" [color]=\"accentColor\">{{button?.content?.label}}</button>\r\n                  <!-- <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                    [color]=\"data?.styles?.background?.accentColor\"></app-button-element> -->\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\" *ngIf=\"screenWidth <= 768\">\r\n          <div class=\"inner-height p-4\">\r\n            <div class=\"nab-bar-mobile flex-column d-flex justify-content-between align-items-center\">\r\n              <div class=\"d-flex flex-column w-100\">\r\n                <div class=\"d-flex justify-content-between align-items-center\">\r\n                  <div class=\"title-row\">\r\n                    <div class=\"d-flex gap-3 align-items-center\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\">\r\n                      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n                        <img [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                        loading=\"lazy\">\r\n                      </div>\r\n                      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\">\r\n                        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n                      </div>\r\n                    </div>\r\n                    <div class=\"d-flex gap-3 align-items-center\"\r\n                      *ngIf=\"content?.logo?.isImage\">\r\n                      <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\"\r\n                      loading=\"lazy\">\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\">\r\n                    <mat-icon>close</mat-icon>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex justify-content-between align-items-center mt-5\">\r\n                  <div class=\"d-flex flex-column gap-4 w-100\">\r\n                    <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n                      <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\" [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"d-flex flex-column\">\r\n                <div class=\"d-flex\">\r\n                  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n                    [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n                    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n                      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n                        <div style=\"position: relative;margin-right: 10px;\">\r\n                          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n                        </div>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"d-flex mt-4\">\r\n                  <div *ngIf=\"action?.display\" class=\"button-display\">\r\n                    <div *ngFor=\"let button of action?.buttons\">\r\n                      <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n                        [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"collapse navbar-collapse position-absolute pr-0\" style=\"right: 0px;\" *ngIf=\"screenWidth > 768\">\r\n          <div class=\"container-fluid justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n            <div class=\"input-group\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n              <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n              <mat-icon>favorite_border</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Favourite</span>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center mx-3 position-relative\" style=\"width: 60px; cursor: pointer;\" (click)=\"goToCart()\">\r\n              <mat-icon>add_shopping_cart</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Bag</span>\r\n              <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n            </div>\r\n            <div class=\"d-flex flex-column align-items-center\" style=\"width: 60px; margin-left: -10px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n              <mat-icon>person_outline</mat-icon>\r\n              <span class=\"text-dark fw-normal fs-6\">Account</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n</div>\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.ecomStyle{box-shadow:-9px 5px 3px #99999929}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important}.right-btn{width:15%!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:-10px;right:10px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.input-group{position:relative;width:340px;outline:none;border:none;border-radius:5px;height:45px;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin-right:25px}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}\n"] }]
+        }], ctorParameters: () => [{ type: EventsService }, { type: i2$4.Router }, { type: i2$4.ActivatedRoute }, { type: i2$2.MatDialog }], propDecorators: { data: [{
                 type: Input
             }], nextComponent: [{
                 type: Input
@@ -4325,78 +4478,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 args: ['mainContainer']
             }] } });
 
-class RestService {
-    constructor(http, eventService) {
-        this.http = http;
-        this.eventService = eventService;
-        this.BASE_URL = "https://dev-api.simpo.ai/";
-        this.environmentTypeSubscriber = null;
-        this.environmentTypeSubscriber = this.eventService.environmentType.subscribe((response) => {
-            if (response == "DEV")
-                this.BASE_URL = "https://dev-api.simpo.ai/";
-            else if (response == "STAGE")
-                this.BASE_URL = "https://state-api.simpo.ai/";
-            else
-                this.BASE_URL = "https://api.simpo.ai/";
-        });
-    }
-    ngOnDestroy() {
-        if (this.environmentTypeSubscriber)
-            this.environmentTypeSubscriber?.unsubscribe();
-    }
-    getFeaturedProduct(collectionId) {
-        let subIndustryId = JSON.parse(localStorage.getItem("bDetails") ?? "{}")?.subIndustryId;
-        if (!subIndustryId)
-            subIndustryId = JSON.parse(localStorage.getItem("websiteData") ?? "{}")?.subIndustryId;
-        return this.http.get(this.BASE_URL + `ecommerce/product/collection/id?collectionId=${collectionId || ''}&subIndustryId=${subIndustryId || ''}`).pipe(map((response) => response.data?.map((product) => new Product(product))));
-    }
-    getProductDetails(productId = null) {
-        const payload = {
-            pageNo: 0,
-            pageSize: 1,
-            itemId: productId
-        };
-        return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload).pipe(map((response) => response.data.data.map((product) => new Product(product))));
-    }
-    getAllCategories() {
-        const payload = {
-            pageNo: 0,
-            pageSize: 10,
-            businessId: localStorage.getItem("bId")
-        };
-        return this.http.put(this.BASE_URL + 'ecommerce/inventory/get/category', payload).pipe(map((response) => response.data.data?.map((category) => new Category(category))));
-    }
-    getAllCollections() {
-        const payload = {
-            pageNo: 0,
-            pageSize: 10,
-            businessId: localStorage.getItem("bId")
-        };
-        return this.http.put(this.BASE_URL + 'ecommerce/inventory/get/collection', payload).pipe(map((response) => response.data.data?.map((collection) => new Collection(collection))));
-    }
-    getFilteredProduct(collectionIds, categoryIds, searchText, minPrice, maxPrice, pageNo, size) {
-        const payload = {
-            "businessId": localStorage.getItem("bId"),
-            "collectionId": collectionIds,
-            "categoryId": categoryIds,
-            "searchText": searchText,
-            "minPrice": minPrice ?? 0,
-            "maxPrice": maxPrice ?? 0,
-            "pageNo": pageNo,
-            "pageSize": size
-        };
-        return this.http.put(this.BASE_URL + `ecommerce/product/item/search`, payload);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RestService, deps: [{ token: i1$1.HttpClient }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RestService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: RestService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: EventsService }] });
-
 class FeaturedProductsComponent extends BaseSection {
     constructor(platformId, _eventService, restService, router) {
         super();
@@ -4540,6 +4621,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                 type: Input
             }] } });
 
+var orderedItems = [
+];
+var billdetails = {
+	totalNetValue: 0,
+	totalGrossValue: 0,
+	totalTax: 0,
+	totalOfferedValue: 0,
+	deliveryCharges: 0,
+	couponId: "",
+	discountAmount: 0,
+	afterDiscountAmount: 0,
+	taxBreakup: {
+		cgstValue: 0,
+		sgstValue: 0,
+		igstValue: 0
+	}
+};
+var locationDetails = {
+	countryId: "",
+	cityId: "",
+	stateId: "",
+	localityId: "",
+	countryName: "",
+	cityName: "",
+	stateName: "",
+	localityName: "",
+	pinCode: ""
+};
+var platform = "WEB";
+var totalAmount = 0;
+var UserFavourites = {
+	orderedItems: orderedItems,
+	billdetails: billdetails,
+	locationDetails: locationDetails,
+	platform: platform,
+	totalAmount: totalAmount
+};
+
 class OrderedItems {
     constructor(json) {
         this.itemId = json?.["itemId"];
@@ -4548,7 +4667,7 @@ class OrderedItems {
         this.brandName = json?.["brandName"];
         this.imgUrl = json?.["itemImages"]?.[0];
         this.price = json?.["price"]?.["value"];
-        this.itemTax = json?.["pice"]?.["taxAmount"];
+        this.itemTax = json?.["price"]?.["taxAmount"];
         this.quantity = json?.["quantity"];
         this.discountedPrice = json?.["price"]?.["discountedPrice"];
         this.taxAfterDiscount = json?.["taxAfterDiscount"];
@@ -4564,26 +4683,53 @@ class OrderedItems {
 class CartService {
     constructor() { }
     addItemToCart(product) {
+        this.storeItemToJSON(UserCart, product);
+    }
+    addItemToFavourite(product) {
+        this.storeItemToJSON(UserFavourites, product);
+    }
+    removeItemToFavourite(product) {
+        const index = this.getItemIdxJSON(product.itemId, UserFavourites);
+        console.log("index: ", index);
+        if (index >= 0)
+            UserFavourites.orderedItems.splice(index, 1);
+        console.log(UserFavourites);
+    }
+    convertFavToCart(product) {
+        const index = this.getItemIdxJSON(product.getItemId, UserFavourites);
+        if (index >= 0) {
+            const item = UserFavourites.orderedItems.splice(index, 1)[0];
+            UserCart.orderedItems.push(item);
+        }
+    }
+    convertCartToFav(product) {
+        const index = this.getItemIdxJSON(product.getItemId, UserCart);
+        if (index >= 0) {
+            const item = UserCart.orderedItems.splice(index, 1)[0];
+            UserFavourites.orderedItems.push(item);
+        }
+    }
+    storeItemToJSON(json, product) {
         const orderProduct = this.objectMapper(product);
         let productIndex = -1;
-        UserCart.orderedItems.forEach((p, idx) => {
+        json.orderedItems.forEach((p, idx) => {
             if (p.itemId == product.itemId)
                 productIndex = idx;
         });
         if (productIndex == -1)
-            UserCart.orderedItems.push(orderProduct);
+            json.orderedItems.push(orderProduct);
         else {
             if (product.quantity > 0) {
-                UserCart.orderedItems[productIndex].quantity = orderProduct.getQuantity;
+                json.orderedItems[productIndex].quantity = orderProduct.getQuantity;
             }
             else {
-                UserCart.orderedItems.splice(productIndex, 1);
+                json.orderedItems.splice(productIndex, 1);
             }
-            UserCart.billdetails.totalNetValue = 0;
-            UserCart.billdetails.totalTax = 0;
-            UserCart.orderedItems.forEach((item) => UserCart.billdetails.totalNetValue += (item.price * item.quantity));
-            UserCart.orderedItems.forEach((item) => UserCart.billdetails.totalTax += (item.itemTax));
-            UserCart.totalAmount = UserCart.billdetails.totalTax + UserCart.billdetails.totalNetValue;
+            json.billdetails.totalNetValue = 0;
+            json.billdetails.totalTax = 0;
+            json.orderedItems.forEach((item) => json.billdetails.totalNetValue += (item.price * item.quantity));
+            json.orderedItems.forEach((item) => json.billdetails.totalTax += (item.itemTax));
+            json.totalAmount = json.billdetails.totalTax + json.billdetails.totalNetValue;
         }
     }
     getItemQuantity(itemId) {
@@ -4597,6 +4743,17 @@ class CartService {
         else
             return UserCart.orderedItems[productIndex].quantity;
     }
+    getIsItemPresent(itemId, type) {
+        return type == "FAVOURITE" ? this.getItemIdxJSON(itemId, UserFavourites) >= 0 : this.getItemIdxJSON(itemId, UserCart) >= 0;
+    }
+    getItemIdxJSON(itemId, json) {
+        let productIndex = -1;
+        json.orderedItems.forEach((p, idx) => {
+            if (p.itemId == itemId)
+                productIndex = idx;
+        });
+        return productIndex;
+    }
     objectMapper(product) {
         return new OrderedItems(product);
     }
@@ -4682,8 +4839,17 @@ class ProductDescComponent extends BaseSection {
         category = category.replaceAll(" ", "_");
         this.router.navigate(['list'], { queryParams: { category: category } });
     }
+    addToFavourite() {
+        this.cartService.addItemToFavourite(this.responseData);
+    }
+    removeToFavourite() {
+        this.cartService.removeItemToFavourite(this.responseData);
+    }
+    get isItemAsFavorite() {
+        return this.cartService.getIsItemPresent(this.responseData.itemId, "FAVOURITE");
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }, { token: RestService }, { token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n    <div><a href=\"\" style=\"text-decoration: none; color: #0267C1\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n    <div class=\"row\">\r\n      <div class=\"col-lg-6 col-12\">\r\n        <div class=\"prod-img-block\">\r\n          <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n            <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n              <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n              <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"item-img\">\r\n            <img [src]=\"currentImg\" alt=\"\" *ngIf=\"currentImg\">\r\n            <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!currentImg\">\r\n          </div>\r\n          <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n            <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n              <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n              <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-lg-6 col-12 product-detail\">\r\n        <div class=\"heading-large\">{{responseData?.name}}</div>\r\n        <div class=\"price\">&#8377; {{responseData?.price?.sellingPrice}}</div>\r\n        <div class=\"product-desc body-large\" *ngIf=\"responseData?.descriptor?.name\">{{responseData.descriptor.name}}</div>\r\n\r\n        <div class=\"button-parent\">\r\n          <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n            <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n            <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n            <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n            <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n          </div>\r\n          <div *ngIf=\"!responseData?.quantity\">\r\n            <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.content?.button}}</button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"product-sku\">\r\n          <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n            {{responseData.itemInventory.openingStock}}</div>\r\n          <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n              *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n          </a></div>\r\n          <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n              *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n            </span></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"row prod-desc\" *ngIf=\"false\">\r\n      <div class=\"tab-group\">\r\n        <div class=\"tab\">Description</div>\r\n      </div>\r\n      <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.properties?.description\">{{responseData?.properties?.description}}</div>\r\n    </div>\r\n  </section>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px}.img-list img{height:100px;width:100%;cursor:pointer}.item-img img{height:500px;width:460px}.price{font-weight:600;font-family:Poppins;font-size:20px;margin-top:15px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}@media screen and (max-width: 500px){.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n    <div><a href=\"\" style=\"text-decoration: none; color: #0267C1\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n    <div class=\"row\">\r\n      <div class=\"col-lg-6 col-12\">\r\n        <div class=\"prod-img-block\">\r\n          <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n            <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n              <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n              <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"item-img\">\r\n            <img [src]=\"currentImg\" alt=\"\" *ngIf=\"currentImg\">\r\n            <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!currentImg\">\r\n          </div>\r\n          <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n            <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n              <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n              <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-lg-6 col-12 product-detail\">\r\n        <div class=\"heading-large\">{{responseData?.name}}</div>\r\n        <div class=\"price\">&#8377; {{responseData?.price?.sellingPrice}}</div>\r\n        <div class=\"product-desc body-large\" *ngIf=\"responseData?.descriptor?.name\">{{responseData.descriptor.name}}</div>\r\n\r\n        <div class=\"button-parent\">\r\n          <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n            <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n            <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n            <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n            <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n          </div>\r\n          <div *ngIf=\"!responseData?.quantity\">\r\n            <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.content?.button}}</button>\r\n          </div>\r\n          <div class=\"favourite\">\r\n            <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\" *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n            <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"product-sku\">\r\n          <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n            {{responseData.itemInventory.openingStock}}</div>\r\n          <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n              *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n          </a></div>\r\n          <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n              *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n            </span></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"row prod-desc\" *ngIf=\"false\">\r\n      <div class=\"tab-group\">\r\n        <div class=\"tab\">Description</div>\r\n      </div>\r\n      <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.properties?.description\">{{responseData?.properties?.description}}</div>\r\n    </div>\r\n  </section>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px}.img-list img{height:100px;width:100%;cursor:pointer}.item-img img{height:500px;width:460px}.price{font-weight:600;font-family:Poppins;font-size:20px;margin-top:15px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}@media screen and (max-width: 500px){.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border:1.5px solid lightgray;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: 
                 //DIRECTIVE
                 ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
 }
@@ -4693,12 +4859,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         FormsModule,
                         HttpClientModule,
                         SimpoComponentModule,
+                        MatIcon,
                         //DIRECTIVE
                         ButtonDirectiveDirective,
                         AnimationDirective,
                         ContentFitDirective,
                         HoverDirective
-                    ], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n    <div><a href=\"\" style=\"text-decoration: none; color: #0267C1\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n    <div class=\"row\">\r\n      <div class=\"col-lg-6 col-12\">\r\n        <div class=\"prod-img-block\">\r\n          <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n            <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n              <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n              <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"item-img\">\r\n            <img [src]=\"currentImg\" alt=\"\" *ngIf=\"currentImg\">\r\n            <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!currentImg\">\r\n          </div>\r\n          <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n            <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n              <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n              <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-lg-6 col-12 product-detail\">\r\n        <div class=\"heading-large\">{{responseData?.name}}</div>\r\n        <div class=\"price\">&#8377; {{responseData?.price?.sellingPrice}}</div>\r\n        <div class=\"product-desc body-large\" *ngIf=\"responseData?.descriptor?.name\">{{responseData.descriptor.name}}</div>\r\n\r\n        <div class=\"button-parent\">\r\n          <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n            <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n            <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n            <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n            <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n          </div>\r\n          <div *ngIf=\"!responseData?.quantity\">\r\n            <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.content?.button}}</button>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"product-sku\">\r\n          <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n            {{responseData.itemInventory.openingStock}}</div>\r\n          <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n              *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n          </a></div>\r\n          <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n              *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n            </span></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"row prod-desc\" *ngIf=\"false\">\r\n      <div class=\"tab-group\">\r\n        <div class=\"tab\">Description</div>\r\n      </div>\r\n      <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.properties?.description\">{{responseData?.properties?.description}}</div>\r\n    </div>\r\n  </section>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px}.img-list img{height:100px;width:100%;cursor:pointer}.item-img img{height:500px;width:460px}.price{font-weight:600;font-family:Poppins;font-size:20px;margin-top:15px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}@media screen and (max-width: 500px){.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"] }]
+                    ], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n    <div><a href=\"\" style=\"text-decoration: none; color: #0267C1\">Home</a> / <span>{{ responseData?.name | titlecase }}</span></div>\r\n    <div class=\"row\">\r\n      <div class=\"col-lg-6 col-12\">\r\n        <div class=\"prod-img-block\">\r\n          <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n            <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n              <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n              <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n            </ng-container>\r\n          </div>\r\n          <div class=\"item-img\">\r\n            <img [src]=\"currentImg\" alt=\"\" *ngIf=\"currentImg\">\r\n            <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!currentImg\">\r\n          </div>\r\n          <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n            <ng-container *ngFor=\"let img of responseData?.itemImages\">\r\n              <img [src]=\"img.imgUrl\" alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\" *ngIf=\"img.imgUrl\">\r\n              <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" *ngIf=\"!img.imgUrl\">\r\n            </ng-container>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"col-lg-6 col-12 product-detail\">\r\n        <div class=\"heading-large\">{{responseData?.name}}</div>\r\n        <div class=\"price\">&#8377; {{responseData?.price?.sellingPrice}}</div>\r\n        <div class=\"product-desc body-large\" *ngIf=\"responseData?.descriptor?.name\">{{responseData.descriptor.name}}</div>\r\n\r\n        <div class=\"button-parent\">\r\n          <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n            <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n            <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n            <!-- <input type=\"number\" (keyup)=\"changeQuantity(quantity.value)\" [value]=\"addedQuantity\" #quantity> -->\r\n            <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n          </div>\r\n          <div *ngIf=\"!responseData?.quantity\">\r\n            <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\">{{data?.content?.button}}</button>\r\n          </div>\r\n          <div class=\"favourite\">\r\n            <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\" *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n            <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\" *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"product-sku\">\r\n          <div *ngIf=\"responseData?.itemInventory\">SKU :\r\n            {{responseData.itemInventory.openingStock}}</div>\r\n          <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\" (click)=\"goToFilter(cat.refName)\"\r\n              *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName | titlecase}} <ng-container *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n          </a></div>\r\n          <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n              *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n            </span></div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"row prod-desc\" *ngIf=\"false\">\r\n      <div class=\"tab-group\">\r\n        <div class=\"tab\">Description</div>\r\n      </div>\r\n      <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.properties?.description\">{{responseData?.properties?.description}}</div>\r\n    </div>\r\n  </section>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px}.img-list img{height:100px;width:100%;cursor:pointer}.item-img img{height:500px;width:460px}.price{font-weight:600;font-family:Poppins;font-size:20px;margin-top:15px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}@media screen and (max-width: 500px){.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-y:scroll}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border:1.5px solid lightgray;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -4878,7 +5045,7 @@ class ProductListComponent extends BaseSection {
         return Math.ceil(this.totalCount / this.size);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$4.Router }, { token: i2$4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n    <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n      <div class=\"filter body-large\">\r\n        Filters\r\n      </div>\r\n      <div class=\"clear\" (click)=\"clearFilter()\">\r\n        Clear all\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n     <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing {{pageNo*size +1}}-{{size}} of {{ totalCount }} Results</div>\r\n     <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n        <div class=\"fs-6 fw-normal mr-3\" style=\"color: #6c757d82;\">Sort by</div>\r\n        <select (change)=\"applyFilter($event, 'SORT')\">\r\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex justify-content-between\">\r\n    <div class=\"filter-side\">\r\n\r\n      <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n        <ng-container *ngFor=\"let filter of filterList\">\r\n          <div class=\"d-flex justify-content-between w-100 chip\">\r\n            <span>{{filter.name}}</span>\r\n            <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n        <div class=\"categories heading-small\">\r\n          Shop by categories\r\n        </div>\r\n        <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\">\r\n          <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n          <div>{{category.option | uppercase}}</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n        <div class=\"categories heading-small\">\r\n          Shop by collections\r\n        </div>\r\n        <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n          <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n          <div>{{collection.option | uppercase}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"price-section\">\r\n        <div class=\"categories heading-small\">\r\n          Shop by price\r\n        </div>\r\n        <div>\r\n          <mat-slider min=\"0\" max=\"1000\" style=\"width: 250px;\">\r\n            <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n            <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n          </mat-slider>\r\n        </div>\r\n        <div class=\"price-button-section\">\r\n          <div class=\"button-section\">\r\n            <button (click)=\"applyFilter()\">Filter</button>\r\n          </div>\r\n          <div class=\"price-range\">\r\n            Price: ${{ pricingMin }} - ${{ pricingMax }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n      <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n        <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\" style=\"cursor: pointer;\">\r\n          <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image\">\r\n            <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n          </div>\r\n          <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\">\r\n            <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n          </div>\r\n          <div class=\"mt-2\">\r\n            <div class=\"product-name heading-large text-left\">\r\n              {{product.name}}</div>\r\n            <div class=\"price body-large text-left\">\r\n              ${{product.price.sellingPrice}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <!-- <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n          <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n            [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n        </div> -->\r\n          <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"getTotalPage\" [currentPage]=\"pageNo +1\" ></simpo-pagnination>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}.filter-side{width:20%}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}.filter-side{display:none}.right-side{width:100%}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i8.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i8.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n    <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n      <div class=\"filter body-large\">\r\n        Filters\r\n      </div>\r\n      <div class=\"clear\" (click)=\"clearFilter()\">\r\n        Clear all\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n     <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing {{pageNo*size +1}}-{{size}} of {{ totalCount }} Results</div>\r\n     <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n        <div class=\"fs-6 fw-normal mr-3\" style=\"color: #6c757d82;\">Sort by</div>\r\n        <select (change)=\"applyFilter($event, 'SORT')\">\r\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex justify-content-between\">\r\n    <div class=\"filter-side\">\r\n\r\n      <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n        <ng-container *ngFor=\"let filter of filterList\">\r\n          <div class=\"d-flex justify-content-between w-100 chip\">\r\n            <span>{{filter.name}}</span>\r\n            <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n        <div class=\"categories heading-small\">\r\n          Shop by categories\r\n        </div>\r\n        <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\">\r\n          <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n          <div>{{category.option | uppercase}}</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n        <div class=\"categories heading-small\">\r\n          Shop by collections\r\n        </div>\r\n        <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n          <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n          <div>{{collection.option | uppercase}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"price-section\">\r\n        <div class=\"categories heading-small\">\r\n          Shop by price\r\n        </div>\r\n        <div>\r\n          <mat-slider min=\"0\" max=\"1000\" style=\"width: 250px;\">\r\n            <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n            <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n          </mat-slider>\r\n        </div>\r\n        <div class=\"price-button-section\">\r\n          <div class=\"button-section\">\r\n            <button (click)=\"applyFilter()\">Filter</button>\r\n          </div>\r\n          <div class=\"price-range\">\r\n            Price: ${{ pricingMin }} - ${{ pricingMax }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n      <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0 && false\">\r\n        <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\" style=\"cursor: pointer;\">\r\n          <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image\">\r\n            <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n          </div>\r\n          <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\">\r\n            <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n          </div>\r\n          <div class=\"mt-2\">\r\n            <div class=\"product-name heading-large text-left\">\r\n              {{product.name}}</div>\r\n            <div class=\"price body-large text-left\">\r\n              ${{product.price.sellingPrice}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <!-- <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n          <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n            [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n        </div> -->\r\n          <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"getTotalPage\" [currentPage]=\"pageNo +1\" ></simpo-pagnination>\r\n      </div>\r\n      \r\n      <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0 || true\">\r\n        <div>\r\n          <div class=\"cart-image\">\r\n            <img style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n          </div>\r\n          <div class=\"cart-text\">\r\n            <div class=\"heading-medium d-flex justify-content-center\">\r\n              Product list is empty\r\n            </div>\r\n            <div class=\"description d-flex justify-content-center mt-4\">\r\n              Looks like no item is present with filter. Go ahead & explore top categories.\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}.filter-side{width:20%}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}.filter-side{display:none}.right-side{width:100%}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "component", type: i8.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i8.MatSliderRangeThumb, selector: "input[matSliderStartThumb], input[matSliderEndThumb]", exportAs: ["matSliderRangeThumb"] }, { kind: "component", type: PagninationComponent, selector: "simpo-pagnination", inputs: ["totalPages", "currentPage"] }, { kind: "directive", type: 
                 //directive
                 AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
 }
@@ -4897,7 +5064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         HoverDirective,
                         ButtonDirectiveDirective,
                         MatIcon
-                    ], template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n    <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n      <div class=\"filter body-large\">\r\n        Filters\r\n      </div>\r\n      <div class=\"clear\" (click)=\"clearFilter()\">\r\n        Clear all\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n     <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing {{pageNo*size +1}}-{{size}} of {{ totalCount }} Results</div>\r\n     <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n        <div class=\"fs-6 fw-normal mr-3\" style=\"color: #6c757d82;\">Sort by</div>\r\n        <select (change)=\"applyFilter($event, 'SORT')\">\r\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex justify-content-between\">\r\n    <div class=\"filter-side\">\r\n\r\n      <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n        <ng-container *ngFor=\"let filter of filterList\">\r\n          <div class=\"d-flex justify-content-between w-100 chip\">\r\n            <span>{{filter.name}}</span>\r\n            <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n        <div class=\"categories heading-small\">\r\n          Shop by categories\r\n        </div>\r\n        <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\">\r\n          <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n          <div>{{category.option | uppercase}}</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n        <div class=\"categories heading-small\">\r\n          Shop by collections\r\n        </div>\r\n        <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n          <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n          <div>{{collection.option | uppercase}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"price-section\">\r\n        <div class=\"categories heading-small\">\r\n          Shop by price\r\n        </div>\r\n        <div>\r\n          <mat-slider min=\"0\" max=\"1000\" style=\"width: 250px;\">\r\n            <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n            <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n          </mat-slider>\r\n        </div>\r\n        <div class=\"price-button-section\">\r\n          <div class=\"button-section\">\r\n            <button (click)=\"applyFilter()\">Filter</button>\r\n          </div>\r\n          <div class=\"price-range\">\r\n            Price: ${{ pricingMin }} - ${{ pricingMax }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n      <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n        <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\" style=\"cursor: pointer;\">\r\n          <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image\">\r\n            <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n          </div>\r\n          <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\">\r\n            <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n          </div>\r\n          <div class=\"mt-2\">\r\n            <div class=\"product-name heading-large text-left\">\r\n              {{product.name}}</div>\r\n            <div class=\"price body-large text-left\">\r\n              ${{product.price.sellingPrice}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <!-- <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n          <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n            [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n        </div> -->\r\n          <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"getTotalPage\" [currentPage]=\"pageNo +1\" ></simpo-pagnination>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}.filter-side{width:20%}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}.filter-side{display:none}.right-side{width:100%}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}\n"] }]
+                    ], template: "<section class=\"container-fluid total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n  (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"d-flex justify-content-between align-items-center w-100\">\r\n    <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\" style=\"width: 20%;\">\r\n      <div class=\"filter body-large\">\r\n        Filters\r\n      </div>\r\n      <div class=\"clear\" (click)=\"clearFilter()\">\r\n        Clear all\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center justify-content-between\" style=\"width: 80%;\">\r\n     <div style=\"color: #6c757d82;\" class=\"fs-6 fw-normal\">Showing {{pageNo*size +1}}-{{size}} of {{ totalCount }} Results</div>\r\n     <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n        <div class=\"fs-6 fw-normal mr-3\" style=\"color: #6c757d82;\">Sort by</div>\r\n        <select (change)=\"applyFilter($event, 'SORT')\">\r\n            <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{filter.name}}</option>\r\n        </select>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"d-flex justify-content-between\">\r\n    <div class=\"filter-side\">\r\n\r\n      <div class=\"d-flex flex-column m-auto\" style=\"width: 95%;\">\r\n        <ng-container *ngFor=\"let filter of filterList\">\r\n          <div class=\"d-flex justify-content-between w-100 chip\">\r\n            <span>{{filter.name}}</span>\r\n            <span style=\"cursor: pointer;\" (click)=\"removeFilter(filter)\">X</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n        <div class=\"categories heading-small\">\r\n          Shop by categories\r\n        </div>\r\n        <div class=\"category-options\" *ngFor=\"let category of categories\" (click)=\"applyFilter(category, 'FILTER')\">\r\n          <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"category.status\" />\r\n          <div>{{category.option | uppercase}}</div>\r\n        </div>\r\n      </div>\r\n      <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n        <div class=\"categories heading-small\">\r\n          Shop by collections\r\n        </div>\r\n        <div class=\"category-options\" *ngFor=\"let collection of collections\" (click)=\"applyFilter(collection, 'FILTER')\">\r\n          <input type=\"checkbox\" name=\"\" id=\"\" [checked]=\"collection.status\" />\r\n          <div>{{collection.option | uppercase}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"price-section\">\r\n        <div class=\"categories heading-small\">\r\n          Shop by price\r\n        </div>\r\n        <div>\r\n          <mat-slider min=\"0\" max=\"1000\" style=\"width: 250px;\">\r\n            <input matSliderStartThumb [(ngModel)]=\"pricingMin\">\r\n            <input matSliderEndThumb [(ngModel)]=\"pricingMax\">\r\n          </mat-slider>\r\n        </div>\r\n        <div class=\"price-button-section\">\r\n          <div class=\"button-section\">\r\n            <button (click)=\"applyFilter()\">Filter</button>\r\n          </div>\r\n          <div class=\"price-range\">\r\n            Price: ${{ pricingMin }} - ${{ pricingMax }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\">\r\n      <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0 && false\">\r\n        <div *ngFor=\"let product of responseData\" class=\"product\" [style.width]=\"getProductWidth()\" (click)=\"proceedToProductDesc(product.itemId)\" style=\"cursor: pointer;\">\r\n          <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\" class=\"default-image\">\r\n            <img src=\"https://www.svgrepo.com/show/149861/t-shirt-black-silhouette.svg\" alt=\"\">\r\n          </div>\r\n          <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\">\r\n            <img [src]=\"product.itemImages?.[0]?.imgUrl\" alt=\"\" class=\"product-img\">\r\n          </div>\r\n          <div class=\"mt-2\">\r\n            <div class=\"product-name heading-large text-left\">\r\n              {{product.name}}</div>\r\n            <div class=\"price body-large text-left\">\r\n              ${{product.price.sellingPrice}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <!-- <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\">\r\n          <button simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\"\r\n            [color]=\"styles?.background?.accentColor\">{{content?.button}}</button>\r\n        </div> -->\r\n          <simpo-pagnination style=\"width: 100%;\" class=\"mt-15\" [totalPages]=\"getTotalPage\" [currentPage]=\"pageNo +1\" ></simpo-pagnination>\r\n      </div>\r\n      \r\n      <section class=\"empty-cart\" *ngIf=\"responseData?.length == 0 || true\">\r\n        <div>\r\n          <div class=\"cart-image\">\r\n            <img style=\"height: 150px; width: 150px;\" src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n          </div>\r\n          <div class=\"cart-text\">\r\n            <div class=\"heading-medium d-flex justify-content-center\">\r\n              Product list is empty\r\n            </div>\r\n            <div class=\"description d-flex justify-content-center mt-4\">\r\n              Looks like no item is present with filter. Go ahead & explore top categories.\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </section>\r\n    </div>\r\n  </div>\r\n\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n</section>\r\n", styles: [".product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.product{padding:10px;cursor:pointer}.product-img{height:310px;width:100%}.price{color:#222;font-size:16px;font-weight:600;line-height:normal;text-align:left}.product-name{color:#222;font-size:16px;line-height:26px;margin-bottom:5px;text-align:left}.add-product-button{width:20%}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.add-to-cart-btn{margin-top:15px}.add-to-cart-btn button{height:35px;font-size:16px!important}.filter-side{width:20%}.filter-top-section{padding:0 2rem}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.categories{display:flex;padding:1rem 2rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 2rem;gap:11px}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem}.button-section button{position:relative;background:#0267c1;color:#fff;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px}.chip{background:#0267c1;padding:8px 15px;border-radius:3px;margin:3px 0;color:#fff;transition:.3s opacity ease}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;justify-content:space-between}.price-range{padding-right:22px;color:#93959e;font-size:15px}.right-side{width:80%}@media screen and (max-width: 475px){.product-img{height:250px}.default-image img{height:250px}.filter-side{display:none}.right-side{width:100%}}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -4949,7 +5116,7 @@ class CartComponent extends BaseSection {
         this.cartService.addItemToCart(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.3", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n    <div class=\"left-panel\">\r\n      <div class=\"my-bag\">\r\n        My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n      </div>\r\n      <div class=\"cart-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n          <div class=\"row item-parent\">\r\n            <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n              <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n            </div>\r\n            <div class=\"col-md-6 h-100\">\r\n              <div class=\"lh-23\">\r\n                <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                <div class=\"price-with-tax\">\r\n                  &#8377; {{item.price + item.itemTax}}\r\n                </div>\r\n                <div class=\"item-quantity\">\r\n                  <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                  <span>{{item.quantity}}</span>\r\n                  <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n              <div class=\"item-price\">&#8377; {{(item.price + item.itemTax) * item.quantity}}</div>\r\n              <div>\r\n                <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\">delete</mat-icon>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"right-panel\">\r\n      <div class=\"my-bag\">\r\n        Price Details\r\n      </div>\r\n      <div class=\"price-details\">\r\n        <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n          <div class=\"price-type\">Total Price</div>\r\n          <div class=\"price-value\">&#8377; {{responseData.billdetails.totalNetValue}}</div>\r\n        </div>\r\n        <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n          <div class=\"price-type\">Total Tax</div>\r\n          <div class=\"price-value\">&#8377; {{responseData?.billdetails?.totalTax}}</div>\r\n        </div>\r\n        <div class=\"price-parent-block\"\r\n          *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n          <div class=\"price-type\">Delivery Charge</div>\r\n          <div class=\"price-value\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n        </div>\r\n        <hr>\r\n        <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n          <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n          <div class=\"price-value\" style=\"font-weight: 600;\">&#8377; {{responseData.totalAmount}}</div>\r\n        </div>\r\n\r\n        <div class=\"button-parent\">\r\n          <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n            <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n              [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n    <div>\r\n      <div class=\"cart-image\">\r\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n      </div>\r\n      <div class=\"cart-text\">\r\n        <div class=\"heading-medium d-flex justify-content-center\">\r\n          Your cart is empty\r\n        </div>\r\n        <div class=\"description d-flex mt-4\">\r\n          Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;width:90px;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.3", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete" }, usesInheritance: true, ngImport: i0, template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n    <div class=\"left-panel\">\r\n      <div class=\"my-bag\">\r\n        My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n      </div>\r\n      <div class=\"cart-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n          <div class=\"row item-parent\">\r\n            <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n              <img class=\"product-img\" [src]=\"item.imgUrl.imgUrl\" alt=\"\">\r\n            </div>\r\n            <div class=\"col-md-6 h-100\">\r\n              <div class=\"lh-23\">\r\n                <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                <div class=\"price-with-tax\">\r\n                  &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n                </div>\r\n                <div class=\"item-quantity\">\r\n                  <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                  <span>{{item.quantity}}</span>\r\n                  <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n              <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n              <div>\r\n                <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\">delete</mat-icon>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"right-panel\">\r\n      <div class=\"my-bag\">\r\n        Price Details\r\n      </div>\r\n      <div class=\"price-details\">\r\n        <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n          <div class=\"price-type\">Total Price</div>\r\n          <div class=\"price-value\">&#8377; {{responseData.billdetails.totalNetValue}}</div>\r\n        </div>\r\n        <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n          <div class=\"price-type\">Total Tax</div>\r\n          <div class=\"price-value\">&#8377; {{responseData?.billdetails?.totalTax}}</div>\r\n        </div>\r\n        <div class=\"price-parent-block\"\r\n          *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n          <div class=\"price-type\">Delivery Charge</div>\r\n          <div class=\"price-value\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n        </div>\r\n        <hr>\r\n        <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n          <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n          <div class=\"price-value\" style=\"font-weight: 600;\">&#8377; {{responseData.totalAmount}}</div>\r\n        </div>\r\n\r\n        <div class=\"button-parent\">\r\n          <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n            <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n              [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n    <div>\r\n      <div class=\"cart-image\">\r\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n      </div>\r\n      <div class=\"cart-text\">\r\n        <div class=\"heading-medium d-flex justify-content-center\">\r\n          Your cart is empty\r\n        </div>\r\n        <div class=\"description d-flex mt-4\">\r\n          Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;width:90px;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: 
                 //DIRECTIVE
                 ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }] }); }
 }
@@ -4963,7 +5130,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.3", ngImpor
                         AnimationDirective,
                         ContentFitDirective,
                         HoverDirective
-                    ], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n    <div class=\"left-panel\">\r\n      <div class=\"my-bag\">\r\n        My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n      </div>\r\n      <div class=\"cart-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n          <div class=\"row item-parent\">\r\n            <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n              <img class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n            </div>\r\n            <div class=\"col-md-6 h-100\">\r\n              <div class=\"lh-23\">\r\n                <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                <div class=\"price-with-tax\">\r\n                  &#8377; {{item.price + item.itemTax}}\r\n                </div>\r\n                <div class=\"item-quantity\">\r\n                  <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                  <span>{{item.quantity}}</span>\r\n                  <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n              <div class=\"item-price\">&#8377; {{(item.price + item.itemTax) * item.quantity}}</div>\r\n              <div>\r\n                <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\">delete</mat-icon>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"right-panel\">\r\n      <div class=\"my-bag\">\r\n        Price Details\r\n      </div>\r\n      <div class=\"price-details\">\r\n        <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n          <div class=\"price-type\">Total Price</div>\r\n          <div class=\"price-value\">&#8377; {{responseData.billdetails.totalNetValue}}</div>\r\n        </div>\r\n        <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n          <div class=\"price-type\">Total Tax</div>\r\n          <div class=\"price-value\">&#8377; {{responseData?.billdetails?.totalTax}}</div>\r\n        </div>\r\n        <div class=\"price-parent-block\"\r\n          *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n          <div class=\"price-type\">Delivery Charge</div>\r\n          <div class=\"price-value\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n        </div>\r\n        <hr>\r\n        <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n          <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n          <div class=\"price-value\" style=\"font-weight: 600;\">&#8377; {{responseData.totalAmount}}</div>\r\n        </div>\r\n\r\n        <div class=\"button-parent\">\r\n          <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n            <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n              [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n    <div>\r\n      <div class=\"cart-image\">\r\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n      </div>\r\n      <div class=\"cart-text\">\r\n        <div class=\"heading-medium d-flex justify-content-center\">\r\n          Your cart is empty\r\n        </div>\r\n        <div class=\"description d-flex mt-4\">\r\n          Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;width:90px;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\n"] }]
+                    ], template: "<section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n    <div class=\"left-panel\">\r\n      <div class=\"my-bag\">\r\n        My Bag&nbsp; <span>({{responseData?.orderedItems?.length}} Items)</span>\r\n      </div>\r\n      <div class=\"cart-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems; let idx = index\">\r\n          <div class=\"row item-parent\">\r\n            <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n              <img class=\"product-img\" [src]=\"item.imgUrl.imgUrl\" alt=\"\">\r\n            </div>\r\n            <div class=\"col-md-6 h-100\">\r\n              <div class=\"lh-23\">\r\n                <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                <div class=\"price-with-tax\">\r\n                  &#8377; {{item.price + (item.itemTax ?? 0)}}\r\n                </div>\r\n                <div class=\"item-quantity\">\r\n                  <span class=\"cursor\" (click)=\"addToCart(item, 'SUBSTRACT')\">-</span>\r\n                  <span>{{item.quantity}}</span>\r\n                  <span class=\"cursor\" (click)=\"addToCart(item, 'ADD')\">+</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-4 position-relative\" style=\"margin-left: auto;\">\r\n              <div class=\"item-price\">&#8377; {{(item.price + (item.itemTax ?? 0)) * item.quantity}}</div>\r\n              <div>\r\n                <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\">delete</mat-icon>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <hr *ngIf=\"responseData?.orderedItems?.length != (idx +1)\">\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n    <div class=\"right-panel\">\r\n      <div class=\"my-bag\">\r\n        Price Details\r\n      </div>\r\n      <div class=\"price-details\">\r\n        <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalNetValue\">\r\n          <div class=\"price-type\">Total Price</div>\r\n          <div class=\"price-value\">&#8377; {{responseData.billdetails.totalNetValue}}</div>\r\n        </div>\r\n        <div class=\"price-parent-block\" *ngIf=\"responseData?.billdetails?.totalTax\">\r\n          <div class=\"price-type\">Total Tax</div>\r\n          <div class=\"price-value\">&#8377; {{responseData?.billdetails?.totalTax}}</div>\r\n        </div>\r\n        <div class=\"price-parent-block\"\r\n          *ngIf=\"responseData?.billdetails?.deliveryCharges && responseData.billdetails.deliveryCharges > 0\">\r\n          <div class=\"price-type\">Delivery Charge</div>\r\n          <div class=\"price-value\">&#8377; {{responseData.billdetails.deliveryCharges}}</div>\r\n        </div>\r\n        <hr>\r\n        <div class=\"price-parent-block\" *ngIf=\"responseData?.totalAmount\">\r\n          <div class=\"price-type\" style=\"color: black;font-weight: 600;\">Total Amount</div>\r\n          <div class=\"price-value\" style=\"font-weight: 600;\">&#8377; {{responseData.totalAmount}}</div>\r\n        </div>\r\n\r\n        <div class=\"button-parent\">\r\n          <div *ngFor=\"let button of data?.action?.buttons;let i = index\">\r\n            <button class=\"btn\" (click)=\"i == 0 ? proceedToCheckout() : proceedToListPage()\" simpoButtonDirective [id]=\"data?.id+button.id\" [buttonStyle]=\"button?.styles\"\r\n              [color]=\"styles?.background?.accentColor\">{{button?.content?.label}}</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <section class=\"empty-cart\" *ngIf=\"(responseData?.orderedItems?.length || 0) == 0\">\r\n    <div>\r\n      <div class=\"cart-image\">\r\n        <img src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\" alt=\"\">\r\n      </div>\r\n      <div class=\"cart-text\">\r\n        <div class=\"heading-medium d-flex justify-content-center\">\r\n          Your cart is empty\r\n        </div>\r\n        <div class=\"description d-flex mt-4\">\r\n          Looks like you have not added anything to your cart. Go ahead & explore top categories.\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n  <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n  </div>\r\n\r\n</section>\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0}.lh-23{line-height:23px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;display:flex;width:90px;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important}.cursor{cursor:pointer}.delete-item{text-align:right;position:absolute;right:16px;bottom:10px}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:47px;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.heading-medium{font-weight:600;color:#000}.description{font-size:18px;color:#7f7676;margin-left:auto;margin-right:auto;width:30%;text-align:center}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel,.right-panel{width:100%}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: CartService }], propDecorators: { data: [{
                 type: Input
             }], responseData: [{