simpo-component-library 1.6.166 → 1.7.1

package/fesm2022/simpo-component-library.mjs

@@ -3270,8 +3270,8 @@ class RestService {
     constructor(http, eventService) {
         this.http = http;
         this.eventService = eventService;
-        this.BASE_URL = "https://dev-api.simpo.ai/";
-        this.ECOMMERCE_URL = "https://dev-ecommerce.simpo.ai/";
+        this.BASE_URL = "https://api.simpo.ai/";
+        this.ECOMMERCE_URL = "https://prod-ecommerce.simpo.ai/";
         this.environmentTypeSubscriber = null;
         this.environmentTypeSubscriber = this.eventService.environmentType.subscribe((response) => {
             if (response == "DEV") {
@@ -4589,7 +4589,7 @@ class CartComponent extends BaseSection {
             this.calculateCart(response);
             localStorage.removeItem("couponId");
             localStorage.removeItem("couponCode");
-            this.messageService.add({ severity: 'success', summary: 'Coupon', detail: 'Coupon Removed' });
+            this.messageService.add({ severity: 'error', summary: 'Coupon', detail: 'Coupon Removed' });
             this.cartInfo.billdetails.discountAmount = 0;
             this.couponDialogRef?.close();
         });
@@ -4930,7 +4930,7 @@ class CartComponent extends BaseSection {
             localStorage.setItem("couponCode", coupon.couponCode);
             console.log("Response: ", response);
             this.calculateCart(response);
-            this.messageService.add({ severity: 'success', summary: 'Coupon', detail: 'Coupon Added' });
+            this.messageService.add({ severity: 'success', summary: 'Coupon', detail: 'Coupon Applied' });
             this.cartInfo.billdetails.discountAmount = response?.data?.billdetails?.discountAmount ?? 0;
             this.couponDialogRef?.close();
         });
@@ -4969,7 +4969,7 @@ class CartComponent extends BaseSection {
         return BUSINESS_CONSTANTS.CURRENCY;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: CartComponent, deps: [{ token: EventsService }, { token: CartService }, { token: i2$3.Router }, { token: RestService }, { token: i5.MatDialog }, { token: StorageServiceService }, { token: i7.MessageService }, { token: i5$1.MatBottomSheet }, { token: MAT_DIALOG_DATA, optional: true }, { token: i5.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n  <ng-container *ngIf=\"data\">\r\n    <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [attr.class]=\"isMobile ? 'py-5' : ''\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n      </div>\r\n      <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <ng-container [ngSwitch]=\"currentTab\">\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\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=\"item-parent d-flex\">\r\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n                  </div>\r\n                  <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n                    <div class=\"lh-23\">\r\n                      <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n                      <div class=\"price-with-tax\">\r\n                        <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                      </div>\r\n                      <ng-container *ngIf=\"item.itemVariant\"> \r\n                        <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n                          <strong class=\"fw-bold\">{{ varient }} : </strong>\r\n                          <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n                           {{ item.itemVariant.properties[varient] | uppercase }}\r\n                        </div>\r\n                      </ng-container>\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; width: 0px; \">\r\n                    <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity)  | number: '1.0-2'}}</div>\r\n                    <div>\r\n                      <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">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=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n            <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n          </div>\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n        </ng-container>\r\n        <div class=\"right-panel\">\r\n          <div class=\"my-bag\">\r\n            Coupon\r\n          </div>\r\n          <div class=\"coupons\" (click)=\"openDialog(CouponList)\">\r\n            <ng-container *ngIf=\"!responseData.billdetails?.couponId\">\r\n              <div class=\"d-flex flex-column\">\r\n                <span style=\"font-weight: 600;\">Apply Coupon</span>\r\n                <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n              </div>\r\n              <div [style.color]=\"styles?.background?.accentColor\" style=\"font-weight: 600;\">Apply</div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"responseData.billdetails?.couponId\">\r\n              <div class=\"d-flex flex-column\">\r\n                <span style=\"font-weight: 600;\">Coupon</span>\r\n                <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n              </div>\r\n              <div [style.color]=\"styles?.background?.accentColor\" (click)=\"removeCoupon($event)\">Remove</div>\r\n            </ng-container>\r\n          </div>\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\">\r\n              <div class=\"price-type\">Total Price</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\">Total Tax</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{((!responseData.billdetails?.couponId ? responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) | number: '1.0-2'}}</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\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\"\r\n              *ngIf=\"responseData?.billdetails?.discountAmount\">\r\n              <div class=\"price-type\">Discount Amount</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.discountAmount | number: '1.0-2'}}</div>\r\n            </div>\r\n            <hr>\r\n            <div class=\"price-parent-block\">\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;\"><span [innerHtml]='currency'></span> {{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) | number: '1.0-2'}}</div>\r\n            </div>\r\n\r\n            <div class=\"button-parent\">\r\n              <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\"  [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n                <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n              </ng-container>\r\n              \r\n              <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n              </ng-container>\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 class=\"empty-cart-container\">\r\n          <div class=\"cart-image\">\r\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n          </div>\r\n          <div class=\"cart-text\">\r\n            <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n              <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n            </ng-container>\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\" [isEcommerce]=\"true\"></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  </ng-container>\r\n  <ng-container *ngIf=\"!data\">\r\n    <section class=\"cart-window\">\r\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n          <span>Your Cart</span>\r\n        </div>\r\n        <div class=\"saving\"></div>\r\n      </div>\r\n      <div class=\"offers\">\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n          <span>Avail Offers / Coupons</span>\r\n        </div>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </div>\r\n      <div class=\"small-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n          <div class=\"small-item\">\r\n            <div class=\"d-flex\" style=\"gap: 5px;\">\r\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"small-product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n              </div>\r\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n              <div class=\"small-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 class=\"small-item-price\">\r\n                <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                </div>\r\n                <!-- <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"fotter-sec\">\r\n        <div class=\"delivery-add d-flex\">\r\n          <mat-icon>home</mat-icon>\r\n          <div class=\"address\">Tetsting</div>\r\n        </div>\r\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n      </div>\r\n    </section>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<ng-template #CouponList>\r\n  <section class=\"coupons-listing-section\">\r\n    <div class=\"coupon-heading\">\r\n      <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n        <mat-icon>keyboard_arrow_left</mat-icon>\r\n      </div>\r\n      <div class=\"header-text\">Apply Coupon</div>\r\n    </div>\r\n    <!-- <div class=\"coupon-search-sec\">\r\n      <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n      <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n    </div> -->\r\n    <div class=\"coupon-listing\">\r\n      <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n        <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n          <div class=\"coupon-details\"\r\n            [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\">\r\n            <div class=\"details__coupon-heading\">\r\n              <div class=\"coupon-brief\">\r\n                <div class=\"coupon-brief__left-sec\">\r\n                  <div class=\"coupon-name\"\r\n                    [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n                    {{ couponDetails.couponCode | uppercase }}</div>\r\n                  <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n                </div>\r\n                <div class=\"coupon-brief__right-sec\">\r\n                  <div class=\"apply-offer-btn\" \r\n                    [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\" [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\" (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n                </div>\r\n              </div>\r\n              <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n                <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n                <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n              </div> -->\r\n            </div>\r\n            <ng-container *ngIf=\"couponDetails.status\">\r\n              <div class=\"details-divider\"></div>\r\n              <ul class=\"details__coupon-terms\">\r\n                <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n              </ul>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-template #showEmptyScreen>\r\n        <div class=\"empty-screen-container\">\r\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n          <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n          <div class=\"empty-screen__secondary-text\">\r\n            Looks like there are no coupons at the moment\r\n          </div>\r\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.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}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.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}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel{width:100%}.right-panel{width:100%;z-index:1000}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}\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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "directive", type: 
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: CartComponent, isStandalone: true, selector: "simpo-cart", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n  <ng-container *ngIf=\"data\">\r\n    <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [attr.class]=\"isMobile ? 'py-5' : ''\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n      </div>\r\n      <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <ng-container [ngSwitch]=\"currentTab\">\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\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=\"item-parent d-flex\">\r\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n                  </div>\r\n                  <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n                    <div class=\"lh-23\">\r\n                      <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n                      <div class=\"price-with-tax\">\r\n                        <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                      </div>\r\n                      <ng-container *ngIf=\"item.itemVariant\"> \r\n                        <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n                          <strong class=\"fw-bold\">{{ varient }} : </strong>\r\n                          <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n                           {{ item.itemVariant.properties[varient] | uppercase }}\r\n                        </div>\r\n                      </ng-container>\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; width: 0px; \">\r\n                    <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity)  | number: '1.0-2'}}</div>\r\n                    <div>\r\n                      <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">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=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n            <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n          </div>\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n        </ng-container>\r\n        <div class=\"right-panel\">\r\n          <div class=\"my-bag\">\r\n            Coupon\r\n          </div>\r\n          <div class=\"coupons\" (click)=\"openDialog(CouponList)\">\r\n            <ng-container *ngIf=\"!responseData.billdetails?.couponId\">\r\n              <div class=\"d-flex flex-column\">\r\n                <span style=\"font-weight: 600;\">Apply Coupon</span>\r\n                <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n              </div>\r\n              <div [style.color]=\"styles?.background?.accentColor\" style=\"font-weight: 600;\">Apply</div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"responseData.billdetails?.couponId\">\r\n              <div class=\"d-flex flex-column\">\r\n                <span style=\"font-weight: 600;\">Coupon</span>\r\n                <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n              </div>\r\n              <div [style.color]=\"styles?.background?.accentColor\" (click)=\"removeCoupon($event)\">Remove</div>\r\n            </ng-container>\r\n          </div>\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\">\r\n              <div class=\"price-type\">Total Price</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\">Total Tax</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{((!responseData.billdetails?.couponId ? responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) | number: '1.0-2'}}</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\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\"\r\n              *ngIf=\"responseData?.billdetails?.discountAmount\">\r\n              <div class=\"price-type\">Discount Amount</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.discountAmount | number: '1.0-2'}}</div>\r\n            </div>\r\n            <hr>\r\n            <div class=\"price-parent-block\">\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;\"><span [innerHtml]='currency'></span> {{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) | number: '1.0-2'}}</div>\r\n            </div>\r\n\r\n            <div class=\"button-parent\">\r\n              <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\"  [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n                <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n              </ng-container>\r\n              \r\n              <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n              </ng-container>\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 class=\"empty-cart-container\">\r\n          <div class=\"cart-image\">\r\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n          </div>\r\n          <div class=\"cart-text\">\r\n            <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n              <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n            </ng-container>\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\" [isEcommerce]=\"true\"></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  </ng-container>\r\n  <ng-container *ngIf=\"!data\">\r\n    <section class=\"cart-window\">\r\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n          <span>Your Cart</span>\r\n        </div>\r\n        <div class=\"saving\"></div>\r\n      </div>\r\n      <div class=\"offers\">\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n          <span>Avail Offers / Coupons</span>\r\n        </div>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </div>\r\n      <div class=\"small-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n          <div class=\"small-item\">\r\n            <div class=\"d-flex\" style=\"gap: 5px;\">\r\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"small-product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n              </div>\r\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n              <div class=\"small-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 class=\"small-item-price\">\r\n                <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                </div>\r\n                <!-- <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"fotter-sec\">\r\n        <div class=\"delivery-add d-flex\">\r\n          <mat-icon>home</mat-icon>\r\n          <div class=\"address\">Tetsting</div>\r\n        </div>\r\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n      </div>\r\n    </section>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<ng-template #CouponList>\r\n  <section class=\"coupons-listing-section\">\r\n    <div class=\"coupon-heading\">\r\n      <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n        <mat-icon>keyboard_arrow_left</mat-icon>\r\n      </div>\r\n      <div class=\"header-text\">Apply Coupon</div>\r\n    </div>\r\n    <!-- <div class=\"coupon-search-sec\">\r\n      <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n      <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n    </div> -->\r\n    <div class=\"coupon-listing\">\r\n      <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n        <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n          <div class=\"coupon-details\"\r\n            [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\">\r\n            <div class=\"details__coupon-heading\">\r\n              <div class=\"coupon-brief\">\r\n                <div class=\"coupon-brief__left-sec\">\r\n                  <div class=\"coupon-name\"\r\n                    [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n                    {{ couponDetails.couponCode | uppercase }}</div>\r\n                  <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n                </div>\r\n                <div class=\"coupon-brief__right-sec\">\r\n                  <div class=\"apply-offer-btn\" \r\n                    [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\" [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\" (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n                </div>\r\n              </div>\r\n              <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n                <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n                <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n              </div> -->\r\n            </div>\r\n            <ng-container *ngIf=\"couponDetails.status\">\r\n              <div class=\"details-divider\"></div>\r\n              <ul class=\"details__coupon-terms\">\r\n                <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n              </ul>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-template #showEmptyScreen>\r\n        <div class=\"empty-screen-container\">\r\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n          <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n          <div class=\"empty-screen__secondary-text\">\r\n            Looks like there are no coupons at the moment\r\n          </div>\r\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.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}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.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}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel{width:100%}.right-panel{width:100%;z-index:1000}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}\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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.DecimalPipe, name: "number" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { 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"] }, { kind: "component", type: AddressComponent, selector: "simpo-address", inputs: ["responseData", "data", "index", "customClass", "edit", "delete", "isCart"], outputs: ["selectedAddress"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i17.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
@@ -4991,7 +4991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         AddressComponent,
                         ToastModule,
                         CustomerReviewComponent
-                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n  <ng-container *ngIf=\"data\">\r\n    <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [attr.class]=\"isMobile ? 'py-5' : ''\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n      </div>\r\n      <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <ng-container [ngSwitch]=\"currentTab\">\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\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=\"item-parent d-flex\">\r\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n                  </div>\r\n                  <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n                    <div class=\"lh-23\">\r\n                      <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n                      <div class=\"price-with-tax\">\r\n                        <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                      </div>\r\n                      <ng-container *ngIf=\"item.itemVariant\"> \r\n                        <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n                          <strong class=\"fw-bold\">{{ varient }} : </strong>\r\n                          <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n                           {{ item.itemVariant.properties[varient] | uppercase }}\r\n                        </div>\r\n                      </ng-container>\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; width: 0px; \">\r\n                    <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity)  | number: '1.0-2'}}</div>\r\n                    <div>\r\n                      <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">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=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n            <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n          </div>\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n        </ng-container>\r\n        <div class=\"right-panel\">\r\n          <div class=\"my-bag\">\r\n            Coupon\r\n          </div>\r\n          <div class=\"coupons\" (click)=\"openDialog(CouponList)\">\r\n            <ng-container *ngIf=\"!responseData.billdetails?.couponId\">\r\n              <div class=\"d-flex flex-column\">\r\n                <span style=\"font-weight: 600;\">Apply Coupon</span>\r\n                <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n              </div>\r\n              <div [style.color]=\"styles?.background?.accentColor\" style=\"font-weight: 600;\">Apply</div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"responseData.billdetails?.couponId\">\r\n              <div class=\"d-flex flex-column\">\r\n                <span style=\"font-weight: 600;\">Coupon</span>\r\n                <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n              </div>\r\n              <div [style.color]=\"styles?.background?.accentColor\" (click)=\"removeCoupon($event)\">Remove</div>\r\n            </ng-container>\r\n          </div>\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\">\r\n              <div class=\"price-type\">Total Price</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\">Total Tax</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{((!responseData.billdetails?.couponId ? responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) | number: '1.0-2'}}</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\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\"\r\n              *ngIf=\"responseData?.billdetails?.discountAmount\">\r\n              <div class=\"price-type\">Discount Amount</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.discountAmount | number: '1.0-2'}}</div>\r\n            </div>\r\n            <hr>\r\n            <div class=\"price-parent-block\">\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;\"><span [innerHtml]='currency'></span> {{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) | number: '1.0-2'}}</div>\r\n            </div>\r\n\r\n            <div class=\"button-parent\">\r\n              <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\"  [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n                <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n              </ng-container>\r\n              \r\n              <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n              </ng-container>\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 class=\"empty-cart-container\">\r\n          <div class=\"cart-image\">\r\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n          </div>\r\n          <div class=\"cart-text\">\r\n            <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n              <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n            </ng-container>\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\" [isEcommerce]=\"true\"></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  </ng-container>\r\n  <ng-container *ngIf=\"!data\">\r\n    <section class=\"cart-window\">\r\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n          <span>Your Cart</span>\r\n        </div>\r\n        <div class=\"saving\"></div>\r\n      </div>\r\n      <div class=\"offers\">\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n          <span>Avail Offers / Coupons</span>\r\n        </div>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </div>\r\n      <div class=\"small-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n          <div class=\"small-item\">\r\n            <div class=\"d-flex\" style=\"gap: 5px;\">\r\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"small-product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n              </div>\r\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n              <div class=\"small-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 class=\"small-item-price\">\r\n                <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                </div>\r\n                <!-- <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"fotter-sec\">\r\n        <div class=\"delivery-add d-flex\">\r\n          <mat-icon>home</mat-icon>\r\n          <div class=\"address\">Tetsting</div>\r\n        </div>\r\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n      </div>\r\n    </section>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<ng-template #CouponList>\r\n  <section class=\"coupons-listing-section\">\r\n    <div class=\"coupon-heading\">\r\n      <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n        <mat-icon>keyboard_arrow_left</mat-icon>\r\n      </div>\r\n      <div class=\"header-text\">Apply Coupon</div>\r\n    </div>\r\n    <!-- <div class=\"coupon-search-sec\">\r\n      <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n      <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n    </div> -->\r\n    <div class=\"coupon-listing\">\r\n      <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n        <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n          <div class=\"coupon-details\"\r\n            [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\">\r\n            <div class=\"details__coupon-heading\">\r\n              <div class=\"coupon-brief\">\r\n                <div class=\"coupon-brief__left-sec\">\r\n                  <div class=\"coupon-name\"\r\n                    [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n                    {{ couponDetails.couponCode | uppercase }}</div>\r\n                  <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n                </div>\r\n                <div class=\"coupon-brief__right-sec\">\r\n                  <div class=\"apply-offer-btn\" \r\n                    [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\" [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\" (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n                </div>\r\n              </div>\r\n              <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n                <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n                <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n              </div> -->\r\n            </div>\r\n            <ng-container *ngIf=\"couponDetails.status\">\r\n              <div class=\"details-divider\"></div>\r\n              <ul class=\"details__coupon-terms\">\r\n                <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n              </ul>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-template #showEmptyScreen>\r\n        <div class=\"empty-screen-container\">\r\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n          <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n          <div class=\"empty-screen__secondary-text\">\r\n            Looks like there are no coupons at the moment\r\n          </div>\r\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.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}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.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}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel{width:100%}.right-panel{width:100%;z-index:1000}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}\n"] }]
+                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n  <ng-container *ngIf=\"data\">\r\n    <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [attr.class]=\"isMobile ? 'py-5' : ''\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n      <div class=\"d-flex align-items-center justify-content-center m-auto mb-4\" [style.marginTop.px]=\"isMobile ? '': '50'\" [style.width.%]=\"isMobile ? '90' : ''\" *ngIf=\"responseData?.orderedItems?.length\">\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'BAG'}\" (click)=\"currentTab = 'BAG'\">Bag</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'ADDRESS'}\" (click)=\"currentTab = 'ADDRESS'\">Address</span>\r\n        <div class=\"bar\"></div>\r\n        <span class=\"timeline\" [ngClass]=\"{'isActive': currentTab == 'PAYMENT'}\" style=\"cursor: auto;\">Payment</span>\r\n      </div>\r\n      <div class=\"cart-parent container\" *ngIf=\"(responseData?.orderedItems?.length || 0) > 0\"  [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n        <ng-container [ngSwitch]=\"currentTab\">\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'BAG'\">\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=\"item-parent d-flex\">\r\n                  <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n                  </div>\r\n                  <div class=\"col-md-6 h-100\" [style.width.px]=\"isMobile ? '200' : ''\" style=\"margin-left: px;\">\r\n                    <div class=\"lh-23\">\r\n                      <div class=\"item-name trim-text heading-large\">{{item.itemName}}</div>\r\n                      <div class=\"price-with-tax\">\r\n                        <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                      </div>\r\n                      <ng-container *ngIf=\"item.itemVariant\"> \r\n                        <div class=\"d-flex align-items-center\" *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">\r\n                          <strong class=\"fw-bold\">{{ varient }} : </strong>\r\n                          <!-- <div class=\"fw-normal\" style=\"margin-left: 5px; height: 13px; width: 13px; border-radius: 50%;\" *ngIf=\"varient.toLowerCase() == 'color'\" [style.backgroundColor]=\"item.itemVariant.properties[varient]\"></div> -->\r\n                           {{ item.itemVariant.properties[varient] | uppercase }}\r\n                        </div>\r\n                      </ng-container>\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; width: 0px; \">\r\n                    <div class=\"item-price\"><span [innerHTML]='currency'></span> {{((item.discountedPrice) * item.quantity)  | number: '1.0-2'}}</div>\r\n                    <div>\r\n                      <mat-icon class=\"delete-item\" (click)=\"removeItem(item)\" [style.right.px]=\"isMobile ? '5' : '0'\">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=\"left-panel\" *ngSwitchCase=\"'ADDRESS'\">\r\n            <simpo-address [isCart]=\"true\" [responseData]=\"getAddressList\" [data]=\"data\" (selectedAddress)=\"addressSelected($event)\"></simpo-address>\r\n          </div>\r\n          <div class=\"left-panel\" *ngSwitchCase=\"'PAYMENT'\"></div>\r\n        </ng-container>\r\n        <div class=\"right-panel\">\r\n          <div class=\"my-bag\">\r\n            Coupon\r\n          </div>\r\n          <div class=\"coupons\" (click)=\"openDialog(CouponList)\">\r\n            <ng-container *ngIf=\"!responseData.billdetails?.couponId\">\r\n              <div class=\"d-flex flex-column\">\r\n                <span style=\"font-weight: 600;\">Apply Coupon</span>\r\n                <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n              </div>\r\n              <div [style.color]=\"styles?.background?.accentColor\" style=\"font-weight: 600;\">Apply</div>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"responseData.billdetails?.couponId\">\r\n              <div class=\"d-flex flex-column\">\r\n                <span style=\"font-weight: 600;\">Coupon</span>\r\n                <span style=\"font-size: 13px;\">Save more with coupon and offers</span>\r\n              </div>\r\n              <div [style.color]=\"styles?.background?.accentColor\" (click)=\"removeCoupon($event)\">Remove</div>\r\n            </ng-container>\r\n          </div>\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\">\r\n              <div class=\"price-type\">Total Price</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{(responseData?.billdetails?.totalNetValue ?? 0) | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\">\r\n              <div class=\"price-type\">Total Tax</div>\r\n              <div class=\"price-value\"><span [innerHTML]='currency'></span> {{((!responseData.billdetails?.couponId ? responseData?.billdetails?.totalTax : responseData?.billdetails?.totalTaxAfterDiscount) ?? 0) | number: '1.0-2'}}</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\"><span [innerHtml]='currency'></span> {{responseData.billdetails.deliveryCharges | number: '1.0-2'}}</div>\r\n            </div>\r\n            <div class=\"price-parent-block\"\r\n              *ngIf=\"responseData?.billdetails?.discountAmount\">\r\n              <div class=\"price-type\">Discount Amount</div>\r\n              <div class=\"price-value\"><span [innerHtml]='currency'></span> {{responseData?.billdetails?.discountAmount | number: '1.0-2'}}</div>\r\n            </div>\r\n            <hr>\r\n            <div class=\"price-parent-block\">\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;\"><span [innerHtml]='currency'></span> {{((responseData?.totalAmount ?? 0) - (responseData?.billdetails?.discountAmount ?? 0)) | number: '1.0-2'}}</div>\r\n            </div>\r\n\r\n            <div class=\"button-parent\">\r\n              <ng-container *ngIf=\"currentTab == 'BAG'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToCheckout()\"  [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[0]?.content?.label ?? 'Checkout Cart'}}</div>\r\n                <div class=\"btn\" (click)=\"proceedToListPage()\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[1]?.styles\" [color]=\"data?.styles?.background?.accentColor\">{{data?.action?.buttons?.[1]?.content?.label ?? 'Continue Shopping'}}</div>\r\n              </ng-container>\r\n              \r\n              <ng-container *ngIf=\"currentTab == 'ADDRESS'\">\r\n                <div class=\"btn mobile-fixed\" (click)=\"proceedToPayment()\" [style.backgroundColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.color\">{{data?.action?.buttons?.[2]?.content?.label ?? 'Place Order'}}</div>\r\n              </ng-container>\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 class=\"empty-cart-container\">\r\n          <div class=\"cart-image\">\r\n            <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"data?.content?.image?.url\" [alt]=\"data?.content?.image?.altText\">\r\n          </div>\r\n          <div class=\"cart-text\">\r\n            <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n              <div class=\"d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{text.value}}</div>\r\n            </ng-container>\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\" [isEcommerce]=\"true\"></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  </ng-container>\r\n  <ng-container *ngIf=\"!data\">\r\n    <section class=\"cart-window\">\r\n      <div class=\"heading-large lh-2 mb-3 header-sec\">\r\n        <div class=\"d-flex align-items-center\">\r\n          <mat-icon (click)=\"closeWindow()\">keyboard_arrow_left</mat-icon>\r\n          <span>Your Cart</span>\r\n        </div>\r\n        <div class=\"saving\"></div>\r\n      </div>\r\n      <div class=\"offers\">\r\n        <div class=\"d-flex align-items-center\" style=\"gap: 5px;\">\r\n          <img src=\"https://i.postimg.cc/htY55sqY/discount.png\" alt=\"\" height=\"20\" width=\"20\">\r\n          <span>Avail Offers / Coupons</span>\r\n        </div>\r\n        <mat-icon>keyboard_arrow_right</mat-icon>\r\n      </div>\r\n      <div class=\"small-items\">\r\n        <ng-container *ngFor=\"let item of responseData?.orderedItems\">\r\n          <div class=\"small-item\">\r\n            <div class=\"d-flex\" style=\"gap: 5px;\">\r\n              <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" class=\"small-product-img\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" alt=\"\" (click)=\"goToProductDetails(item)\">\r\n              </div>\r\n              <div class=\"small-item-name trim-text\">{{ item.itemName | titlecase }}</div>\r\n              <div class=\"small-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 class=\"small-item-price\">\r\n                <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.discountedPrice) | number: '1.0-2'}}\r\n                </div>\r\n                <!-- <div class=\"price-with-tax\">\r\n                  <span [innerHTML]='currency'></span> {{(item.selling) | number: '1.0-2'}}\r\n                </div> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n      <div class=\"fotter-sec\">\r\n        <div class=\"delivery-add d-flex\">\r\n          <mat-icon>home</mat-icon>\r\n          <div class=\"address\">Tetsting</div>\r\n        </div>\r\n        <button class=\"payment-btn\" [disabled]=\"cartInfo.addressDetails\" (click)=\"proceedToCheckout()\"> <span style=\"margin-right: 5px;\">Click to Pay</span> <span [innerHtml]='currency'></span> {{(responseData?.totalAmount ?? 0) | number: '1.0-2'}}</button>\r\n      </div>\r\n    </section>\r\n  </ng-container>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n<ng-template #CouponList>\r\n  <section class=\"coupons-listing-section\">\r\n    <div class=\"coupon-heading\">\r\n      <div class=\"back-btn\" (click)=\"closeDialogRef()\">\r\n        <mat-icon>keyboard_arrow_left</mat-icon>\r\n      </div>\r\n      <div class=\"header-text\">Apply Coupon</div>\r\n    </div>\r\n    <!-- <div class=\"coupon-search-sec\">\r\n      <input type=\"text\" placeholder=\"Type Coupon Code\" [(ngModel)]=\"enteredCouponCode\">\r\n      <div class=\"apply-btn-search\" (click)=\"searchIfApplicable()\">Apply</div>\r\n    </div> -->\r\n    <div class=\"coupon-listing\">\r\n      <ng-container *ngIf=\"couponList.length > 0; else showEmptyScreen\">\r\n        <ng-container *ngFor=\"let couponDetails of couponList; let idx = index\">\r\n          <div class=\"coupon-details\"\r\n            [ngStyle]=\"{'background-color': !couponDetails.applicable ? '#FFF2F4' : '#EDFFFA'}\">\r\n            <div class=\"details__coupon-heading\">\r\n              <div class=\"coupon-brief\">\r\n                <div class=\"coupon-brief__left-sec\">\r\n                  <div class=\"coupon-name\"\r\n                    [ngStyle]=\"{'color': !couponDetails.applicable ? '#DB1A1A' : '#097D5F'}\">\r\n                    {{ couponDetails.couponCode | uppercase }}</div>\r\n                  <div class=\"coupon-desc\">{{ couponDetails.discountDescription | titlecase }}</div>\r\n                </div>\r\n                <div class=\"coupon-brief__right-sec\">\r\n                  <div class=\"apply-offer-btn\" \r\n                    [style.opacity]=\"couponDetails.applicable ? '1' : '0.3'\" [ngStyle]=\"{'cursor': couponDetails.applicable ? 'pointer' : ''}\" (click)=\"applyCoupon(couponDetails)\">Apply</div>\r\n                </div>\r\n              </div>\r\n              <!-- <div class=\"coupon-toggle-details-btn\" (click)=\"couponDetails.status = !couponDetails.status\">\r\n                <span class=\"hide-details-btn\" *ngIf=\"couponDetails.status\">Hide details</span>\r\n                <div class=\"show-details-btn\" *ngIf=\"!couponDetails.status\">View details</div>\r\n              </div> -->\r\n            </div>\r\n            <ng-container *ngIf=\"couponDetails.status\">\r\n              <div class=\"details-divider\"></div>\r\n              <ul class=\"details__coupon-terms\">\r\n                <li>Offer valid from {{ couponDetails.validFrom | date }} - {{ couponDetails.validTo | date }}</li>\r\n              </ul>\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-template #showEmptyScreen>\r\n        <div class=\"empty-screen-container\">\r\n          <img loading=\"lazy\" src=\"../../../../../assets/common/coupon-empty-img.svg\" alt=\"\">\r\n          <div class=\"empty-screen__primary-text\">No Coupon Available</div>\r\n          <div class=\"empty-screen__secondary-text\">\r\n            Looks like there are no coupons at the moment\r\n          </div>\r\n          <!-- <div class=\"empty-screen__button\">Explore</div> -->\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n\r\n", styles: [".cart-parent{display:flex;margin-top:15px;gap:20px}.left-panel{width:65%}.timeline{cursor:pointer}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029}.isActive{color:#0267c1;font-weight:600}.bar{width:150px;border-top:2px solid lightgray;margin:0 5px}.right-panel{width:35%}.my-bag{font-size:16px;font-weight:600;color:#000;margin-left:8px}.my-bag span{color:#939393}.coupons{display:flex;justify-content:space-between;padding:10px;border-radius:4px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px;margin-top:10px;cursor:pointer}.coupon-list-section{padding:15px;width:400px;z-index:10000001!important}.coupon-list-section .search{padding:8px;border:1px solid lightgray;border-radius:20px;display:flex;justify-content:space-between}.coupon-list-section input{border:none;outline:none;width:90%}.coupon-list-section .coupon-list{height:60vh;width:100%}.item-parent{margin:10px 0;min-height:120px}.lh-23{line-height:23px;margin-left:10px}.item-name{color:#141514;font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px;color:#626262}.item-sku{font-weight:400;font-size:14px;color:#626262}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:100%;width:110px;padding:0;cursor:pointer}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#df2e2e;cursor:pointer}.item-quantity{margin-top:5px;display:flex;min-width:90px;max-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.coupon{display:flex;justify-content:space-between;border:1px solid #E8E8E8;border-radius:5px;padding:10px;margin-top:10px}.apply-coupon{font-weight:500;color:#626262;font-size:15px}.coupon-desc{color:#939393;font-size:12px;font-weight:500}.apply-coupon-btn{color:#0267c1;font-size:16px;font-weight:600}.price-details{padding:10px;margin-top:10px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;margin-bottom:15px}.price-parent-block{display:flex;justify-content:space-between;margin-top:5px}.price-type{font-weight:400;font-size:16px;color:#434443}.price-value{font-weight:500;font-size:18px;color:#141514}.button-parent{margin-top:20px;display:flex;flex-direction:column;gap:10px}hr{border:1px solid #E8E8E8}.btn{height:40px;font-size:16px!important;border:1px solid lightgray}.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}.label{color:#000}.total-container{min-height:80vh;position:relative;display:block!important;height:calc(100vh - 170px)}.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}.cart-window{padding:10px}.cart-window .small-product-img{width:55px;height:55px;border-radius:5px}.cart-window .small-items{display:flex;flex-direction:column;gap:10px;margin-top:15px;height:calc(100vh - 160px);overflow-y:auto}.cart-window .small-item{width:100%;display:flex;justify-content:space-between}.cart-window .small-item-name{width:200px}.cart-window .small-item-quantity{display:flex;align-items:center;justify-content:space-between;border-radius:5px;width:80px;background-color:#fafad2;padding:3px 8px;height:35px;font-weight:500;margin-right:3px}.cart-window .small-item-price{display:flex;flex-direction:column;gap:5px}.cart-window .small-item-price .price-with-tax{display:flex;font-size:13px!important}.cart-window .fotter-sec{background-color:#fff;position:absolute;bottom:0;left:0;width:100%;padding:10px}.cart-window .fotter-sec .payment-btn{border-radius:5px;border:none;display:flex;align-items:center;justify-content:center;background-color:#f08080;padding:10px 5px;color:#fff;cursor:pointer}.offers{background-color:#fff;display:flex;justify-content:space-between;padding:8px;border-radius:8px;box-shadow:#959da533 0 -1px 6px}.header-sec{font-size:26px}@media screen and (max-width: 475px){.cart-parent{flex-direction:column}.left-panel{width:100%}.right-panel{width:100%;z-index:1000}.cart-image{width:42%}.description{width:84%}.heading-medium{font-size:28px}.item-price{white-space:nowrap}.product-img{width:82px}[class*=col-md]{padding-left:5px!important;padding-right:5px!important}.mobile-fixed{height:40px;font-size:16px!important;border:1px solid lightgray;width:100%;position:relative;bottom:10px}.empty-cart-container{height:calc(100vh - 130px)}.coupons-listing-section{width:100vw!important}}.mobile-fixed{color:#fff}.coupons-listing-section{height:100vh;padding-top:0;position:relative;width:390px;z-index:100;background:#d3d3d354}.coupons-listing-section .coupon-heading{display:flex;align-items:center;background-color:#fff;padding:15px 20px;width:100%;box-sizing:border-box}.coupons-listing-section .coupon-heading img{height:15px;width:15px;position:relative;top:2px;cursor:pointer}.coupons-listing-section .coupon-heading .header-text{font-size:16px;color:#000;font-weight:600;margin-left:15px;position:relative;top:-3px;right:15px;cursor:pointer}.coupons-listing-section .coupon-search-sec{width:90%;box-sizing:border-box;margin:10px auto;border:1px solid lightgray;padding:10px;border-radius:10px;background-color:#fff;display:flex;font-size:16px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec input{border:none;outline:none;background-color:transparent;width:95%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-search-sec input:focus{font-size:14px;color:#000;font-weight:600}.coupons-listing-section .coupon-search-sec .back-btn{position:relative;top:3px;cursor:pointer}.coupons-listing-section .coupon-search-sec .apply-btn-search{font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing{height:72%;overflow-y:auto;width:90%;margin:20px auto}.coupons-listing-section .coupon-listing .coupon-details{padding:15px;margin-bottom:15px;background-color:#edfffa;border-radius:10px;border:1px solid lightgray}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading{display:flex;flex-direction:column;gap:25px}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief{display:flex;justify-content:space-between;width:100%}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-name{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-desc{padding:5px 0;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .show-details-btn{cursor:pointer}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec{display:flex;justify-content:flex-end}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-brief .coupon-brief__right-sec .apply-offer-btn{font-size:16px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-heading .coupon-toggle-details-btn{text-align:left;text-decoration:underline;width:100%;font-size:14px;color:#000;font-weight:400}.coupons-listing-section .coupon-listing .coupon-details .details-divider{border-top:2px solid lightgray;opacity:.3;margin:15px 0}.coupons-listing-section .coupon-listing .coupon-details .details__coupon-terms{font-size:14px;color:#000;font-weight:400}.empty-screen-container{height:100%;width:85%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}.empty-screen-container .empty-screen__primary-text{font-size:22px;color:#000;font-weight:400}.empty-screen-container .empty-screen__secondary-text{text-align:center;padding:10px 0;font-size:16px;color:#000;font-weight:400}.empty-screen-container .empty-screen__button{width:90%;background-color:#fff;border-radius:8px;text-align:center;padding:10px;margin:10px auto 0;cursor:pointer;font-size:18px;color:#000;font-weight:400}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: CartService }, { type: i2$3.Router }, { type: RestService }, { type: i5.MatDialog }, { type: StorageServiceService }, { type: i7.MessageService }, { type: i5$1.MatBottomSheet }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -5096,12 +5096,12 @@ class NavbarSectionComponent {
         return this.data?.type == "E_COMMERCE";
     }
     close() {
-        let a = document.getElementById("navbarNavAltMarkup");
-        if (!a)
-            return;
-        // a.style.display = "none"
-        a.classList.remove("show");
-        a.classList.add("collapse");
+        // let a = document.getElementById("navbarNavAltMarkup");
+        // if(!a) return;
+        // // a.style.display = "none"
+        // a.classList.remove("show");
+        // a.classList.add("collapse")
+        this.isNavbarOpen = false;
     }
     showEditTabs(isShow) {
         this.showEditors = isShow;
@@ -5175,7 +5175,7 @@ class NavbarSectionComponent {
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, deps: [{ token: EventsService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: i5.MatDialog }, { token: i5$1.MatBottomSheet }, { token: i2$2.CookieService }, { token: StorageServiceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\"  (click)=\"editSection()\"  [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [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\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n     <ng-container  *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"container-fluid position-relative\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex justify-content-end align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"container-fluid position-relative\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n          <div class=\"d-flex justify-content-end align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n        </div>\r\n\r\n        <div class=\"container-fluid position-relative align-item-center\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <div class=\"d-flex flex-column align-item-center\">\r\n            <div class=\"d-flex justify-content-center\">\r\n              <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n        </div>\r\n      </ng-container>\r\n     </ng-container>\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <div class=\"d-flex\">\r\n            <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"canShowMobileFooter\">\r\n          <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n\r\n    </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\" left-logo-text d-flex\">\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let 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\" *ngIf=\"getValues(content?.ecomlinks?.[link])?.length\">{{ 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])\">\r\n          <a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a>\r\n        </li>\r\n      </ul>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\r\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n       [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n        <div style=\"position: relative; margin-right: 10px;\">\r\n          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav align-items-center\">\r\n    <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n      <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"\r\n            [bgColor]=\"simpoColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element\r\n          [buttonContent]=\"button.content\"\r\n          [buttonStyle]=\"button.styles\"\r\n          [sectionId]=\"data?.id\"\r\n          [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n    <div class=\"input-group\" *ngIf=\"!isMobile\">\r\n      <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n  <div class=\"inner-height \">\r\n    <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n      <div class=\"title-row\">\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n      </div>\r\n\r\n\r\n      <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n        <mat-icon>expand_more</mat-icon>\r\n      </button>\r\n\r\n\r\n      <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n      <div class=\"d-flex flex-column gap-2\">\r\n\r\n        <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n        <div class=\"d-flex\" *ngIf=\"content?.socialLinks?.display\">\r\n          <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n            <div style=\"position: relative; margin-right: 10px;\">\r\n              <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex flex-column mt-2\">\r\n        <div *ngIf=\"action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of action?.buttons\">\r\n            <app-button-element\r\n              [buttonContent]=\"button.content\"\r\n              [buttonStyle]=\"button.styles\"\r\n              [sectionId]=\"data?.id\"\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</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.adjustePadding{padding:8px!important}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important;padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size: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:38px;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:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;background-color:#0e3f58;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:5px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:50px}}.cursor-pointer{cursor:pointer}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "pipe", type: GenderIcon, name: "genderIcon" }, { 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: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: 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"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: NavbarSectionComponent, isStandalone: true, selector: "simpo-navbar-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\"  (click)=\"editSection()\"  [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [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\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n     <ng-container  *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"container-fluid position-relative\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex justify-content-end align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"container-fluid position-relative\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n          <div class=\"d-flex justify-content-end align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n        </div>\r\n\r\n        <div class=\"container-fluid position-relative align-item-center\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <div class=\"d-flex flex-column align-item-center\">\r\n            <div class=\"d-flex justify-content-center\">\r\n              <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n        </div>\r\n      </ng-container>\r\n     </ng-container>\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <div class=\"d-flex\">\r\n            <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"canShowMobileFooter\">\r\n          <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n\r\n    </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\" left-logo-text d-flex\">\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let 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\" *ngIf=\"getValues(content?.ecomlinks?.[link])?.length\">{{ 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])\">\r\n          <a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a>\r\n        </li>\r\n      </ul>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\r\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n       [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n        <div style=\"position: relative; margin-right: 10px;\">\r\n          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav align-items-center\">\r\n    <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n      <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"\r\n            [bgColor]=\"simpoColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element\r\n          [buttonContent]=\"button.content\"\r\n          [buttonStyle]=\"button.styles\"\r\n          [sectionId]=\"data?.id\"\r\n          [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n    <div class=\"input-group\" *ngIf=\"!isMobile\">\r\n      <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n  <div class=\"inner-height \">\r\n    <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n      <div class=\"title-row\">\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n      </div>\r\n\r\n\r\n      <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n        <mat-icon>menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n    </button>\r\n\r\n\r\n      <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n      <div class=\"d-flex flex-column gap-2\">\r\n\r\n        <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n        <div class=\"d-flex\" *ngIf=\"content?.socialLinks?.display\">\r\n          <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n            <div style=\"position: relative; margin-right: 10px;\">\r\n              <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n    \r\n      <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n        <div *ngIf=\"action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of action?.buttons\">\r\n            <app-button-element\r\n              [buttonContent]=\"button.content\"\r\n              [buttonStyle]=\"button.styles\"\r\n              [sectionId]=\"data?.id\"\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</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.adjustePadding{padding:8px!important}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important;padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size: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:38px;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:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "pipe", type: GenderIcon, name: "genderIcon" }, { 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: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: 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"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatMenuModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: NavbarSectionComponent, decorators: [{
             type: Component,
@@ -5210,7 +5210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatBottomSheetModule,
                         MatButtonModule,
                         MatMenuModule
-                    ], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\"  (click)=\"editSection()\"  [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [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\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n     <ng-container  *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"container-fluid position-relative\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex justify-content-end align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"container-fluid position-relative\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n          <div class=\"d-flex justify-content-end align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n        </div>\r\n\r\n        <div class=\"container-fluid position-relative align-item-center\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <div class=\"d-flex flex-column align-item-center\">\r\n            <div class=\"d-flex justify-content-center\">\r\n              <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n        </div>\r\n      </ng-container>\r\n     </ng-container>\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <div class=\"d-flex\">\r\n            <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"canShowMobileFooter\">\r\n          <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n\r\n    </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\" left-logo-text d-flex\">\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let 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\" *ngIf=\"getValues(content?.ecomlinks?.[link])?.length\">{{ 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])\">\r\n          <a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a>\r\n        </li>\r\n      </ul>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\r\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n       [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n        <div style=\"position: relative; margin-right: 10px;\">\r\n          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav align-items-center\">\r\n    <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n      <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"\r\n            [bgColor]=\"simpoColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element\r\n          [buttonContent]=\"button.content\"\r\n          [buttonStyle]=\"button.styles\"\r\n          [sectionId]=\"data?.id\"\r\n          [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n    <div class=\"input-group\" *ngIf=\"!isMobile\">\r\n      <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n  <div class=\"inner-height \">\r\n    <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n      <div class=\"title-row\">\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n      </div>\r\n\r\n\r\n      <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n        <mat-icon>expand_more</mat-icon>\r\n      </button>\r\n\r\n\r\n      <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n      <div class=\"d-flex flex-column gap-2\">\r\n\r\n        <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n        <div class=\"d-flex\" *ngIf=\"content?.socialLinks?.display\">\r\n          <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n            <div style=\"position: relative; margin-right: 10px;\">\r\n              <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex flex-column mt-2\">\r\n        <div *ngIf=\"action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of action?.buttons\">\r\n            <app-button-element\r\n              [buttonContent]=\"button.content\"\r\n              [buttonStyle]=\"button.styles\"\r\n              [sectionId]=\"data?.id\"\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</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.adjustePadding{padding:8px!important}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important;padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size: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:38px;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:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;background-color:#0e3f58;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:5px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:50px}}.cursor-pointer{cursor:pointer}\n"] }]
+                    ], template: "<div [id]=\"data?.id\" [style.height.px]=\"getParentHeight\"  (click)=\"editSection()\"  [simpoBackground]=\"backgroundInfo\" class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\">\r\n  <div #mainContainer class=\"w-100\" style=\"z-index: 100;\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [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\" [ngClass]=\"{'adjustePadding': !isEcommerceWebsite, 'paddingEcom': isEcommerceWebsite, 'no-shadow': isComponentMerged}\">\r\n     <ng-container  *ngIf=\"!isMobile\">\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <div class=\"container-fluid position-relative\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_LEFT__MENU_RIGHT\">\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n          <div class=\"d-flex justify-content-end align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"container-fluid position-relative\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_RIGHT__MENU_LEFT\">\r\n          <div class=\"d-flex justify-content-end align-item-center\">\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n        </div>\r\n\r\n        <div class=\"container-fluid position-relative align-item-center\" *ngIf=\"getHeaderStyling == HeaderStyling.LOGO_CENTER__MENU_LEFT\">\r\n          <ng-container *ngTemplateOutlet=\"socialIconsTemplate\"></ng-container>\r\n          <div class=\"d-flex flex-column align-item-center\">\r\n            <div class=\"d-flex justify-content-center\">\r\n              <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            </div>\r\n\r\n            <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n\r\n        </div>\r\n      </ng-container>\r\n     </ng-container>\r\n\r\n      <ng-container *ngIf=\"isEcommerceWebsite\">\r\n        <div class=\"d-flex justify-content-between align-items-center px-2\">\r\n          <div class=\"d-flex\">\r\n            <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n            <ng-container *ngTemplateOutlet=\"navbarLinksTemplate\"></ng-container>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"ecommerceButtonsTemplate\"></ng-container>\r\n        </div>\r\n        <ng-container *ngIf=\"canShowMobileFooter\">\r\n          <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <ng-container *ngTemplateOutlet=\"mobileButtonsTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n\r\n    </nav>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #logoSectionTemplate>\r\n  <div class=\" left-logo-text d-flex\">\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n        <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n      </div>\r\n      <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n        <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n      </div>\r\n    </div>\r\n    <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\">\r\n      <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n  <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\" [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n    <ng-container *ngFor=\"let 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\" *ngIf=\"getValues(content?.ecomlinks?.[link])?.length\">{{ 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])\">\r\n          <a class=\"dropdown-item\" (click)=\"applyFilter(value, link)\">{{value}}</a>\r\n        </li>\r\n      </ul>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #socialIconsTemplate>\r\n  <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n       [ngClass]=\"content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n    <div class=\"d-flex mt-0\" *ngIf=\"content?.socialLinks?.display\">\r\n      <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n        <div style=\"position: relative; margin-right: 10px;\">\r\n          <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n  <div class=\"navbar-nav align-items-center\">\r\n    <div class=\"d-flex align-items-center gap-3\" style=\"margin-right: 10px;\">\r\n      <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n        <ng-container *ngIf=\"item.showHeader\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"\r\n            [bgColor]=\"simpoColor\"\r\n            [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"d-flex\">\r\n    <div *ngIf=\"action?.display\" class=\"button-display mt-0\">\r\n      <div *ngFor=\"let button of action?.buttons\">\r\n        <app-button-element\r\n          [buttonContent]=\"button.content\"\r\n          [buttonStyle]=\"button.styles\"\r\n          [sectionId]=\"data?.id\"\r\n          [color]=\"data?.styles?.background?.accentColor\"></app-button-element>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n  <div class=\"justify-content-between pr-0 d-flex\" style=\"max-width: 50vw;\">\r\n    <div class=\"input-group\" *ngIf=\"!isMobile\">\r\n      <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n      <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\" [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProducts()\">\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\" *ngIf=\"!isMobile\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\">Bag</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToAccount()\">\r\n      <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 30px;\">\r\n      <span class=\"fw-normal fs-6\" [simpoColor]=\"simpoColor\" *ngIf=\"!isMobile\">Account</span>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n  <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n    <div class=\"icons\" (click)=\"goToHome()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Home</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"searchProducts()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Shop</span>\r\n    </div>\r\n    <div class=\"icons\" (click)=\"goToWishlist()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n    </div>\r\n    <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n      <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n      <span [simpoColor]=\"simpoColor\">Cart</span>\r\n      <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileButtonsTemplate>\r\n  <div class=\"inner-height \">\r\n    <div class=\"nab-bar-mobile d-flex justify-content-between align-items-center\">\r\n\r\n      <div class=\"title-row\">\r\n        <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n      </div>\r\n\r\n\r\n      <button class=\"navbar-toggler\" (click)=\"isNavbarOpen = !isNavbarOpen\" *ngIf=\"!isNavbarOpen\">\r\n        <mat-icon>menu</mat-icon> <!-- Use \"menu\" for a hamburger icon -->\r\n    </button>\r\n\r\n\r\n      <div class=\"close-box cursor-pointer d-flex\" (click)=\"close()\" *ngIf=\"isNavbarOpen\">\r\n        <mat-icon>close</mat-icon>\r\n      </div>\r\n    </div>\r\n\r\n\r\n    <div *ngIf=\"isNavbarOpen\" class=\"navbar-content mt-3\">\r\n      <div class=\"d-flex flex-column gap-2\">\r\n\r\n        <ng-container *ngFor=\"let item of content?.navbarButtons\">\r\n          <simpo-navbar-button-element\r\n            [buttonData]=\"item\"\r\n            [selectedStyle]=\"style?.navigationStyle\"\r\n            [buttonStyle]=\"style?.navbarButtonStyle\"></simpo-navbar-button-element>\r\n        </ng-container>\r\n      </div>\r\n\r\n\r\n      <div class=\"d-flex align-items-start flex-column flex-lg-row gap-lg-0 gap-3 mt-2\">\r\n        <div class=\"d-flex\" *ngIf=\"content?.socialLinks?.display\">\r\n          <ng-container *ngFor=\"let item of content?.socialLinks?.channels\">\r\n            <div style=\"position: relative; margin-right: 10px;\">\r\n              <simpo-socia-icons [socialIconData]=\"item\" [color]=\"simpoColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n\r\n    \r\n      <div class=\"d-flex flex-column mt-2 align-items-center\">\r\n        <div *ngIf=\"action?.display\" class=\"button-display\">\r\n          <div *ngFor=\"let button of action?.buttons\">\r\n            <app-button-element\r\n              [buttonContent]=\"button.content\"\r\n              [buttonStyle]=\"button.styles\"\r\n              [sectionId]=\"data?.id\"\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</ng-template>\r\n\r\n\r\n\r\n\r\n", styles: [".navbar-toggler{height:40px}.button-display{display:flex;gap:12px;width:max-content}.adjustePadding{padding:8px!important}.ecomStyle{box-shadow:-9px 5px 3px #99999929}.no-shadow{box-shadow:none!important}.container-fluid{display:flex;align-items:center}@media only screen and (max-width : 475px){.left-logo-text{width:85%!important;padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}}.nav-link{text-decoration:none}.cartItemCount{background:#0267c1d6;padding:5px;border-radius:50%;color:#fff;top:0;right:25px;height:22px;width:22px;display:flex;align-items:center;justify-content:center;font-size:12px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size: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:38px;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:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: EventsService }, { type: i2$3.Router }, { type: i2$3.ActivatedRoute }, { type: i5.MatDialog }, { type: i5$1.MatBottomSheet }, { type: i2$2.CookieService }, { type: StorageServiceService }], propDecorators: { data: [{
                 type: Input
             }], nextComponent: [{
@@ -8025,7 +8025,7 @@ class ProductDescComponent extends BaseSection {
         return window.innerWidth <= 475;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i7.MessageService }, { token: i1.Meta }, { token: i1.Title }, { token: i5$1.MatBottomSheet }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" (click)=\"editSection()\">\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [style.height.vh]=\"!isMobile ? 100 : ''\">\r\n      <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div>\r\n      <div class=\"row h-100\" style=\"margin-top: 25px;\"  class=\"above-height\" [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-12 h-100 product-detail\">\r\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n            <div>\r\n              <div class=\"varient-key\">{{varient.key}}</div>\r\n              <div class=\"d-flex\" style=\"gap: 5px;\">\r\n\r\n                <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\r\n                <div *ngFor=\"let varientValue of varient.value\"\r\n                class=\"varient-tag\"\r\n                  [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n                  [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n          <div class=\"product-sku\">\r\n            <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n            <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\r\n                (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *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          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\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?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container>\r\n    <ng-container>\r\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *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</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n      <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\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    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n  </div>\r\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\"  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button  [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n          [color]=\"data?.styles?.background?.accentColor\" (click)=\"addProductReview()\" [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\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]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\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      <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n    </div>\r\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n        [color]=\"data?.styles?.background?.accentColor\"\r\n        (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"favourite\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #ProductDesc>\r\n  <div class=\"heading-large trim-text\" class=\"product-heading\" >{{responseData?.name}}</div>\r\n  <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n    <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n      *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.value}}</div>\r\n    <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.discountedPrice}}</div>\r\n    <div class=\"tax-text\">(excluding all taxes)</div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading\">\r\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n\r\n        <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon>\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\" [magnification]=\"2\"\r\n            [lensHeight]=\"100\" [lensWidth]=\"100\" style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px',\r\n      'position': 'relative',\r\n      'right': '5px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        This content is aligned from right to left.\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n        <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->\r\n", styles: [".product-desc{display:flex}.share-icon{border:1.5px solid rgba(211,211,211,.382);position:absolute;top:10px;right:10px;z-index:1;opacity:.5;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:#00000003 0 1px 2px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;max-height:460px;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:100%;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.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:50px;width:155px;justify-content:space-between;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}.trim-text{-webkit-line-clamp:3!important}.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}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.above-height{height:90vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:min-content}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{height:25%;width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:0 20px;min-height:95vh!important;height:unset!important}.product-heading{font-size:25px}}.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-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%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 0% 0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: 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"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: i14$1.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "edit", "customClass", "delete"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i16.SpeedDial, selector: "p-speedDial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i17.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: CustomerReviewComponent, selector: "simpo-customer-review", inputs: ["data", "index", "edit", "delete"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" (click)=\"editSection()\">\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [style.height.vh]=\"!isMobile ? 100 : ''\">\r\n      <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div>\r\n      <div class=\"row h-100\" style=\"margin-top: 25px;\"  class=\"above-height\" [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-12 h-100 product-detail\">\r\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n            <div>\r\n              <div class=\"varient-key\">{{varient.key}}</div>\r\n              <div class=\"d-flex\" style=\"gap: 5px;\">\r\n\r\n                <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\r\n                <div *ngFor=\"let varientValue of varient.value\"\r\n                class=\"varient-tag\"\r\n                  [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n                  [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n          <div class=\"product-sku\">\r\n            <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n            <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\r\n                (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *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          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n          <!-- <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n      </div>\r\n      <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\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?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container>\r\n    <!-- <ng-container>\r\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n    </ng-container> -->\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *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</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n      <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\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    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n  </div>\r\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\"  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button  [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n          [color]=\"data?.styles?.background?.accentColor\" (click)=\"addProductReview()\" [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\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]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\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      <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n    </div>\r\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n        [color]=\"data?.styles?.background?.accentColor\"\r\n        (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"favourite\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #ProductDesc>\r\n  <div class=\"heading-large trim-text\" class=\"product-heading\" >{{responseData?.name}}</div>\r\n  <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n    <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n      *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.value}}</div>\r\n    <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.discountedPrice}}</div>\r\n    <div class=\"tax-text\">(excluding all taxes)</div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading\">\r\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n\r\n        <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon>\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\" [magnification]=\"2\"\r\n            [lensHeight]=\"100\" [lensWidth]=\"100\" style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px',\r\n      'position': 'relative',\r\n      'right': '5px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        This content is aligned from right to left.\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n        <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->\r\n", styles: [".product-desc{display:flex}.share-icon{border:1.5px solid rgba(211,211,211,.382);position:absolute;top:10px;right:10px;z-index:1;opacity:.5;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:#00000003 0 1px 2px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;max-height:460px;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:100%;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.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:50px;width:155px;justify-content:space-between;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}.trim-text{-webkit-line-clamp:3!important}.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}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.above-height{height:90vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:min-content}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{height:25%;width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:0 20px;min-height:95vh!important;height:unset!important}.product-heading{font-size:25px}}.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-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%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 0% 0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: 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"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: i14$1.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "edit", "customClass", "delete"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i3.Rating, selector: "p-rating", inputs: ["disabled", "readonly", "stars", "cancel", "iconOnClass", "iconOnStyle", "iconOffClass", "iconOffStyle", "iconCancelClass", "iconCancelStyle", "autofocus"], outputs: ["onRate", "onCancel", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i16.SpeedDial, selector: "p-speedDial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i17.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, decorators: [{
             type: Component,
@@ -8050,7 +8050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         SpeedDialModule,
                         ToastModule,
                         CustomerReviewComponent
-                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" (click)=\"editSection()\">\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [style.height.vh]=\"!isMobile ? 100 : ''\">\r\n      <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div>\r\n      <div class=\"row h-100\" style=\"margin-top: 25px;\"  class=\"above-height\" [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-12 h-100 product-detail\">\r\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n            <div>\r\n              <div class=\"varient-key\">{{varient.key}}</div>\r\n              <div class=\"d-flex\" style=\"gap: 5px;\">\r\n\r\n                <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\r\n                <div *ngFor=\"let varientValue of varient.value\"\r\n                class=\"varient-tag\"\r\n                  [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n                  [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n          <div class=\"product-sku\">\r\n            <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n            <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\r\n                (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *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          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n          <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\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?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container>\r\n    <ng-container>\r\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n    </ng-container>\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *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</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n      <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\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    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n  </div>\r\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\"  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button  [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n          [color]=\"data?.styles?.background?.accentColor\" (click)=\"addProductReview()\" [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\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]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\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      <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n    </div>\r\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n        [color]=\"data?.styles?.background?.accentColor\"\r\n        (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"favourite\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #ProductDesc>\r\n  <div class=\"heading-large trim-text\" class=\"product-heading\" >{{responseData?.name}}</div>\r\n  <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n    <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n      *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.value}}</div>\r\n    <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.discountedPrice}}</div>\r\n    <div class=\"tax-text\">(excluding all taxes)</div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading\">\r\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n\r\n        <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon>\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\" [magnification]=\"2\"\r\n            [lensHeight]=\"100\" [lensWidth]=\"100\" style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px',\r\n      'position': 'relative',\r\n      'right': '5px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        This content is aligned from right to left.\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n        <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->\r\n", styles: [".product-desc{display:flex}.share-icon{border:1.5px solid rgba(211,211,211,.382);position:absolute;top:10px;right:10px;z-index:1;opacity:.5;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:#00000003 0 1px 2px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;max-height:460px;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:100%;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.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:50px;width:155px;justify-content:space-between;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}.trim-text{-webkit-line-clamp:3!important}.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}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.above-height{height:90vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:min-content}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{height:25%;width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:0 20px;min-height:95vh!important;height:unset!important}.product-heading{font-size:25px}}.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-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%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 0% 0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}\n"] }]
+                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" (click)=\"editSection()\">\r\n\r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [style.height.vh]=\"!isMobile ? 100 : ''\">\r\n      <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div>\r\n      <div class=\"row h-100\" style=\"margin-top: 25px;\"  class=\"above-height\" [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\" class=\"height\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-12 h-100 product-detail\">\r\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n            <div>\r\n              <div class=\"varient-key\">{{varient.key}}</div>\r\n              <div class=\"d-flex\" style=\"gap: 5px;\">\r\n\r\n                <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\r\n                <div *ngFor=\"let varientValue of varient.value\"\r\n                class=\"varient-tag\"\r\n                  [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n                  [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n          <div class=\"product-sku\">\r\n            <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n            <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\r\n                (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *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          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n          <!-- <ng-container>\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container> -->\r\n        </div>\r\n      </div>\r\n      <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\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?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"recentViewItemList?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"recentViewedData\" [responseData]=\"recentViewItemList\"\r\n        [isRelatedProduct]=\"true\"></simpo-featured-products>\r\n    </ng-container>\r\n    <!-- <ng-container>\r\n      <simpo-customer-review [data]=\"data\"></simpo-customer-review>\r\n    </ng-container> -->\r\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *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</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n      <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\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    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n  </div>\r\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\"  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button  [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n          [color]=\"data?.styles?.background?.accentColor\" (click)=\"addProductReview()\" [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\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]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\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      <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n    </div>\r\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n        [color]=\"data?.styles?.background?.accentColor\"\r\n        (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"favourite\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #ProductDesc>\r\n  <div class=\"heading-large trim-text\" class=\"product-heading\" >{{responseData?.name}}</div>\r\n  <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n    <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n      *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.value}}</div>\r\n    <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.discountedPrice}}</div>\r\n    <div class=\"tax-text\">(excluding all taxes)</div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading\">\r\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n\r\n        <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon>\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\" [magnification]=\"2\"\r\n            [lensHeight]=\"100\" [lensWidth]=\"100\" style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px',\r\n      'position': 'relative',\r\n      'right': '5px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        This content is aligned from right to left.\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n        <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->\r\n", styles: [".product-desc{display:flex}.share-icon{border:1.5px solid rgba(211,211,211,.382);position:absolute;top:10px;right:10px;z-index:1;opacity:.5;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:#00000003 0 1px 2px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;max-height:460px;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:100%;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.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:50px;width:155px;justify-content:space-between;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}.trim-text{-webkit-line-clamp:3!important}.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}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.above-height{height:90vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:min-content}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}@media only screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:100000001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{height:25%;width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:0 20px;min-height:95vh!important;height:unset!important}.product-heading{font-size:25px}}.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-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%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}@media (min-width:768px) and (max-width:991px){.item-img{position:relative;width:auto!important;height:auto!important;overflow:hidden}.item-img img{height:auto!important;width:auto!important}.height{width:min-content}.above-height{width:100%;padding:2%;display:flex;flex-direction:column}.product-detail{padding:0vw 42vw 0vw 2vw}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:911px){.product-detail{padding:0% 34% 0% 2%}.above-height{display:flex}.prod-img-block{height:100%;display:flex;gap:5px}}@media (min-width:1024px){.product-detail{padding:0% 0% 0% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]