simpo-component-library 3.6.173 → 3.6.176

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/esm2022/lib/ecommerce/sections/cart/cart.component.mjs +23 -249
  2. package/esm2022/lib/ecommerce/sections/product-desc/product-desc.component.mjs +3 -3
  3. package/esm2022/lib/sections/header-section/header-section.component.mjs +4 -4
  4. package/fesm2022/simpo-component-library.mjs +27 -253
  5. package/fesm2022/simpo-component-library.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/simpo-component-library-3.6.176.tgz +0 -0
  8. package/simpo-component-library-3.6.173.tgz +0 -0
package/fesm2022/simpo-component-library.mjs CHANGED
@@ -7720,255 +7720,29 @@ class CartComponent extends BaseSection {
7720
7720
  event.preventDefault();
7721
7721
  }
7722
7722
  getIndexDBData() {
7723
- // this.storageService.getUserCart().then((cartResponse) => {
7724
- const deliveryOption = JSON.parse(localStorage.getItem("deliveryOptions") ?? "{}");
7725
- this.cartInfo.billdetails.totalGrossValue = 0;
7726
- this.cartInfo.billdetails.totalTax = 0;
7727
- this.cartInfo.billdetails.totalNetValue = 0;
7728
- this.cartInfo.totalAmount = 0;
7729
- this.cartInfo.billdetails.deliveryCharges = 0;
7730
- let cartData = {
7731
- target: [
7732
- {
7733
- "itemId": {
7734
- "$binary": {
7735
- "base64": "Yk570INX4ngHB98ufo+Rgw==",
7736
- "subType": "03"
7737
- }
7738
- },
7739
- "varientId": {
7740
- "$binary": {
7741
- "base64": "OE7Yu/XE8Q4N3Xs3eKWXqQ==",
7742
- "subType": "03"
7743
- }
7744
- },
7745
- "businessId": {
7746
- "$binary": {
7747
- "base64": "Q2K7O50s+R5ZU3NswDFzlQ==",
7748
- "subType": "03"
7749
- }
7750
- },
7751
- "itemName": "TrackMe ACE 4G Smart Watch for Kids GPS/LBS and WiFi Tracking Waterproof Smartwatch with Video Call Phone Watch",
7752
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/707640c17295824121271.png",
7753
- "itemVariant": {
7754
- "_id": {
7755
- "$binary": {
7756
- "base64": "OE7Yu/XE8Q4N3Xs3eKWXqQ==",
7757
- "subType": "03"
7758
- }
7759
- },
7760
- "itemId": {
7761
- "$binary": {
7762
- "base64": "Yk570INX4ngHB98ufo+Rgw==",
7763
- "subType": "03"
7764
- }
7765
- },
7766
- "variantName": "",
7767
- "isDelete": false,
7768
- "variantImages": [
7769
- {
7770
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/707640c17295824121271.png"
7771
- },
7772
- {
7773
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/403096c1729582416253WhatsApp%20Image%202024-06-25%20at%2013.33.15%283%29.jpeg"
7774
- },
7775
- {
7776
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/581151c172958241998702.png"
7777
- },
7778
- {
7779
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/882542c172958242362303%20SOS.png"
7780
- },
7781
- {
7782
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/548854c172958242920612.png"
7783
- },
7784
- {
7785
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/339359c172958243549013.png"
7786
- },
7787
- {
7788
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/309311c172958244990517.png"
7789
- },
7790
- {
7791
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/308140c172958245483818.png"
7792
- },
7793
- {
7794
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/143302c172958245756319.png"
7795
- },
7796
- {
7797
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/980674c172958246024322.png"
7798
- },
7799
- {
7800
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/593580c172958246291429.png"
7801
- },
7802
- {
7803
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/724255c1729582468645KW116%20%283%29.png"
7804
- },
7805
- {
7806
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/424185c1729582473808WhatsApp%20Image%202024-06-25%20at%2013.33.15%282%29.jpeg"
7807
- },
7808
- {
7809
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/363680c1729582476391WhatsApp%20Image%202024-06-25%20at%2013.33.15%289%29.jpeg"
7810
- },
7811
- {},
7812
- {}
7813
- ],
7814
- "properties": {
7815
- "Colour": "Pink"
7816
- },
7817
- "itemVariantPrice": {
7818
- "value": 5199,
7819
- "purchasePrice": 0,
7820
- "discountedPrice": 5199,
7821
- "sellingPrice": 5199,
7822
- "taxAmount": 0
7823
- },
7824
- "itemInventory": {
7825
- "openingStock": 50,
7826
- "lowStockQuantity": 0,
7827
- "lowStockAlert": false
7828
- }
7829
- },
7830
- "quantity": 1,
7831
- "price": 5199,
7832
- "itemTax": 0,
7833
- "discountedPrice": 5199,
7834
- "discountAmount": 0,
7835
- "taxAfterDiscount": 0
7836
- },
7837
- {
7838
- "itemId": {
7839
- "$binary": {
7840
- "base64": "hkLMBEcsE7HKzlj6R6lplw==",
7841
- "subType": "03"
7842
- }
7843
- },
7844
- "varientId": {
7845
- "$binary": {
7846
- "base64": "OEXneML9JEDPJFwTTQ5yoQ==",
7847
- "subType": "03"
7848
- }
7849
- },
7850
- "businessId": {
7851
- "$binary": {
7852
- "base64": "Q2K7O50s+R5ZU3NswDFzlQ==",
7853
- "subType": "03"
7854
- }
7855
- },
7856
- "itemName": "TrackMe Magic Kid's Calling Watch, Waterproof with Touchscreen Display, Camera, Video Calling, Detachable and Extra dial and Starp, SOS, Location Finder,Activity Tracker",
7857
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/907023c172958484439234.jpg",
7858
- "itemVariant": {
7859
- "_id": {
7860
- "$binary": {
7861
- "base64": "OEXneML9JEDPJFwTTQ5yoQ==",
7862
- "subType": "03"
7863
- }
7864
- },
7865
- "itemId": {
7866
- "$binary": {
7867
- "base64": "hkLMBEcsE7HKzlj6R6lplw==",
7868
- "subType": "03"
7869
- }
7870
- },
7871
- "variantName": "",
7872
- "isDelete": false,
7873
- "variantImages": [
7874
- {
7875
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/907023c172958484439234.jpg"
7876
- },
7877
- {
7878
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/689610c172958484946235.jpg"
7879
- },
7880
- {
7881
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/792591c17295848522283.jpg"
7882
- },
7883
- {
7884
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/807766c17295848557542_1.jpg"
7885
- },
7886
- {
7887
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/583500c17295848642026.jpg"
7888
- },
7889
- {
7890
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/867911c172958487134318.jpg"
7891
- },
7892
- {
7893
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/144815c172958487650412.jpg"
7894
- },
7895
- {
7896
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/815442c172958488397815.jpg"
7897
- },
7898
- {
7899
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/423671c17295848912475_1.jpg"
7900
- },
7901
- {
7902
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/588000c17295848966008_1.jpg"
7903
- },
7904
- {
7905
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/112787c17295849014749.jpg"
7906
- },
7907
- {
7908
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/393925c172958490754811_1.jpg"
7909
- },
7910
- {
7911
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/880344c172958491450914_1.jpg"
7912
- },
7913
- {
7914
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/783689c172958492137217_1.jpg"
7915
- },
7916
- {
7917
- "imgUrl": "https://dev-beeos.s3.amazonaws.com/product_image/269593c172958492884321-1.jpg"
7918
- }
7919
- ],
7920
- "properties": {
7921
- "Colour": "Black"
7922
- },
7923
- "itemVariantPrice": {
7924
- "value": 5399,
7925
- "purchasePrice": 0,
7926
- "discountedPrice": 5399,
7927
- "sellingPrice": 5399,
7928
- "taxAmount": 0
7929
- },
7930
- "itemInventory": {
7931
- "openingStock": 36,
7932
- "lowStockQuantity": 0,
7933
- "lowStockAlert": false
7934
- }
7935
- },
7936
- "quantity": 1,
7937
- "price": 5399,
7938
- "itemTax": 0,
7939
- "discountedPrice": 5399,
7940
- "discountAmount": 0,
7941
- "taxAfterDiscount": 0
7942
- },
7943
- ],
7944
- "billdetails": {
7945
- "totalNetValue": 32594,
7946
- "totalGrossValue": 32594,
7947
- "totalTax": 0,
7948
- "finalPrice": 32594,
7949
- "deliveryCharges": 0,
7950
- "discountAmount": 0,
7951
- "totalTaxAfterDiscount": 0,
7952
- "couponId": "124"
7953
- },
7954
- "totalAmount": 32594,
7955
- };
7956
- // cartResponse.onsuccess = (cartData: any) => {
7957
- this.USER_CART_ITEMS = cartData.target;
7958
- this.USER_CART_ITEMS.forEach((item) => {
7959
- this.cartInfo.billdetails.totalGrossValue += (item.discountedPrice * (item.quantity ?? 1));
7960
- this.cartInfo.billdetails.totalTax += (item.quantity * (item.itemTax ?? 0));
7723
+ this.storageService.getUserCart().then((cartResponse) => {
7724
+ const deliveryOption = JSON.parse(localStorage.getItem("deliveryOptions") ?? "{}");
7725
+ this.cartInfo.billdetails.totalGrossValue = 0;
7726
+ this.cartInfo.billdetails.totalTax = 0;
7727
+ this.cartInfo.billdetails.totalNetValue = 0;
7728
+ this.cartInfo.totalAmount = 0;
7729
+ this.cartInfo.billdetails.deliveryCharges = 0;
7730
+ cartResponse.onsuccess = (cartData) => {
7731
+ this.USER_CART_ITEMS = cartData.target.result;
7732
+ this.USER_CART_ITEMS.forEach((item) => {
7733
+ this.cartInfo.billdetails.totalGrossValue += (item.discountedPrice * (item.quantity ?? 1));
7734
+ this.cartInfo.billdetails.totalTax += (item.quantity * (item.itemTax ?? 0));
7735
+ });
7736
+ this.cartInfo.billdetails.totalTaxAfterDiscount = cartData.billdetails?.totalTaxAfterDiscount ?? 0;
7737
+ this.cartInfo.billdetails.deliveryCharges = (deliveryOption?.minOrderAmount > this.cartInfo.billdetails.totalGrossValue) ? 0 : (deliveryOption?.deliveryCharges ?? 0);
7738
+ this.cartInfo.billdetails.totalNetValue = this.cartInfo.billdetails.totalGrossValue;
7739
+ this.cartInfo.totalAmount = this.cartInfo.billdetails.totalNetValue + this.getTaxAmount() + this.cartInfo.billdetails.deliveryCharges;
7740
+ this.cartInfo.orderedItems = this.USER_CART_ITEMS;
7741
+ if (this.storageService.getUser())
7742
+ this.updateUserCart();
7743
+ this.responseData = this.cartInfo;
7744
+ };
7961
7745
  });
7962
- this.cartInfo.billdetails.totalTaxAfterDiscount = cartData.billdetails?.totalTaxAfterDiscount ?? 0;
7963
- this.cartInfo.billdetails.deliveryCharges = (deliveryOption?.minOrderAmount > this.cartInfo.billdetails.totalGrossValue) ? 0 : (deliveryOption?.deliveryCharges ?? 0);
7964
- this.cartInfo.billdetails.totalNetValue = this.cartInfo.billdetails.totalGrossValue;
7965
- this.cartInfo.totalAmount = this.cartInfo.billdetails.totalNetValue + this.getTaxAmount() + this.cartInfo.billdetails.deliveryCharges;
7966
- this.cartInfo.orderedItems = this.USER_CART_ITEMS;
7967
- if (this.storageService.getUser())
7968
- this.updateUserCart();
7969
- this.responseData = this.cartInfo;
7970
- // }
7971
- // })
7972
7746
  }
7973
7747
  proceedToCheckout() {
7974
7748
  if (this.storageService.getUser()) {
@@ -14086,7 +13860,7 @@ class HeaderSectionComponent {
14086
13860
  }
14087
13861
  }
14088
13862
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
14089
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [style.height.px]=\"getParentHeight\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [ngClass]=\"{'box-shadow': isEcommerceWebsite}\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\"\r\n [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n <div>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n </div>\r\n <!-- <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container> -->\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" 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\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"input-group w-50\" [ngStyle]=\"{'border' : '2px solid ' + accentColor}\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"accentColor\" *ngIf=\"storeAvaiable\">\r\n <mat-icon [style.color]=\"accentColor\">store</mat-icon>\r\n <span [style.color]=\"accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true\" [style.color]=\"accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true\" [style.color]=\"accentColor\"\r\n *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" + getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-1\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">person_outline</mat-icon>\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-2\">\r\n <div (click)=\"goToAccount('SIGN_UP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\" [style.borderColor]=\"accentColor\"\r\n [style.color]=\"accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [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 [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\"\r\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n {{ele?.categoryName | titlecase}}\r\n </div>\r\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n [style.color]=\"data?.styles?.background?.accentColor\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n Collections\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showList = false\" -->\r\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n <div class=\"list-header mb-3\">By Price</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n <div class=\"each-price cursor-pointer\"\r\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n {{price | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 overflow-scroll\"\r\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n <div class=\"list-header mb-3\">By Style</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n |\r\n titlecase}}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls; let i = index\">\r\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showCollections = false\" -->\r\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n <div class=\"collection row col-3 align-items-center\"\r\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n <div class=\"col-imag col-4\">\r\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"col-8 text-overflow\">\r\n {{collection?.collectionName | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls); let i = index\">\r\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;border-radius:12px;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:10px}.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}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;padding:6px 15px;border-radius:8px;cursor:pointer}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:after{content:\"\";position:absolute;bottom:0;left:50%;width:0;height:3px;background:var(--border-color);transition:all .3s ease;transform:translate(-50%)}.category:hover:after{width:100%}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:18px;font-weight:600}.list-item{gap:1rem;font-size:16px}.image-container img{border-radius:12px}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content}.text-overflow{overflow:hidden;text-overflow:ellipsis}.col-5{width:44.666667%}.h-10{height:10vh}.br-12{border-radius:12px}.pincode-container{position:absolute;background:#fff;height:max-content;width:20vw;right:3%;top:155%;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.pin-text{font-size:14px;font-weight:500}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;height:max-content;width:20vw;right:-15px;top:155%;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
13863
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [style.height.px]=\"getParentHeight\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [ngClass]=\"{'box-shadow': isEcommerceWebsite}\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\"\r\n [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n <div>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n </div>\r\n <!-- <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container> -->\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" 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\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"input-group w-50\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\" [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\" [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"accentColor\" *ngIf=\"storeAvaiable\">\r\n <mat-icon [style.color]=\"accentColor\">store</mat-icon>\r\n <span [style.color]=\"accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true\" [style.color]=\"accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true\" [style.color]=\"accentColor\"\r\n *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" + getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-1\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/346102c1753601987804WhatsApp Image 2025-07-27 at 13.08.05_ca96ea32.jpg\" alt=\"\" class=\"w-100\">\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-2\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\" [style.borderColor]=\"accentColor\"\r\n [style.color]=\"accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [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 [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\"\r\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n {{ele?.categoryName | titlecase}}\r\n </div>\r\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n [style.color]=\"data?.styles?.background?.accentColor\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n Collections\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showList = false\" -->\r\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n <div class=\"list-header mb-3\">By Price</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n <div class=\"each-price cursor-pointer\"\r\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n {{price | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 overflow-scroll\"\r\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n <div class=\"list-header mb-3\">By Style</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n |\r\n titlecase}}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls; let i = index\">\r\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showCollections = false\" -->\r\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n <div class=\"collection row col-3 align-items-center\"\r\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n <div class=\"col-imag col-4\">\r\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"col-8 text-overflow\">\r\n {{collection?.collectionName | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls); let i = index\">\r\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:45px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:after{content:\"\";position:absolute;bottom:0;left:50%;width:0;height:3px;background:var(--border-color);transition:all .3s ease;transform:translate(-50%)}.category:hover:after{width:100%}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:18px;font-weight:600}.list-item{gap:1rem;font-size:16px}.image-container img{border-radius:12px}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content}.text-overflow{overflow:hidden;text-overflow:ellipsis}.col-5{width:44.666667%}.h-10{height:10vh}.br-12{border-radius:12px}.pincode-container{position:absolute;background:#fff;height:max-content;width:20vw;right:3%;top:155%;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;height:max-content;width:20vw;right:-15px;top:155%;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
14090
13864
  }
14091
13865
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
14092
13866
  type: Component,
@@ -14123,8 +13897,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
14123
13897
  MatMenuModule,
14124
13898
  SpacingHorizontalDirective,
14125
13899
  MovingTextComponent,
14126
- ContentFitDirective
14127
- ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [style.height.px]=\"getParentHeight\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [ngClass]=\"{'box-shadow': isEcommerceWebsite}\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\"\r\n [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n <div>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n </div>\r\n <!-- <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container> -->\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" 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\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"input-group w-50\" [ngStyle]=\"{'border' : '2px solid ' + accentColor}\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"accentColor\" *ngIf=\"storeAvaiable\">\r\n <mat-icon [style.color]=\"accentColor\">store</mat-icon>\r\n <span [style.color]=\"accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true\" [style.color]=\"accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true\" [style.color]=\"accentColor\"\r\n *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" + getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-1\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">person_outline</mat-icon>\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-2\">\r\n <div (click)=\"goToAccount('SIGN_UP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\" [style.borderColor]=\"accentColor\"\r\n [style.color]=\"accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [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 [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\"\r\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n {{ele?.categoryName | titlecase}}\r\n </div>\r\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n [style.color]=\"data?.styles?.background?.accentColor\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n Collections\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showList = false\" -->\r\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n <div class=\"list-header mb-3\">By Price</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n <div class=\"each-price cursor-pointer\"\r\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n {{price | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 overflow-scroll\"\r\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n <div class=\"list-header mb-3\">By Style</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n |\r\n titlecase}}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls; let i = index\">\r\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showCollections = false\" -->\r\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n <div class=\"collection row col-3 align-items-center\"\r\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n <div class=\"col-imag col-4\">\r\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"col-8 text-overflow\">\r\n {{collection?.collectionName | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls); let i = index\">\r\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;border-radius:12px;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:10px}.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}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;padding:6px 15px;border-radius:8px;cursor:pointer}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:after{content:\"\";position:absolute;bottom:0;left:50%;width:0;height:3px;background:var(--border-color);transition:all .3s ease;transform:translate(-50%)}.category:hover:after{width:100%}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:18px;font-weight:600}.list-item{gap:1rem;font-size:16px}.image-container img{border-radius:12px}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content}.text-overflow{overflow:hidden;text-overflow:ellipsis}.col-5{width:44.666667%}.h-10{height:10vh}.br-12{border-radius:12px}.pincode-container{position:absolute;background:#fff;height:max-content;width:20vw;right:3%;top:155%;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.pin-text{font-size:14px;font-weight:500}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;height:max-content;width:20vw;right:-15px;top:155%;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}\n"] }]
13900
+ ContentFitDirective,
13901
+ ], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [style.height.px]=\"getParentHeight\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [ngClass]=\"{'box-shadow': isEcommerceWebsite}\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\"\r\n [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n <div>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n </div>\r\n <!-- <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container> -->\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" 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\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"input-group w-50\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\" [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\" [style.color]=\"style?.background?.color\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\r\n [style.borderColor]=\"accentColor\" *ngIf=\"storeAvaiable\">\r\n <mat-icon [style.color]=\"accentColor\">store</mat-icon>\r\n <span [style.color]=\"accentColor\">Stores</span>\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true\" [style.color]=\"accentColor\" *ngIf=\"!getPincode\">Enter\r\n Pincode\r\n </div>\r\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true\" [style.color]=\"accentColor\"\r\n *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" + getPincode}}</div>\r\n\r\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\r\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your PIN Code unlocks\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Fastest delivery date, Try-at-Home availability,\r\n Nearest store and In-store design!\r\n </div>\r\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-1\"\r\n [class.error-border]=\"pinError\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\r\n class=\"w-75 p-0\">\r\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\r\n </div>\r\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\r\n Please enter a valid pincode\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/346102c1753601987804WhatsApp Image 2025-07-27 at 13.08.05_ca96ea32.jpg\" alt=\"\" class=\"w-100\">\r\n <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\r\n </div>\r\n <!-- (mouseleave)=\"showLogin = false\" -->\r\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\r\n <div class=\"text text-center mb-2 f-18 fw-bold\">\r\n Your Account\r\n </div>\r\n <div class=\"sub-text text-center f-14\">\r\n Access account & manage your orders.\r\n </div>\r\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-2\">\r\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\r\n [style.color]=\"style?.background?.color\">Sign Up</div>\r\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\" [style.borderColor]=\"accentColor\"\r\n [style.color]=\"accentColor\">Log In</div>\r\n </div>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [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 [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\"\r\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n {{ele?.categoryName | titlecase}}\r\n </div>\r\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n [style.color]=\"data?.styles?.background?.accentColor\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n Collections\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showList = false\" -->\r\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n <div class=\"list-header mb-3\">By Price</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n <div class=\"each-price cursor-pointer\"\r\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n {{price | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 overflow-scroll\"\r\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n <div class=\"list-header mb-3\">By Style</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n |\r\n titlecase}}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls; let i = index\">\r\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showCollections = false\" -->\r\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n <div class=\"collection row col-3 align-items-center\"\r\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n <div class=\"col-imag col-4\">\r\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"col-8 text-overflow\">\r\n {{collection?.collectionName | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls); let i = index\">\r\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:45px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:after{content:\"\";position:absolute;bottom:0;left:50%;width:0;height:3px;background:var(--border-color);transition:all .3s ease;transform:translate(-50%)}.category:hover:after{width:100%}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:18px;font-weight:600}.list-item{gap:1rem;font-size:16px}.image-container img{border-radius:12px}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content}.text-overflow{overflow:hidden;text-overflow:ellipsis}.col-5{width:44.666667%}.h-10{height:10vh}.br-12{border-radius:12px}.pincode-container{position:absolute;background:#fff;height:max-content;width:20vw;right:3%;top:155%;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;height:max-content;width:20vw;right:-15px;top:155%;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}\n"] }]
14128
13902
  }], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: RestService }], propDecorators: { data: [{
14129
13903
  type: Input
14130
13904
  }], nextComponent: [{
@@ -15971,7 +15745,7 @@ class ProductDescComponent extends BaseSection {
15971
15745
  return '0';
15972
15746
  }
15973
15747
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i4.MessageService }, { token: i1$2.Meta }, { token: i1$2.Title }, { token: i8$3.MatBottomSheet }, { token: i0.Renderer2 }, { token: i1$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
15974
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }, { propertyName: "d2", first: true, predicate: ["d2"], 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\">\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 p-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n (click)=\"routeToHome()\">Home</a> /\r\n <span>{{ responseData?.name | titlecase }}</span>\r\n </div>\r\n <div class=\"row h-100 w-100\" style=\"margin-top: 25px;\" class=\"above-height\"\r\n [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile , 'min-height': 'calc(100vh - 25px)'}\">\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-4 col-12 h-100 product-detail\">\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\r\n <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n </ng-container>\r\n\r\n <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n [innerHTML]=\"responseData.brief\"></div> -->\r\n <div class=\"product-sku\">\r\n <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\r\n <div\r\n *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n Category : <a href=\"javascript:void(0)\" (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 <ng-container>\r\n <!-- <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container> -->\r\n </ng-container>\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\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\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 </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 [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn\"\r\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? opendailogbox(dialogBox) : ''\">\r\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</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 [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n 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\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"addProductReview()\"\r\n [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n 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\"\r\n [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 <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\">Out of\r\n Stock</button>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n </div>\r\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\r\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\r\n [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? opendailogbox(dialogBox) : ''\">\r\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\r\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"favourite border-solid\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\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 class=\"share-product\">\r\n <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">share</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"mb-15\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" 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 | titlecase}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\r\n <ng-container>\r\n <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\r\n [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"variant-head\" [style.color]=\"data?.styles?.background?.accentColor\">{{item.key | titlecase}}</div>\r\n <div class=\"variant-value text-start fw-600\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n {{item.value |\r\n titlecase}}</div>\r\n </div>\r\n <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\r\n <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n <div class=\"d-flex flex-column\" style=\"margin-top: 15px;\"\r\n *ngIf=\"responseData?.averageRating && responseData?.totalReviewCount\">\r\n <div class=\"rating d-flex justify-content-center gap-2 mb-3\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"rating-no my-1\">{{(responseData?.averageRating | number:'1.1-2')}}\u2B50</div>\r\n <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' :\r\n getRatings(responseData?.totalReviewCount) + \" \" + \"ratings\"}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n [innerHTML]='currency'></span>\r\n {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"price\" [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\">\r\n <span [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}\r\n </div>\r\n </div>\r\n <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\r\n </div>\r\n <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n <div class=\"discount\">\r\n <p>Flat 30% off on Diamond Prices</p>\r\n <p class=\"offer\">Offer Expires in 4 days</p>\r\n </div>\r\n <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n <div class=\"row prod-desc\">\r\n <div>\r\n <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\r\n <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\r\n *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRightPriceBreakup\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\r\n <mat-icon>add</mat-icon> PRICE BREAKUP\r\n </div>\r\n </div>\r\n <div class=\"description\">\r\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\" [style.background]=\"data?.styles?.background?.color\"></div>\r\n </div>\r\n <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\r\n <div class=\"jewellery-table-container\">\r\n <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n <div class=\"jewel-container mt-2\">\r\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\"\r\n >\r\n {{ele.materialType | titlecase}}\r\n </div>\r\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\r\n <div class=\"col-6 metal-purity\">\r\n <div class=\"row-header\">\r\n Net Weight/Gram\r\n </div>\r\n <div class=\"row-content\">\r\n {{ele.primaryMaterialWeight + \" \" + 'grams'}}\r\n </div>\r\n </div>\r\n <div class=\"col-6 metal-purity\">\r\n <div class=\"row-header\">\r\n Purity\r\n </div>\r\n <div class=\"row-content\">\r\n {{ele.materialPurity}}\r\n </div>\r\n </div>\r\n <!-- <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Price/Gram\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n number:'1.2-2'}}\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Value\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{ele.materialPrice | number:'1.2-2'}}\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"jewel-container mt-2\">\r\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\r\n Making Charges\r\n </div>\r\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Net Weight\r\n </div>\r\n <div class=\"row-content\">\r\n {{responseData?.baseWeight}} </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Making Charge %\r\n </div>\r\n <div class=\"row-content\">\r\n {{responseData?.makingChargePercentage}}\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Value\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"tab-group\">\r\n <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n <ng-container *ngIf=\"!varientLoading && data?.styles?.gridStyle == 'Style1'\">\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)\" [simpoCorner]=\"styles?.corners\"\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 <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\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 [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n </div>\r\n <div class=\"img-list w-100\" *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 zoom\" (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 </ng-container>\r\n\r\n <ng-container *ngIf=\"!varientLoading && data?.styles?.gridStyle == 'Style2'\">\r\n <div class=\"row h-100 mt-0 w-100\">\r\n <ng-container *ngIf=\"itemImages?.length == 0\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\r\n [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\r\n </ng-container>\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 col-6 h-75 p-1\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\r\n [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\r\n [class.h-100]=\"itemImages?.length == 1\">\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n\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<ng-template #branding>\r\n <div class=\"row w-100\">\r\n <ng-container *ngFor=\"let brand of brandPromises\">\r\n <div class=\"col-4 d-flex flex-column align-items-center g-2\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 br-50\">\r\n <div class=\"brand-text w-100 text-center py-2\">\r\n {{brand?.title | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #videoCallSchedule>\r\n <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\r\n <ng-container>\r\n <div class=\"row w-100 video-container\">\r\n <div class=\"col-4 video-call-img\">\r\n <img\r\n src=\"https://media.tenor.com/jaF_SFcaZk4AAAAM/women.gif\"\r\n alt=\"\" class=\"w-100 h-100 \">\r\n </div>\r\n <div class=\"col-8 align-content-center\">\r\n <div class=\"video-head-text\">\r\n Live Video Call\r\n </div>\r\n <div class=\"sub-text\">\r\n Join a live video call with our consultants to see your favourite designs up close!\r\n </div>\r\n <button class=\"sch-btn text-center cursor-pointer\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? opendailogbox(dialogBox) : ''\">\r\n Schedule a Video Call\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #DeliverySection>\r\n <div class=\"delivery-container\">\r\n <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\r\n\r\n <!-- Location Section -->\r\n <div class=\"location-section\">\r\n <div class=\"location-container d-flex align-items-center justify-content-between\" [style.borderColor]=\"styles?.background?.accentColor\">\r\n <div class=\"d-flex align-items-center w-90\">\r\n <div class=\"d-flex mx-1\"><mat-icon class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" class=\"postal-code-input\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\">\r\n </div>\r\n <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Locate me</button>\r\n </div>\r\n <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n </div>\r\n <ng-container>\r\n <!-- Free Delivery Section -->\r\n <div class=\"delivery-section\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"delivery-icon\">\uD83C\uDF81</span>\r\n\r\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\r\n Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\r\n\r\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n Order will\r\n Deliver by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }} with a Delivery Charge of\r\n \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Nearest Store Section -->\r\n <ng-container\r\n *ngIf=\"storeDetails?.nearbyStore?.name && storeDetails?.nearbyStore?.name?.length > 0;else emptyStore\">\r\n <div class=\"store-section\">\r\n <div class=\"d-flex align-items-center store-item\">\r\n <span class=\"store-icon\">\uD83C\uDFEA</span>\r\n <div class=\"store-details\">\r\n <div class=\"store-text\">\r\n <span class=\"store-label\">Nearest Store - </span>\r\n <span class=\"store-name\">{{ storeDetails?.nearbyStore?.name | titlecase}}</span>\r\n <!-- <span class=\"store-distance\"> (4km)</span> -->\r\n </div>\r\n <!-- <div class=\"availability-section\">\r\n <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\r\n </div> -->\r\n <!-- <div class=\"other-stores-text\">\r\n Also Available in <span class=\"other-stores-link\">18 other stores</span>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-center w-100\">\r\n <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.storeId)\">FIND IN\r\n STORE</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #emptyStore>\r\n <div class=\"delivery-section\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"delivery-icon\">\uD83C\uDFEA</span>\r\n <span class=\"delivery-text\">No Stores are available</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <!-- Try At Home Section -->\r\n <div class=\"try-home-section\">\r\n <div class=\"d-flex align-items-start try-home-item\">\r\n <span class=\"home-icon\">\uD83C\uDFE0</span>\r\n <div class=\"try-home-details\">\r\n <div class=\"try-home-header\">\r\n <span class=\"try-home-text\">Try At Home</span>\r\n <span class=\"free-text\"> (It's Free)</span>\r\n </div>\r\n <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\r\n <!-- <div class=\"appointment-text\">\r\n Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex-align-items-center justify-content-center w-100\">\r\n <button class=\"book-appointment-btn\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">BOOK HOME APPOINTMENT</button>\r\n <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\r\n aria-labelledby=\"offcanvasRightLabel\">\r\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon data-bs-dismiss=\"offcanvas\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"varient-price px-3 pb-2\">\r\n <div class=\"price-text\">Price</div>\r\n <div class=\"d-flex g-3 align-items-center\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n [innerHTML]='currency'></span>\r\n {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"price\"\r\n *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\r\n [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"varient-container h-100 p-3\">\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"mb-15\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" 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 | titlecase}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\r\n Customization</div>\r\n</div>\r\n\r\n<ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n\r\n <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"closeDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"modal-body h-100 p-0\">\r\n <div class=\"row h-100 w-100 mt-3 video-call-container\">\r\n <div class=\"col-6\" *ngIf=\"!isMobile\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/897651c1751980487170Vdo Call.gif\" alt=\"\"\r\n class=\"w-100\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\"\r\n [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\r\n [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <mat-icon>video_call</mat-icon>&nbsp;\r\n SCHEDULE A VIDEO CALL\r\n </ng-container>\r\n <ng-container *ngIf=\"scheduled\">\r\n <mat-icon>check_circle</mat-icon>&nbsp;\r\n SCHEDULED SUCCESSFULLY\r\n </ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\r\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon data-bs-dismiss=\"offcanvas\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"varient-price p-10-20\">\r\n <div class=\"price-break-header\">{{responseData?.name}}</div>\r\n </div>\r\n <div class=\"price-breakup h-100 w-100\">\r\n <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n <div class=\"price-container mb-3 p-10-20\">\r\n <div class=\"price-container-header\">\r\n {{ ele.materialType + \" BREAKUP\" }}\r\n </div>\r\n <div class=\"row w-100 header-row\">\r\n <div class=\"col-3 text-center\">COMPONENT</div>\r\n <div class=\"col-3 text-center\">RATE</div>\r\n <div class=\"col-3 text-center\">WEIGHT</div>\r\n <div class=\"col-3 text-center\">FINAL VALUE</div>\r\n </div>\r\n <div class=\"row w-100 value-row\">\r\n <div class=\"col-3 text-center\">{{ ele.materialPurity | titlecase }}</div>\r\n <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) |\r\n number:'1.2-2' }}</div>\r\n <div class=\"col-3 text-center\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\r\n <div class=\"col-3 text-center total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Making Charges</div>\r\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Tax Amount</div>\r\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Total Amount</div>\r\n <div class=\"col-6 text-end total\">\r\n \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\r\n number:'1.2-2'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n<ng-template #ReviewsSection>\r\n <div class=\"w-100 row\" *ngIf=\"reviewsData && reviewsData.length > 0\">\r\n <div class=\"col-md-3 col-sm-12\">\r\n <div class=\"cust-header\">Customer Reviews</div>\r\n <div class=\"d-flex gap-3 mb-1\">\r\n <ng-container *ngIf=\"responseData?.averageRating\">\r\n <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </ng-container>\r\n <span class=\"rating-text\">{{responseData?.averageRating | number:'1.1-2'}} out of 5</span>\r\n </div>\r\n <div class=\"d-flex mb-3\">{{responseData?.totalReviewCount + \" ratings\"}}</div>\r\n <div class=\"ratings-percentage\">\r\n <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n <div class=\"percentage d-flex align-items-center gap-2 mb-2\">\r\n <span>{{rating + \" star\"}}</span>\r\n <div class=\"w-50 bar\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div [style.width.%]=\"getPercentage(rating)\"\r\n [style.backgroundColor]=\"data?.styles?.background?.accentColor\" class=\"h-100\"></div>\r\n </div>\r\n <span class=\"percentage-text\">{{getPercentage(rating) + \"%\"}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9 col-sm-12\">\r\n <div class=\"review-header\">Latest Reviews</div>\r\n <div class=\"review-body d-flex flex-column gap-3\">\r\n <ng-container *ngFor=\"let review of reviewsData\">\r\n <div class=\"review-container w-75\">\r\n <div class=\"review-name gap-2 my-2 d-flex align-items-center\">\r\n <img src=\"https://m.media-amazon.com/images/S/amazon-avatars-global/default.png\" alt=\"\"\r\n class=\"width-30 h-25 mr-2\">\r\n <span>{{review?.userName ?? \"-\"}}</span>\r\n </div>\r\n <ng-container *ngIf=\"review?.rating\">\r\n <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </ng-container>\r\n <div class=\"review-desc\">\r\n {{review?.review ?? \"-\"}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"w-75 see-more py-3\" (click)=\"loadMoreReviews()\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">\r\n See more reviews <span>></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n</ng-template>\r\n", styles: [".product-desc{display:flex}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.strike-through{text-decoration:line-through;color:#d3d3d3}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon{border:1px solid;border-radius:8px;padding:5px;height:43px;width:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:1% 3%;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;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:100%;height:500px;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-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.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}.fc{font-size:17px;font-weight:700}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;margin-top:.5rem}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;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:5px;height:44px!important;justify-content:space-between;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:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.product-detail{margin-top:0;height:100vh}.above-height{height:90vh}.height{height:100vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:75%}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:16px;font-weight:600;margin-top:15px;font-size:1rem}.prod-img-block{height:100%;display:flex;flex-direction:column-reverse;justify-content:start;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}.product-desc,.brief-desc{font-size:16px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail{margin-top:20px;overflow-x:hidden}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important;width:73%!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.favourite:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:4%;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}.favourite .mat-icon{min-height:40px;min-width:40px;font-size:25px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer}.favourite:hover,.share-product:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.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% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}@media (min-width: 1400px){.container{max-width:unset;width:95%}}.width-max{width:max-content}.width-34{width:33.3%!important}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px}.varient-value{font-size:16px}.custom-text{border-radius:0 8px 8px 0}.br-50{border-radius:50%}.w-15{width:22%!important}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-dialog{position:absolute!important;top:15%!important;left:30%!important;width:53%!important;height:75vh!important;max-width:unset!important;background:#fff;border-radius:18px!important}.schedule-header{border-radius:18px 18px 0 0}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:15px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:500;font-size:12px!important;padding:0!important;box-shadow:none!important;width:20%!important}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;border:none;padding:8px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease}.book-appointment-btn:hover{background:linear-gradient(135deg,#7c3aed,#9333ea);transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}@media (max-width: 480px){.delivery-container{padding:12px}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.border-unset{border:unset!important}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.me-2{margin-right:.5rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.width-30{width:30px!important}.review-header{font-size:20px;font-weight:600}.review-desc{font-weight:500}.see-more{font-weight:600;cursor:pointer;border-top:1px solid #d1d1d1}.see-more span{font-size:12px}.cust-header{font-size:24px}.bar{border:1px solid;height:20px;border-radius:5px;overflow:hidden}.bar div{border-radius:2px}.parent-container{height:100%;width:100%;display:flex}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i3.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: i7$1.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", "backgroundInfo"] }, { 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: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "edit", "customClass", "delete", "nextComponentColor"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i4$1.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: i14.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
15748
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "reviewComponent", first: true, predicate: CustomerReviewComponent, descendants: true }, { propertyName: "d2", first: true, predicate: ["d2"], 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\">\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 p-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n (click)=\"routeToHome()\">Home</a> /\r\n <span>{{ responseData?.name | titlecase }}</span>\r\n </div>\r\n <div class=\"row h-100 w-100\" style=\"margin-top: 25px;\" class=\"above-height\"\r\n [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile , 'min-height': 'calc(100vh - 25px)'}\">\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-4 col-12 h-100 product-detail\">\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\r\n <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n </ng-container>\r\n\r\n <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n [innerHTML]=\"responseData.brief\"></div> -->\r\n <div class=\"product-sku\">\r\n <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\r\n <div\r\n *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n Category : <a href=\"javascript:void(0)\" (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 <ng-container>\r\n <!-- <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container> -->\r\n </ng-container>\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\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\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 </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 [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn\"\r\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? opendailogbox(dialogBox) : ''\">\r\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</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 [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n 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\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"addProductReview()\"\r\n [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n 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\"\r\n [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 <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\">Out of\r\n Stock</button>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n </div>\r\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\r\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\r\n [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? opendailogbox(dialogBox) : ''\">\r\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\r\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"favourite border-solid\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\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 class=\"share-product\">\r\n <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">share</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"mb-15\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" 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 | titlecase}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\r\n <ng-container>\r\n <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\r\n [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"variant-head\" [style.color]=\"data?.styles?.background?.accentColor\">{{item.key | titlecase}}</div>\r\n <div class=\"variant-value text-start fw-600\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n {{item.value |\r\n titlecase}}</div>\r\n </div>\r\n <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\r\n <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n <div class=\"d-flex flex-column\" style=\"margin-top: 15px;\"\r\n *ngIf=\"responseData?.averageRating && responseData?.totalReviewCount\">\r\n <div class=\"rating d-flex justify-content-center gap-2 mb-3\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"rating-no my-1\">{{(responseData?.averageRating | number:'1.1-2')}}\u2B50</div>\r\n <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' :\r\n getRatings(responseData?.totalReviewCount) + \" \" + \"ratings\"}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n [innerHTML]='currency'></span>\r\n {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"price\" [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\">\r\n <span [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}\r\n </div>\r\n </div>\r\n <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\r\n </div>\r\n <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n <div class=\"discount\">\r\n <p>Flat 30% off on Diamond Prices</p>\r\n <p class=\"offer\">Offer Expires in 4 days</p>\r\n </div>\r\n <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n <div class=\"row prod-desc\">\r\n <div>\r\n <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\r\n <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\r\n *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRightPriceBreakup\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\r\n <mat-icon>add</mat-icon> PRICE BREAKUP\r\n </div>\r\n </div>\r\n <div class=\"description\">\r\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\" [style.background]=\"data?.styles?.background?.color\"></div>\r\n </div>\r\n <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\r\n <div class=\"jewellery-table-container\">\r\n <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n <div class=\"jewel-container mt-2\">\r\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\"\r\n >\r\n {{ele.materialType | titlecase}}\r\n </div>\r\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\r\n <div class=\"col-6 metal-purity\">\r\n <div class=\"row-header\">\r\n Net Weight/Gram\r\n </div>\r\n <div class=\"row-content\">\r\n {{ele.primaryMaterialWeight + \" \" + 'grams'}}\r\n </div>\r\n </div>\r\n <div class=\"col-6 metal-purity\">\r\n <div class=\"row-header\">\r\n Purity\r\n </div>\r\n <div class=\"row-content\">\r\n {{ele.materialPurity}}\r\n </div>\r\n </div>\r\n <!-- <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Price/Gram\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n number:'1.2-2'}}\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Value\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{ele.materialPrice | number:'1.2-2'}}\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"jewel-container mt-2\">\r\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\r\n Making Charges\r\n </div>\r\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Net Weight\r\n </div>\r\n <div class=\"row-content\">\r\n {{responseData?.baseWeight}} </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Making Charge %\r\n </div>\r\n <div class=\"row-content\">\r\n {{responseData?.makingChargePercentage}}\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Value\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"tab-group\">\r\n <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n <ng-container *ngIf=\"!varientLoading && data?.styles?.gridStyle == 'Style1'\">\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)\" [simpoCorner]=\"styles?.corners\"\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 <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\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 [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n </div>\r\n <div class=\"img-list w-100\" *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 zoom\" (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 </ng-container>\r\n\r\n <ng-container *ngIf=\"!varientLoading && data?.styles?.gridStyle == 'Style2'\">\r\n <div class=\"row h-100 mt-0 w-100\">\r\n <ng-container *ngIf=\"itemImages?.length == 0\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\r\n [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\r\n </ng-container>\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 col-6 h-75 p-1\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\r\n [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\r\n [class.h-100]=\"itemImages?.length == 1\">\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n\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<ng-template #branding>\r\n <div class=\"row w-100\">\r\n <ng-container *ngFor=\"let brand of brandPromises\">\r\n <div class=\"col-4 d-flex flex-column align-items-center g-2\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 br-50\">\r\n <div class=\"brand-text w-100 text-center py-2\">\r\n {{brand?.title | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #videoCallSchedule>\r\n <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\r\n <ng-container>\r\n <div class=\"row w-100 video-container\">\r\n <div class=\"col-4 video-call-img\">\r\n <img\r\n src=\"https://media.tenor.com/jaF_SFcaZk4AAAAM/women.gif\"\r\n alt=\"\" class=\"w-100 h-100 \">\r\n </div>\r\n <div class=\"col-8 align-content-center\">\r\n <div class=\"video-head-text\">\r\n Live Video Call\r\n </div>\r\n <div class=\"sub-text\">\r\n Join a live video call with our consultants to see your favourite designs up close!\r\n </div>\r\n <button class=\"sch-btn text-center cursor-pointer\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? opendailogbox(dialogBox) : ''\">\r\n Schedule a Video Call\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #DeliverySection>\r\n <div class=\"delivery-container\">\r\n <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\r\n\r\n <!-- Location Section -->\r\n <div class=\"location-section\">\r\n <div class=\"location-container d-flex align-items-center justify-content-between\" [style.borderColor]=\"styles?.background?.accentColor\">\r\n <div class=\"d-flex align-items-center w-90\">\r\n <div class=\"d-flex mx-1\"><mat-icon class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" class=\"postal-code-input\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\">\r\n </div>\r\n <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Locate me</button>\r\n </div>\r\n <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n </div>\r\n <ng-container>\r\n <!-- Free Delivery Section -->\r\n <div class=\"delivery-section\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"delivery-icon\">\uD83C\uDF81</span>\r\n\r\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\r\n Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\r\n\r\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n Order will\r\n Deliver by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }} with a Delivery Charge of\r\n \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Nearest Store Section -->\r\n <ng-container\r\n *ngIf=\"storeDetails?.nearbyStore?.name && storeDetails?.nearbyStore?.name?.length > 0;else emptyStore\">\r\n <div class=\"store-section\">\r\n <div class=\"d-flex align-items-center store-item\">\r\n <span class=\"store-icon\">\uD83C\uDFEA</span>\r\n <div class=\"store-details\">\r\n <div class=\"store-text\">\r\n <span class=\"store-label\">Nearest Store - </span>\r\n <span class=\"store-name\">{{ storeDetails?.nearbyStore?.name | titlecase}}</span>\r\n <!-- <span class=\"store-distance\"> (4km)</span> -->\r\n </div>\r\n <!-- <div class=\"availability-section\">\r\n <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\r\n </div> -->\r\n <!-- <div class=\"other-stores-text\">\r\n Also Available in <span class=\"other-stores-link\">18 other stores</span>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-center w-100\">\r\n <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.storeId)\">FIND IN\r\n STORE</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #emptyStore>\r\n <div class=\"delivery-section\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"delivery-icon\">\uD83C\uDFEA</span>\r\n <span class=\"delivery-text\">No Stores are available</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <!-- Try At Home Section -->\r\n <div class=\"try-home-section\">\r\n <div class=\"d-flex align-items-start try-home-item\">\r\n <span class=\"home-icon\">\uD83C\uDFE0</span>\r\n <div class=\"try-home-details\">\r\n <div class=\"try-home-header\">\r\n <span class=\"try-home-text\">Try At Home</span>\r\n <span class=\"free-text\"> (It's Free)</span>\r\n </div>\r\n <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\r\n <!-- <div class=\"appointment-text\">\r\n Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex-align-items-center justify-content-center w-100\">\r\n <button class=\"book-appointment-btn\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">BOOK HOME APPOINTMENT</button>\r\n <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\r\n aria-labelledby=\"offcanvasRightLabel\">\r\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon data-bs-dismiss=\"offcanvas\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"varient-price px-3 pb-2\">\r\n <div class=\"price-text\">Price</div>\r\n <div class=\"d-flex g-3 align-items-center\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n [innerHTML]='currency'></span>\r\n {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"price\"\r\n *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\r\n [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"varient-container h-100 p-3\">\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"mb-15\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" 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 | titlecase}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\r\n Customization</div>\r\n</div>\r\n\r\n<ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n\r\n <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"closeDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"modal-body h-100 p-0\">\r\n <div class=\"row h-100 w-100 mt-3 video-call-container\">\r\n <div class=\"col-6\" *ngIf=\"!isMobile\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/897651c1751980487170Vdo Call.gif\" alt=\"\"\r\n class=\"w-100\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\"\r\n [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\r\n [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <mat-icon>video_call</mat-icon>&nbsp;\r\n SCHEDULE A VIDEO CALL\r\n </ng-container>\r\n <ng-container *ngIf=\"scheduled\">\r\n <mat-icon>check_circle</mat-icon>&nbsp;\r\n SCHEDULED SUCCESSFULLY\r\n </ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\r\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon data-bs-dismiss=\"offcanvas\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"varient-price p-10-20\">\r\n <div class=\"price-break-header\">{{responseData?.name}}</div>\r\n </div>\r\n <div class=\"price-breakup h-100 w-100\">\r\n <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n <div class=\"price-container mb-3 p-10-20\">\r\n <div class=\"price-container-header\">\r\n {{ ele.materialType + \" BREAKUP\" }}\r\n </div>\r\n <div class=\"row w-100 header-row\">\r\n <div class=\"col-3 text-center\">COMPONENT</div>\r\n <div class=\"col-3 text-center\">RATE</div>\r\n <div class=\"col-3 text-center\">WEIGHT</div>\r\n <div class=\"col-3 text-center\">FINAL VALUE</div>\r\n </div>\r\n <div class=\"row w-100 value-row\">\r\n <div class=\"col-3 text-center\">{{ ele.materialPurity | titlecase }}</div>\r\n <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) |\r\n number:'1.2-2' }}</div>\r\n <div class=\"col-3 text-center\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\r\n <div class=\"col-3 text-center total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Making Charges</div>\r\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Tax Amount</div>\r\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Total Amount</div>\r\n <div class=\"col-6 text-end total\">\r\n \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\r\n number:'1.2-2'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n<ng-template #ReviewsSection>\r\n <div class=\"w-100 row\" *ngIf=\"reviewsData && reviewsData.length > 0\">\r\n <div class=\"col-md-3 col-sm-12\">\r\n <div class=\"cust-header\">Customer Reviews</div>\r\n <div class=\"d-flex gap-3 mb-1\">\r\n <ng-container *ngIf=\"responseData?.averageRating\">\r\n <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </ng-container>\r\n <span class=\"rating-text\">{{responseData?.averageRating | number:'1.1-2'}} out of 5</span>\r\n </div>\r\n <div class=\"d-flex mb-3\">{{responseData?.totalReviewCount + \" ratings\"}}</div>\r\n <div class=\"ratings-percentage\">\r\n <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n <div class=\"percentage d-flex align-items-center gap-2 mb-2\">\r\n <span>{{rating + \" star\"}}</span>\r\n <div class=\"w-50 bar\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div [style.width.%]=\"getPercentage(rating)\"\r\n [style.backgroundColor]=\"data?.styles?.background?.accentColor\" class=\"h-100\"></div>\r\n </div>\r\n <span class=\"percentage-text\">{{getPercentage(rating) + \"%\"}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9 col-sm-12\">\r\n <div class=\"review-header\">Latest Reviews</div>\r\n <div class=\"review-body d-flex flex-column gap-3\">\r\n <ng-container *ngFor=\"let review of reviewsData\">\r\n <div class=\"review-container w-75\">\r\n <div class=\"review-name gap-2 my-2 d-flex align-items-center\">\r\n <img src=\"https://m.media-amazon.com/images/S/amazon-avatars-global/default.png\" alt=\"\"\r\n class=\"width-30 h-25 mr-2\">\r\n <span>{{review?.userName ?? \"-\"}}</span>\r\n </div>\r\n <ng-container *ngIf=\"review?.rating\">\r\n <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </ng-container>\r\n <div class=\"review-desc\">\r\n {{review?.review ?? \"-\"}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"w-75 see-more py-3\" (click)=\"loadMoreReviews()\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">\r\n See more reviews <span>></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n</ng-template>\r\n", styles: [".product-desc{display:flex}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.strike-through{text-decoration:line-through;color:#d3d3d3}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon{border:1px solid;border-radius:8px;padding:5px;height:43px;width:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:1% 3%;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;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:100%;height:500px;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-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.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}.fc{font-size:17px;font-weight:700}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;margin-top:.5rem}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;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:5px;height:44px!important;justify-content:space-between;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:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.product-detail{margin-top:0;height:100vh}.above-height{height:90vh}.height{height:100vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:75%}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:16px;font-weight:600;margin-top:15px;font-size:1rem}.prod-img-block{height:100%;display:flex;flex-direction:column-reverse;justify-content:start;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}.product-desc,.brief-desc{font-size:16px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail{margin-top:20px;overflow-x:hidden}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important;width:73%!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.favourite:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:4%;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}.favourite .mat-icon{min-height:40px;min-width:40px;font-size:25px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer}.favourite:hover,.share-product:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:100vh;position:relative;display:block!important;overflow:scroll;margin-bottom:1rem}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.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% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}@media (min-width: 1400px){.container{max-width:unset;width:95%}}.width-max{width:max-content}.width-34{width:33.3%!important}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px}.varient-value{font-size:16px}.custom-text{border-radius:0 8px 8px 0}.br-50{border-radius:50%}.w-15{width:22%!important}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-dialog{position:absolute!important;top:15%!important;left:30%!important;width:53%!important;height:75vh!important;max-width:unset!important;background:#fff;border-radius:18px!important}.schedule-header{border-radius:18px 18px 0 0}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:15px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:500;font-size:12px!important;padding:0!important;box-shadow:none!important;width:20%!important}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;border:none;padding:8px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease}.book-appointment-btn:hover{background:linear-gradient(135deg,#7c3aed,#9333ea);transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}@media (max-width: 480px){.delivery-container{padding:12px}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.border-unset{border:unset!important}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.me-2{margin-right:.5rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.width-30{width:30px!important}.review-header{font-size:20px;font-weight:600}.review-desc{font-weight:500}.see-more{font-weight:600;cursor:pointer;border-top:1px solid #d1d1d1}.see-more span{font-size:12px}.cust-header{font-size:24px}.bar{border:1px solid;height:20px;border-radius:5px;overflow:hidden}.bar div{border-radius:2px}.parent-container{height:100%;width:100%;display:flex}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i3.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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: i7$1.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", "backgroundInfo"] }, { 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: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "edit", "customClass", "delete", "nextComponentColor"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId", "iconColor"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i4$1.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: i14.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
15975
15749
  }
15976
15750
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductDescComponent, decorators: [{
15977
15751
  type: Component,
@@ -16000,7 +15774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
16000
15774
  SvgDividerComponent,
16001
15775
  CornerDirective,
16002
15776
  ButtonEditorDirective,
16003
- ], 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\">\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 p-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n (click)=\"routeToHome()\">Home</a> /\r\n <span>{{ responseData?.name | titlecase }}</span>\r\n </div>\r\n <div class=\"row h-100 w-100\" style=\"margin-top: 25px;\" class=\"above-height\"\r\n [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile , 'min-height': 'calc(100vh - 25px)'}\">\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-4 col-12 h-100 product-detail\">\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\r\n <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n </ng-container>\r\n\r\n <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n [innerHTML]=\"responseData.brief\"></div> -->\r\n <div class=\"product-sku\">\r\n <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\r\n <div\r\n *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n Category : <a href=\"javascript:void(0)\" (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 <ng-container>\r\n <!-- <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container> -->\r\n </ng-container>\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\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\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 </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 [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn\"\r\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? opendailogbox(dialogBox) : ''\">\r\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</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 [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n 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\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"addProductReview()\"\r\n [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n 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\"\r\n [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 <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\">Out of\r\n Stock</button>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n </div>\r\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\r\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\r\n [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? opendailogbox(dialogBox) : ''\">\r\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\r\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"favourite border-solid\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\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 class=\"share-product\">\r\n <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">share</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"mb-15\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" 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 | titlecase}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\r\n <ng-container>\r\n <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\r\n [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"variant-head\" [style.color]=\"data?.styles?.background?.accentColor\">{{item.key | titlecase}}</div>\r\n <div class=\"variant-value text-start fw-600\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n {{item.value |\r\n titlecase}}</div>\r\n </div>\r\n <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\r\n <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n <div class=\"d-flex flex-column\" style=\"margin-top: 15px;\"\r\n *ngIf=\"responseData?.averageRating && responseData?.totalReviewCount\">\r\n <div class=\"rating d-flex justify-content-center gap-2 mb-3\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"rating-no my-1\">{{(responseData?.averageRating | number:'1.1-2')}}\u2B50</div>\r\n <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' :\r\n getRatings(responseData?.totalReviewCount) + \" \" + \"ratings\"}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n [innerHTML]='currency'></span>\r\n {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"price\" [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\">\r\n <span [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}\r\n </div>\r\n </div>\r\n <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\r\n </div>\r\n <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n <div class=\"discount\">\r\n <p>Flat 30% off on Diamond Prices</p>\r\n <p class=\"offer\">Offer Expires in 4 days</p>\r\n </div>\r\n <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n <div class=\"row prod-desc\">\r\n <div>\r\n <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\r\n <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\r\n *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRightPriceBreakup\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\r\n <mat-icon>add</mat-icon> PRICE BREAKUP\r\n </div>\r\n </div>\r\n <div class=\"description\">\r\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\" [style.background]=\"data?.styles?.background?.color\"></div>\r\n </div>\r\n <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\r\n <div class=\"jewellery-table-container\">\r\n <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n <div class=\"jewel-container mt-2\">\r\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\"\r\n >\r\n {{ele.materialType | titlecase}}\r\n </div>\r\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\r\n <div class=\"col-6 metal-purity\">\r\n <div class=\"row-header\">\r\n Net Weight/Gram\r\n </div>\r\n <div class=\"row-content\">\r\n {{ele.primaryMaterialWeight + \" \" + 'grams'}}\r\n </div>\r\n </div>\r\n <div class=\"col-6 metal-purity\">\r\n <div class=\"row-header\">\r\n Purity\r\n </div>\r\n <div class=\"row-content\">\r\n {{ele.materialPurity}}\r\n </div>\r\n </div>\r\n <!-- <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Price/Gram\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n number:'1.2-2'}}\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Value\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{ele.materialPrice | number:'1.2-2'}}\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"jewel-container mt-2\">\r\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\r\n Making Charges\r\n </div>\r\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Net Weight\r\n </div>\r\n <div class=\"row-content\">\r\n {{responseData?.baseWeight}} </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Making Charge %\r\n </div>\r\n <div class=\"row-content\">\r\n {{responseData?.makingChargePercentage}}\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Value\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"tab-group\">\r\n <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n <ng-container *ngIf=\"!varientLoading && data?.styles?.gridStyle == 'Style1'\">\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)\" [simpoCorner]=\"styles?.corners\"\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 <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\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 [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n </div>\r\n <div class=\"img-list w-100\" *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 zoom\" (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 </ng-container>\r\n\r\n <ng-container *ngIf=\"!varientLoading && data?.styles?.gridStyle == 'Style2'\">\r\n <div class=\"row h-100 mt-0 w-100\">\r\n <ng-container *ngIf=\"itemImages?.length == 0\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\r\n [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\r\n </ng-container>\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 col-6 h-75 p-1\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\r\n [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\r\n [class.h-100]=\"itemImages?.length == 1\">\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n\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<ng-template #branding>\r\n <div class=\"row w-100\">\r\n <ng-container *ngFor=\"let brand of brandPromises\">\r\n <div class=\"col-4 d-flex flex-column align-items-center g-2\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 br-50\">\r\n <div class=\"brand-text w-100 text-center py-2\">\r\n {{brand?.title | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #videoCallSchedule>\r\n <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\r\n <ng-container>\r\n <div class=\"row w-100 video-container\">\r\n <div class=\"col-4 video-call-img\">\r\n <img\r\n src=\"https://media.tenor.com/jaF_SFcaZk4AAAAM/women.gif\"\r\n alt=\"\" class=\"w-100 h-100 \">\r\n </div>\r\n <div class=\"col-8 align-content-center\">\r\n <div class=\"video-head-text\">\r\n Live Video Call\r\n </div>\r\n <div class=\"sub-text\">\r\n Join a live video call with our consultants to see your favourite designs up close!\r\n </div>\r\n <button class=\"sch-btn text-center cursor-pointer\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? opendailogbox(dialogBox) : ''\">\r\n Schedule a Video Call\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #DeliverySection>\r\n <div class=\"delivery-container\">\r\n <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\r\n\r\n <!-- Location Section -->\r\n <div class=\"location-section\">\r\n <div class=\"location-container d-flex align-items-center justify-content-between\" [style.borderColor]=\"styles?.background?.accentColor\">\r\n <div class=\"d-flex align-items-center w-90\">\r\n <div class=\"d-flex mx-1\"><mat-icon class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" class=\"postal-code-input\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\">\r\n </div>\r\n <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Locate me</button>\r\n </div>\r\n <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n </div>\r\n <ng-container>\r\n <!-- Free Delivery Section -->\r\n <div class=\"delivery-section\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"delivery-icon\">\uD83C\uDF81</span>\r\n\r\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\r\n Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\r\n\r\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n Order will\r\n Deliver by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }} with a Delivery Charge of\r\n \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Nearest Store Section -->\r\n <ng-container\r\n *ngIf=\"storeDetails?.nearbyStore?.name && storeDetails?.nearbyStore?.name?.length > 0;else emptyStore\">\r\n <div class=\"store-section\">\r\n <div class=\"d-flex align-items-center store-item\">\r\n <span class=\"store-icon\">\uD83C\uDFEA</span>\r\n <div class=\"store-details\">\r\n <div class=\"store-text\">\r\n <span class=\"store-label\">Nearest Store - </span>\r\n <span class=\"store-name\">{{ storeDetails?.nearbyStore?.name | titlecase}}</span>\r\n <!-- <span class=\"store-distance\"> (4km)</span> -->\r\n </div>\r\n <!-- <div class=\"availability-section\">\r\n <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\r\n </div> -->\r\n <!-- <div class=\"other-stores-text\">\r\n Also Available in <span class=\"other-stores-link\">18 other stores</span>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-center w-100\">\r\n <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.storeId)\">FIND IN\r\n STORE</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #emptyStore>\r\n <div class=\"delivery-section\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"delivery-icon\">\uD83C\uDFEA</span>\r\n <span class=\"delivery-text\">No Stores are available</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <!-- Try At Home Section -->\r\n <div class=\"try-home-section\">\r\n <div class=\"d-flex align-items-start try-home-item\">\r\n <span class=\"home-icon\">\uD83C\uDFE0</span>\r\n <div class=\"try-home-details\">\r\n <div class=\"try-home-header\">\r\n <span class=\"try-home-text\">Try At Home</span>\r\n <span class=\"free-text\"> (It's Free)</span>\r\n </div>\r\n <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\r\n <!-- <div class=\"appointment-text\">\r\n Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex-align-items-center justify-content-center w-100\">\r\n <button class=\"book-appointment-btn\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">BOOK HOME APPOINTMENT</button>\r\n <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\r\n aria-labelledby=\"offcanvasRightLabel\">\r\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon data-bs-dismiss=\"offcanvas\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"varient-price px-3 pb-2\">\r\n <div class=\"price-text\">Price</div>\r\n <div class=\"d-flex g-3 align-items-center\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n [innerHTML]='currency'></span>\r\n {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"price\"\r\n *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\r\n [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"varient-container h-100 p-3\">\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"mb-15\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" 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 | titlecase}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\r\n Customization</div>\r\n</div>\r\n\r\n<ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n\r\n <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"closeDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"modal-body h-100 p-0\">\r\n <div class=\"row h-100 w-100 mt-3 video-call-container\">\r\n <div class=\"col-6\" *ngIf=\"!isMobile\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/897651c1751980487170Vdo Call.gif\" alt=\"\"\r\n class=\"w-100\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\"\r\n [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\r\n [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <mat-icon>video_call</mat-icon>&nbsp;\r\n SCHEDULE A VIDEO CALL\r\n </ng-container>\r\n <ng-container *ngIf=\"scheduled\">\r\n <mat-icon>check_circle</mat-icon>&nbsp;\r\n SCHEDULED SUCCESSFULLY\r\n </ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\r\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon data-bs-dismiss=\"offcanvas\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"varient-price p-10-20\">\r\n <div class=\"price-break-header\">{{responseData?.name}}</div>\r\n </div>\r\n <div class=\"price-breakup h-100 w-100\">\r\n <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n <div class=\"price-container mb-3 p-10-20\">\r\n <div class=\"price-container-header\">\r\n {{ ele.materialType + \" BREAKUP\" }}\r\n </div>\r\n <div class=\"row w-100 header-row\">\r\n <div class=\"col-3 text-center\">COMPONENT</div>\r\n <div class=\"col-3 text-center\">RATE</div>\r\n <div class=\"col-3 text-center\">WEIGHT</div>\r\n <div class=\"col-3 text-center\">FINAL VALUE</div>\r\n </div>\r\n <div class=\"row w-100 value-row\">\r\n <div class=\"col-3 text-center\">{{ ele.materialPurity | titlecase }}</div>\r\n <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) |\r\n number:'1.2-2' }}</div>\r\n <div class=\"col-3 text-center\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\r\n <div class=\"col-3 text-center total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Making Charges</div>\r\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Tax Amount</div>\r\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Total Amount</div>\r\n <div class=\"col-6 text-end total\">\r\n \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\r\n number:'1.2-2'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n<ng-template #ReviewsSection>\r\n <div class=\"w-100 row\" *ngIf=\"reviewsData && reviewsData.length > 0\">\r\n <div class=\"col-md-3 col-sm-12\">\r\n <div class=\"cust-header\">Customer Reviews</div>\r\n <div class=\"d-flex gap-3 mb-1\">\r\n <ng-container *ngIf=\"responseData?.averageRating\">\r\n <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </ng-container>\r\n <span class=\"rating-text\">{{responseData?.averageRating | number:'1.1-2'}} out of 5</span>\r\n </div>\r\n <div class=\"d-flex mb-3\">{{responseData?.totalReviewCount + \" ratings\"}}</div>\r\n <div class=\"ratings-percentage\">\r\n <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n <div class=\"percentage d-flex align-items-center gap-2 mb-2\">\r\n <span>{{rating + \" star\"}}</span>\r\n <div class=\"w-50 bar\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div [style.width.%]=\"getPercentage(rating)\"\r\n [style.backgroundColor]=\"data?.styles?.background?.accentColor\" class=\"h-100\"></div>\r\n </div>\r\n <span class=\"percentage-text\">{{getPercentage(rating) + \"%\"}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9 col-sm-12\">\r\n <div class=\"review-header\">Latest Reviews</div>\r\n <div class=\"review-body d-flex flex-column gap-3\">\r\n <ng-container *ngFor=\"let review of reviewsData\">\r\n <div class=\"review-container w-75\">\r\n <div class=\"review-name gap-2 my-2 d-flex align-items-center\">\r\n <img src=\"https://m.media-amazon.com/images/S/amazon-avatars-global/default.png\" alt=\"\"\r\n class=\"width-30 h-25 mr-2\">\r\n <span>{{review?.userName ?? \"-\"}}</span>\r\n </div>\r\n <ng-container *ngIf=\"review?.rating\">\r\n <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </ng-container>\r\n <div class=\"review-desc\">\r\n {{review?.review ?? \"-\"}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"w-75 see-more py-3\" (click)=\"loadMoreReviews()\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">\r\n See more reviews <span>></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n</ng-template>\r\n", styles: [".product-desc{display:flex}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.strike-through{text-decoration:line-through;color:#d3d3d3}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon{border:1px solid;border-radius:8px;padding:5px;height:43px;width:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:1% 3%;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;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:100%;height:500px;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-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.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}.fc{font-size:17px;font-weight:700}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;margin-top:.5rem}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;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:5px;height:44px!important;justify-content:space-between;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:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.product-detail{margin-top:0;height:100vh}.above-height{height:90vh}.height{height:100vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:75%}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:16px;font-weight:600;margin-top:15px;font-size:1rem}.prod-img-block{height:100%;display:flex;flex-direction:column-reverse;justify-content:start;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}.product-desc,.brief-desc{font-size:16px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail{margin-top:20px;overflow-x:hidden}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important;width:73%!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.favourite:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:4%;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}.favourite .mat-icon{min-height:40px;min-width:40px;font-size:25px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer}.favourite:hover,.share-product:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.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% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}@media (min-width: 1400px){.container{max-width:unset;width:95%}}.width-max{width:max-content}.width-34{width:33.3%!important}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px}.varient-value{font-size:16px}.custom-text{border-radius:0 8px 8px 0}.br-50{border-radius:50%}.w-15{width:22%!important}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-dialog{position:absolute!important;top:15%!important;left:30%!important;width:53%!important;height:75vh!important;max-width:unset!important;background:#fff;border-radius:18px!important}.schedule-header{border-radius:18px 18px 0 0}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:15px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:500;font-size:12px!important;padding:0!important;box-shadow:none!important;width:20%!important}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;border:none;padding:8px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease}.book-appointment-btn:hover{background:linear-gradient(135deg,#7c3aed,#9333ea);transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}@media (max-width: 480px){.delivery-container{padding:12px}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.border-unset{border:unset!important}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.me-2{margin-right:.5rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.width-30{width:30px!important}.review-header{font-size:20px;font-weight:600}.review-desc{font-weight:500}.see-more{font-weight:600;cursor:pointer;border-top:1px solid #d1d1d1}.see-more span{font-size:12px}.cust-header{font-size:24px}.bar{border:1px solid;height:20px;border-radius:5px;overflow:hidden}.bar div{border-radius:2px}.parent-container{height:100%;width:100%;display:flex}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}\n"] }]
15777
+ ], 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\">\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 p-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\">\r\n <div class=\"display-none\"><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\"\r\n (click)=\"routeToHome()\">Home</a> /\r\n <span>{{ responseData?.name | titlecase }}</span>\r\n </div>\r\n <div class=\"row h-100 w-100\" style=\"margin-top: 25px;\" class=\"above-height\"\r\n [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile , 'min-height': 'calc(100vh - 25px)'}\">\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-4 col-12 h-100 product-detail\">\r\n <ng-container *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"variants\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"DeliverySection\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ecomConfigs?.videoCallEnabled\">\r\n <ng-container *ngTemplateOutlet=\"videoCallSchedule\"></ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"ecomConfigs?.brandPromiseEnabled\">\r\n <ng-container *ngTemplateOutlet=\"branding\"></ng-container>\r\n </ng-container>\r\n\r\n\r\n\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"descriptors\"></ng-container>\r\n </ng-container>\r\n\r\n <!-- <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\"\r\n [innerHTML]=\"responseData.brief\"></div> -->\r\n <div class=\"product-sku\">\r\n <!-- <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div> -->\r\n <div\r\n *ngIf=\"responseData?.itemCategorisation?.itemCategories && (responseData?.itemCategorisation?.itemCategories?.length || 0) > 0\">\r\n Category : <a href=\"javascript:void(0)\" (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 <ng-container>\r\n <!-- <ng-container *ngTemplateOutlet=\"ReviewsSection\"></ng-container> -->\r\n </ng-container>\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\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\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 </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 [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn\"\r\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" (click)=\"!edit ? opendailogbox(dialogBox) : ''\">\r\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</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 [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add\r\n 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\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n <button simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n [backgroundInfo]=\"styles?.background\" [color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"addProductReview()\"\r\n [disabled]=\"productReview == 0 && reviewTitle?.length == 0 && reviewDescription?.length == 0\">Submit\r\n 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\"\r\n [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 <button class=\"out-of-stock text-center\" *ngIf=\"isItemOutOfStock\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\">Out of\r\n Stock</button>\r\n <div class=\"quantity\" *ngIf=\"responseData?.quantity && !ecomConfigs?.videoCallEnabled\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\" [style.color]=\"data?.styles?.background?.accentColor\">-</div>\r\n <div style=\"width: 50px;\" class=\"d-flex justify-content-center fc\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">{{responseData?.quantity}}</div>\r\n <div class=\"minus\" (click)=\"addToCart('ADD')\" [style.color]=\"data?.styles?.background?.accentColor\">+</div>\r\n </div>\r\n <button *ngIf=\"responseData?.quantity && ecomConfigs?.videoCallEnabled\" class=\"send-btn w-100\"\r\n [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\r\n [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? opendailogbox(dialogBox) : ''\">\r\n <mat-icon>videocam</mat-icon>LIVE VIDEO CALL</button>\r\n <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\" class=\"w-75\">\r\n <button class=\"send-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\"\r\n (click)=\"!edit ? addToCart() : ''\"><mat-icon>shopping_cart</mat-icon>{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n </div>\r\n <div class=\"favourite border-solid\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\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 class=\"share-product\">\r\n <mat-icon class=\"share-icon\" (click)=\"shareProduct()\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n [style.borderColor]=\"data?.styles?.background?.accentColor\">share</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #variants>\r\n <ng-container *ngIf=\"data?.styles?.customization == 'Style1'\">\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"mb-15\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" 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 | titlecase}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"data?.styles?.customization == 'Style2' && selectedVarient.size > 0\">\r\n <ng-container>\r\n <div class=\"row mt-2 style2-container w-100\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div *ngFor=\"let item of selectedVarient | keyvalue\" class=\"px-3 py-2 varient-item\"\r\n [class]=\"getClass(selectedVarient)\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"variant-head\" [style.color]=\"data?.styles?.background?.accentColor\">{{item.key | titlecase}}</div>\r\n <div class=\"variant-value text-start fw-600\" [style.color]=\"data?.styles?.background?.accentColor\">\r\n {{item.value |\r\n titlecase}}</div>\r\n </div>\r\n <div class=\"cursor-pointer p-0\" [class]=\"getClass(selectedVarient)\">\r\n <div class=\"custom-text d-flex align-items-center justify-content-center h-100 p-2\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRightVariant\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">CUSTOMISE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc>\r\n <div class=\"d-flex flex-column\" style=\"margin-top: 15px;\"\r\n *ngIf=\"responseData?.averageRating && responseData?.totalReviewCount\">\r\n <div class=\"rating d-flex justify-content-center gap-2 mb-3\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div class=\"rating-no my-1\">{{(responseData?.averageRating | number:'1.1-2')}}\u2B50</div>\r\n <div class=\"total-ratings my-1\">{{responseData?.totalReviewCount == 1 ? '1 Rating' :\r\n getRatings(responseData?.totalReviewCount) + \" \" + \"ratings\"}}</div>\r\n </div>\r\n <div class=\"d-flex align-items-center gap-2\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n [innerHTML]='currency'></span>\r\n {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"price\" [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\">\r\n <span [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}\r\n </div>\r\n </div>\r\n <div class=\"tax-text\">(MRP Inclusive all taxes)</div>\r\n </div>\r\n <div class=\"heading-large trim-text\" class=\"product-heading\">{{responseData?.name}}</div>\r\n <div class=\"discount\">\r\n <p>Flat 30% off on Diamond Prices</p>\r\n <p class=\"offer\">Offer Expires in 4 days</p>\r\n </div>\r\n <div class=\"product-desc body-large d-block\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #descriptors>\r\n <div class=\"row prod-desc\">\r\n <div>\r\n <div class=\"product-header d-flex align-items-center justify-content-between\">\r\n <span class=\"header-text\" *ngIf=\"responseData?.descriptor || responseData?.materials\">Product Details</span>\r\n <div class=\"pricebreakup-btn d-flex align-items-center justify-content-center cursor-pointer\"\r\n *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\" data-bs-toggle=\"offcanvas\"\r\n data-bs-target=\"#offcanvasRightPriceBreakup\" [style.background]=\"data?.styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(data?.styles?.background?.accentColor)\">\r\n <mat-icon>add</mat-icon> PRICE BREAKUP\r\n </div>\r\n </div>\r\n <div class=\"description\">\r\n <div style=\"margin-top: 10px;\" class=\"body-large brief-desc\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\" [style.background]=\"data?.styles?.background?.color\"></div>\r\n </div>\r\n <ng-container *ngIf=\"subIndustryName == 'Ecommerce Jewellery'\">\r\n <div class=\"jewellery-table-container\">\r\n <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n <div class=\"jewel-container mt-2\">\r\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor(ele.materialType)\"\r\n >\r\n {{ele.materialType | titlecase}}\r\n </div>\r\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor(ele.materialType)\">\r\n <div class=\"col-6 metal-purity\">\r\n <div class=\"row-header\">\r\n Net Weight/Gram\r\n </div>\r\n <div class=\"row-content\">\r\n {{ele.primaryMaterialWeight + \" \" + 'grams'}}\r\n </div>\r\n </div>\r\n <div class=\"col-6 metal-purity\">\r\n <div class=\"row-header\">\r\n Purity\r\n </div>\r\n <div class=\"row-content\">\r\n {{ele.materialPurity}}\r\n </div>\r\n </div>\r\n <!-- <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Price/Gram\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{ getPricePerGram(ele.primaryMaterialWeight,ele.materialPrice) |\r\n number:'1.2-2'}}\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Value\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{ele.materialPrice | number:'1.2-2'}}\r\n </div>\r\n </div> -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- <div class=\"jewel-container mt-2\">\r\n <div class=\"jewel-header\" [style.background]=\"getHeaderColor('Making Charges')\">\r\n Making Charges\r\n </div>\r\n <div class=\"row m-0 w-100 br-p\" [style.background]=\"getBackgroundColor('Making Charges')\">\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Net Weight\r\n </div>\r\n <div class=\"row-content\">\r\n {{responseData?.baseWeight}} </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Making Charge %\r\n </div>\r\n <div class=\"row-content\">\r\n {{responseData?.makingChargePercentage}}\r\n </div>\r\n </div>\r\n <div class=\"col-4\">\r\n <div class=\"row-header\">\r\n Value\r\n </div>\r\n <div class=\"row-content\">\r\n \u20B9{{responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div> -->\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n <!-- <div class=\"tab-group\">\r\n <div class=\"tab\" data-bs-toggle=\"collapse\" href=\"#collapseExample\" >Description</div>\r\n </div>\r\n <div style=\"margin-top: 10px;\" class=\"body-large collapse\" id=\"collapseExample\" *ngIf=\"responseData?.descriptor\"\r\n [innerHTML]=\"responseData?.descriptor?.name\"></div> -->\r\n </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n <ng-container *ngIf=\"!varientLoading && data?.styles?.gridStyle == 'Style1'\">\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)\" [simpoCorner]=\"styles?.corners\"\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 <img [src]=\"currentImg\" class=\"img zoom\" style=\"height: 100%; width: 100%;\" [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n <ng-container *ngIf=\"isMobile\">\r\n <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\" [simpoCorner]=\"styles?.corners\" class=\"zoom\">\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 [simpoCorner]=\"styles?.corners\">\r\n </ng-container>\r\n </div>\r\n <div class=\"img-list w-100\" *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 zoom\" (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 </ng-container>\r\n\r\n <ng-container *ngIf=\"!varientLoading && data?.styles?.gridStyle == 'Style2'\">\r\n <div class=\"row h-100 mt-0 w-100\">\r\n <ng-container *ngIf=\"itemImages?.length == 0\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\" class=\"img\"\r\n [simpoCorner]=\"styles?.corners\" class=\"col-12 h-100 p-0\">\r\n </ng-container>\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 col-6 h-75 p-1\" (click)=\"changeImg(img.imgUrl)\" [simpoCorner]=\"styles?.corners\"\r\n [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\"\r\n [class.h-100]=\"screenWidth <= 500\" [class.w-100]=\"itemImages?.length == 1\"\r\n [class.h-100]=\"itemImages?.length == 1\">\r\n </ng-container>\r\n </div>\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n\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<ng-template #branding>\r\n <div class=\"row w-100\">\r\n <ng-container *ngFor=\"let brand of brandPromises\">\r\n <div class=\"col-4 d-flex flex-column align-items-center g-2\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"brand?.logoUrl\" alt=\"\" class=\"w-h-40 p-0 br-50\">\r\n <div class=\"brand-text w-100 text-center py-2\">\r\n {{brand?.title | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #videoCallSchedule>\r\n <!-- *ngIf=\"ecomConfigs?.videoCallEnabled\" -->\r\n <ng-container>\r\n <div class=\"row w-100 video-container\">\r\n <div class=\"col-4 video-call-img\">\r\n <img\r\n src=\"https://media.tenor.com/jaF_SFcaZk4AAAAM/women.gif\"\r\n alt=\"\" class=\"w-100 h-100 \">\r\n </div>\r\n <div class=\"col-8 align-content-center\">\r\n <div class=\"video-head-text\">\r\n Live Video Call\r\n </div>\r\n <div class=\"sub-text\">\r\n Join a live video call with our consultants to see your favourite designs up close!\r\n </div>\r\n <button class=\"sch-btn text-center cursor-pointer\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(2)\" [buttonId]=\"getButtonId(2)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(2)\" (click)=\"!edit ? opendailogbox(dialogBox) : ''\">\r\n Schedule a Video Call\r\n </button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #DeliverySection>\r\n <div class=\"delivery-container\">\r\n <h2 class=\"delivery-title\">Delivery, Stores & Trial</h2>\r\n\r\n <!-- Location Section -->\r\n <div class=\"location-section\">\r\n <div class=\"location-container d-flex align-items-center justify-content-between\" [style.borderColor]=\"styles?.background?.accentColor\">\r\n <div class=\"d-flex align-items-center w-90\">\r\n <div class=\"d-flex mx-1\"><mat-icon class=\"gps d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" class=\"postal-code-input\" placeholder=\"Enter PinCode\" [(ngModel)]=\"pincode\">\r\n </div>\r\n <button class=\"btn locate-btn\" (click)=\"getStoreDetails()\">Locate me</button>\r\n </div>\r\n <div *ngIf=\"!isPinCode\" style=\"color: red;\">Pin code must be 6 digits.</div>\r\n </div>\r\n <ng-container>\r\n <!-- Free Delivery Section -->\r\n <div class=\"delivery-section\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"delivery-icon\">\uD83C\uDF81</span>\r\n\r\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges == 0\">Free\r\n Delivery by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }}</span>\r\n\r\n <span class=\"delivery-text\" *ngIf=\"ecomConfigs?.deliveryCharges > 0\">Your\r\n Order will\r\n Deliver by {{ storeDetails?.estimatedDeliveryDate | date:'d MMM' }} with a Delivery Charge of\r\n \u20B9 {{ecomConfigs?.deliveryCharges | number:'1.2-2'}}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Nearest Store Section -->\r\n <ng-container\r\n *ngIf=\"storeDetails?.nearbyStore?.name && storeDetails?.nearbyStore?.name?.length > 0;else emptyStore\">\r\n <div class=\"store-section\">\r\n <div class=\"d-flex align-items-center store-item\">\r\n <span class=\"store-icon\">\uD83C\uDFEA</span>\r\n <div class=\"store-details\">\r\n <div class=\"store-text\">\r\n <span class=\"store-label\">Nearest Store - </span>\r\n <span class=\"store-name\">{{ storeDetails?.nearbyStore?.name | titlecase}}</span>\r\n <!-- <span class=\"store-distance\"> (4km)</span> -->\r\n </div>\r\n <!-- <div class=\"availability-section\">\r\n <span class=\"availability-badge\">\u23F0 AVAILABLE BY 28 JUN</span>\r\n </div> -->\r\n <!-- <div class=\"other-stores-text\">\r\n Also Available in <span class=\"other-stores-link\">18 other stores</span>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-center w-100\">\r\n <button class=\"find-store-btn w-100\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"onFindInStore(storeDetails?.nearbyStore?.storeId)\">FIND IN\r\n STORE</button>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <ng-template #emptyStore>\r\n <div class=\"delivery-section\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"delivery-icon\">\uD83C\uDFEA</span>\r\n <span class=\"delivery-text\">No Stores are available</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <!-- Try At Home Section -->\r\n <div class=\"try-home-section\">\r\n <div class=\"d-flex align-items-start try-home-item\">\r\n <span class=\"home-icon\">\uD83C\uDFE0</span>\r\n <div class=\"try-home-details\">\r\n <div class=\"try-home-header\">\r\n <span class=\"try-home-text\">Try At Home</span>\r\n <span class=\"free-text\"> (It's Free)</span>\r\n </div>\r\n <div class=\"home-appointment-text\">Home Appointment <span>Available to try from 29 Jul</span></div>\r\n <!-- <div class=\"appointment-text\">\r\n Home Appointment <span class=\"appointment-available\">Available to try from 28 Jun</span>\r\n </div> -->\r\n </div>\r\n </div>\r\n <div class=\"d-flex-align-items-center justify-content-center w-100\">\r\n <button class=\"book-appointment-btn\" (click)=\"addToTrialCart()\" *ngIf=\"!isItemAddedAsTrial\">BOOK HOME APPOINTMENT</button>\r\n <button class=\"book-appointment-btn\" *ngIf=\"isItemAddedAsTrial\">HOME APPOINTMENT BOOKED</button>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-variant\" tabindex=\"-1\" id=\"offcanvasRightVariant\"\r\n aria-labelledby=\"offcanvasRightLabel\">\r\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon data-bs-dismiss=\"offcanvas\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"varient-price px-3 pb-2\">\r\n <div class=\"price-text\">Price</div>\r\n <div class=\"d-flex g-3 align-items-center\">\r\n <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n *ngIf=\"responseData?.price?.discountedPrice && responseData.price.discountedPrice > 0\"><span\r\n [innerHTML]='currency'></span>\r\n {{responseData?.price?.discountedPrice}}</div>\r\n <div class=\"price\"\r\n *ngIf=\"responseData?.price?.sellingPrice && getDifference(responseData?.price?.sellingPrice, responseData?.price?.discountedPrice) > 2\"\r\n [ngClass]=\"{'strike-through': responseData?.price?.discountedPrice}\"><span [innerHTML]='currency'></span>\r\n {{responseData?.price?.sellingPrice | number:'1.0-0'}}</div>\r\n </div>\r\n </div>\r\n <div class=\"varient-container h-100 p-3\">\r\n <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n <div class=\"mb-15\">\r\n <div class=\"varient-key\">{{varient.key}}</div>\r\n <div class=\"d-flex\" style=\"gap: 5px;\">\r\n <div *ngFor=\"let varientValue of varient.value\" 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 | titlecase}}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"confirm-btn w-100 p-3 text-center cursor-pointer\" data-bs-dismiss=\"offcanvas\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" style=\"color: white;\">Confirm\r\n Customization</div>\r\n</div>\r\n\r\n<ng-template #dialogBox>\r\n <div class=\"modal-content\">\r\n\r\n <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon (click)=\"closeDialog()\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n <div class=\"modal-body h-100 p-0\">\r\n <div class=\"row h-100 w-100 mt-3 video-call-container\">\r\n <div class=\"col-6\" *ngIf=\"!isMobile\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/897651c1751980487170Vdo Call.gif\" alt=\"\"\r\n class=\"w-100\">\r\n </div>\r\n <div class=\"col-6 position-relative h-100 call-details\">\r\n <!-- Name Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n (input)=\"onInputChange('username')\">\r\n </div>\r\n\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n (input)=\"onInputChange('email')\">\r\n </div>\r\n\r\n <!-- Mobile Number Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n <div class=\"sub-text-call\">IN +91</div>\r\n <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n (input)=\"onInputChange('mobileNumber')\">\r\n </div>\r\n\r\n\r\n <!-- Pincode Input with Validation -->\r\n <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n </div>\r\n <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n (input)=\"onInputChange('pincode')\">\r\n </div>\r\n <div class=\"language my-3\">\r\n <div class=\"mini-text mb-2\">Language Preference</div>\r\n <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n <ng-container *ngFor=\"let lang of languages\">\r\n <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n [style.background]=\"lang == selectedLang ? data?.styles?.background?.accentColor : ''\"\r\n (click)=\"selectedLang = lang\"\r\n [style.color]=\"lang == selectedLang ? getTextColor(data?.styles?.background?.accentColor) : '#000000'\">\r\n {{lang}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n <div class=\"input-field my-3\">\r\n <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n </div>\r\n </ng-container>\r\n <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\" (click)=\"scheduleVideoCall()\"\r\n [disabled]=\"isSubmitting\">\r\n <ng-container *ngIf=\"isSubmitting\">\r\n <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n <span class=\"visually-hidden\">Loading...</span>\r\n </div>\r\n SCHEDULING...\r\n </ng-container>\r\n <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n <mat-icon>video_call</mat-icon>&nbsp;\r\n SCHEDULE A VIDEO CALL\r\n </ng-container>\r\n <ng-container *ngIf=\"scheduled\">\r\n <mat-icon>check_circle</mat-icon>&nbsp;\r\n SCHEDULED SUCCESSFULLY\r\n </ng-container>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end offcanvas-small overflow-scroll\" tabindex=\"-1\" id=\"offcanvasRightPriceBreakup\">\r\n <div class=\"varient-header d-flex align-items-center justify-content-end p-2\">\r\n <mat-icon data-bs-dismiss=\"offcanvas\"\r\n class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n </div>\r\n <div class=\"varient-price p-10-20\">\r\n <div class=\"price-break-header\">{{responseData?.name}}</div>\r\n </div>\r\n <div class=\"price-breakup h-100 w-100\">\r\n <ng-container *ngFor=\"let ele of responseData?.materials\">\r\n <div class=\"price-container mb-3 p-10-20\">\r\n <div class=\"price-container-header\">\r\n {{ ele.materialType + \" BREAKUP\" }}\r\n </div>\r\n <div class=\"row w-100 header-row\">\r\n <div class=\"col-3 text-center\">COMPONENT</div>\r\n <div class=\"col-3 text-center\">RATE</div>\r\n <div class=\"col-3 text-center\">WEIGHT</div>\r\n <div class=\"col-3 text-center\">FINAL VALUE</div>\r\n </div>\r\n <div class=\"row w-100 value-row\">\r\n <div class=\"col-3 text-center\">{{ ele.materialPurity | titlecase }}</div>\r\n <div class=\"col-3 text-center\">\u20B9{{ getPricePerGram(ele.primaryMaterialWeight, ele.materialPrice) |\r\n number:'1.2-2' }}</div>\r\n <div class=\"col-3 text-center\">{{ ele.primaryMaterialWeight + \" grams\" }}</div>\r\n <div class=\"col-3 text-center total\">\u20B9{{ ele.materialPrice | number:'1.2-2' }}</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\r\n <div class=\"price-container mb-3 p-10-30 py-0 border-unset\">\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Making Charges</div>\r\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.makingChargeAmount | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Tax Amount</div>\r\n <div class=\"col-6 text-end total\">\u20B9{{ responseData?.jewelryPriceBreakup?.taxAmount | number:'1.2-2' }}\r\n </div>\r\n </div>\r\n <div class=\"row w-100 summary-row\">\r\n <div class=\"col-6 text-start\">Total Amount</div>\r\n <div class=\"col-6 text-end total\">\r\n \u20B9{{(responseData?.jewelryPriceBreakup?.priceWithoutTax + responseData?.jewelryPriceBreakup?.taxAmount) |\r\n number:'1.2-2'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</div>\r\n<ng-template #ReviewsSection>\r\n <div class=\"w-100 row\" *ngIf=\"reviewsData && reviewsData.length > 0\">\r\n <div class=\"col-md-3 col-sm-12\">\r\n <div class=\"cust-header\">Customer Reviews</div>\r\n <div class=\"d-flex gap-3 mb-1\">\r\n <ng-container *ngIf=\"responseData?.averageRating\">\r\n <p-rating [(ngModel)]=\"responseData.averageRating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </ng-container>\r\n <span class=\"rating-text\">{{responseData?.averageRating | number:'1.1-2'}} out of 5</span>\r\n </div>\r\n <div class=\"d-flex mb-3\">{{responseData?.totalReviewCount + \" ratings\"}}</div>\r\n <div class=\"ratings-percentage\">\r\n <ng-container *ngFor=\"let rating of [5,4,3,2,1]\">\r\n <div class=\"percentage d-flex align-items-center gap-2 mb-2\">\r\n <span>{{rating + \" star\"}}</span>\r\n <div class=\"w-50 bar\" [style.borderColor]=\"data?.styles?.background?.accentColor\">\r\n <div [style.width.%]=\"getPercentage(rating)\"\r\n [style.backgroundColor]=\"data?.styles?.background?.accentColor\" class=\"h-100\"></div>\r\n </div>\r\n <span class=\"percentage-text\">{{getPercentage(rating) + \"%\"}}</span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-md-9 col-sm-12\">\r\n <div class=\"review-header\">Latest Reviews</div>\r\n <div class=\"review-body d-flex flex-column gap-3\">\r\n <ng-container *ngFor=\"let review of reviewsData\">\r\n <div class=\"review-container w-75\">\r\n <div class=\"review-name gap-2 my-2 d-flex align-items-center\">\r\n <img src=\"https://m.media-amazon.com/images/S/amazon-avatars-global/default.png\" alt=\"\"\r\n class=\"width-30 h-25 mr-2\">\r\n <span>{{review?.userName ?? \"-\"}}</span>\r\n </div>\r\n <ng-container *ngIf=\"review?.rating\">\r\n <p-rating [(ngModel)]=\"review.rating\" [cancel]=\"false\" [readonly]=\"true\"></p-rating>\r\n </ng-container>\r\n <div class=\"review-desc\">\r\n {{review?.review ?? \"-\"}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n <div class=\"w-75 see-more py-3\" (click)=\"loadMoreReviews()\"\r\n [style.color]=\"data?.styles?.background?.accentColor\">\r\n See more reviews <span>></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n</ng-template>\r\n", styles: [".product-desc{display:flex}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.strike-through{text-decoration:line-through;color:#d3d3d3}::ng-deep .smooth-panel .p-panel-header{cursor:pointer;background:transparent;border:unset;font-size:18px;font-weight:700;padding:0}::ng-deep .smooth-panel .p-panel-content{border:unset;padding:0}.jewel-container{border-radius:12px;box-shadow:#63636333 0 2px 8px}.jewel-header{padding:8px 10px;border-radius:12px 12px 0 0;font-size:15px;font-weight:700;color:#4f3267}.br-p{border-radius:0 0 12px 12px;padding:10px 0}.row-header{font-size:13px;font-weight:700;color:#4f3267}.row-content{color:#4e555e}.jewellery-table-container{border-radius:12px}.jewellery-table{width:100%;border-collapse:collapse;border:1px solid #ddd;transition:all .3s ease}.jewellery-table th,.jewellery-table td{border:1px solid #ddd;padding:12px;text-align:left;transition:background-color .2s ease}.material-header td{background-color:#f8f9fa;font-weight:700;font-size:16px}.column-header{background-color:#f1f1f1}.column-header th{font-weight:600}.material-row:hover{background-color:#f5f5f5}.charges-header th,.total-header th{background-color:#eaeaea;font-weight:700}.total-row td{font-weight:700;font-size:18px;background-color:#f8f8f8}@media screen and (max-width: 600px){.jewellery-table{font-size:14px}.jewellery-table th,.jewellery-table td{padding:8px}}.share-icon{border:1px solid;border-radius:8px;padding:5px;height:43px;width:40px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.header-text{font-size:17px;font-weight:bolder}.pricebreakup-btn{font-size:11px;font-weight:700;padding:1% 3%;border-radius:8px;letter-spacing:.5px}.pricebreakup-btn mat-icon{font-size:18px;display:flex;align-items:center}.img-list{display:flex;gap:5px;max-height:460px}.img-list img{height:100px;width:100px;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:100%;height:500px;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-size:24px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:1px solid;align-items:center;gap:15px;height:44px;width:75%;justify-content:space-between;border-radius:12px}.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}.fc{font-size:17px;font-weight:700}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;margin-top:.5rem}.tab-group{display:flex;gap:10px}.tab{font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black;max-width:max-content}.discount-price{font-size:1.4rem}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#f7f7f7;padding:11px 20px;border-radius:12px;margin-top:unset!important;width:70%!important;border:1px solid #d3d3d347}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#f7f7f7;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:5px;height:44px!important;justify-content:space-between;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:14px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.w-h-40{width:40px!important;height:40px!important}.product-detail{margin-top:0;height:100vh}.above-height{height:90vh}.height{height:100vh}.mobile-footer{display:none}@media (min-width: 1024px){.height{width:75%}.above-height{width:100%;display:flex}.product-detail{padding:2%}.product-heading{font-size:16px;font-weight:600;margin-top:15px;font-size:1rem}.prod-img-block{height:100%;display:flex;flex-direction:column-reverse;justify-content:start;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}.product-desc,.brief-desc{font-size:16px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important;height:348px}.item-img img{width:100%;height:348px!important}.display-none{display:none}.prod-img-block{flex-direction:column;gap:5px}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{width:25%;border:2px solid lightgray;cursor:pointer}.product-detail{margin-top:20px;overflow-x:hidden}.input-field{margin-top:.7rem!important;margin-bottom:.7rem!important}.prod-desc{margin-top:20px}.video-call-container{margin:0!important}.product-img{height:220px}.call-details{width:100%!important;padding:3%!important}.send-btn{padding:.5rem 1rem!important;width:73%!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.favourite:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.review-sec :is(input,textarea){width:100%!important}.height{width:100%}.above-height{padding:4%;min-height:95vh!important;height:unset!important}.product-heading{font-size:16px}}.send-btn{font-size:14px!important;padding:1rem;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600}.send-btn mat-icon{height:20px;width:20px;font-size:18px}.favourite .mat-icon{min-height:40px;min-width:40px;font-size:25px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer}.favourite:hover,.share-product:hover{box-shadow:#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;transform:translateY(-3px)}.border-solid{border:1px solid;border-radius:8px}a{text-decoration:none}.brief-desc{font-size:14px;color:#4e555e}.total-container{height:100vh;position:relative;display:block!important;overflow:scroll;margin-bottom:1rem}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin:unset!important}.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% 2%}.above-height{display:flex}.product-headig{font-size:35px}.prod-img-block{height:100%;display:flex;gap:5px}}.mat-accordion .mat-expansion-panel:last-of-type{box-shadow:none}.mb-15{margin-bottom:15px}@media (min-width: 1400px){.container{max-width:unset;width:95%}}.width-max{width:max-content}.width-34{width:33.3%!important}.fw-600{font-weight:600}.cursor-pointer{cursor:pointer}.f-18{font-size:18px}.offcanvas-variant{border-radius:30px 0 0 30px}.varient-header,.varient-price{background:#f7f7f7}.varient-header{border-radius:30px 0 0}.confirm-btn{border-radius:0 0 0 30px;position:absolute!important;bottom:0!important}.style2-container{border:1px solid;border-radius:12px;margin:0}.varient-item{border-right:1px solid;align-content:center}.variant-head{font-size:12px}.varient-value{font-size:16px}.custom-text{border-radius:0 8px 8px 0}.br-50{border-radius:50%}.w-15{width:22%!important}.scroll-wrap{flex-wrap:nowrap}.brand-text{word-wrap:break-word;white-space:normal;font-size:12px;font-weight:600;line-height:20px}.video-container{border:1px solid rgb(240,240,240);margin:10px 0;border-radius:12px}.video-head-text{font-size:16px;font-weight:700}.sub-text{font-size:11px;color:#6f7377;margin-bottom:10px}.sch-btn{font-size:1.2rem!important;color:#fff;padding:3px 0;margin-top:5px}.tax-text{font-size:.7rem;color:#6f7377}.modal-dialog{position:absolute!important;top:15%!important;left:30%!important;width:53%!important;height:75vh!important;max-width:unset!important;background:#fff;border-radius:18px!important}.schedule-header{border-radius:18px 18px 0 0}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.delivery-container{margin:35px 0 15px;background-color:transparent}.delivery-title{font-size:16px;font-weight:600;margin:0 0 12px;line-height:1.2}.location-container{border:1px solid #cfcfcf;border-radius:12px;padding:10px;margin-bottom:15px;width:100%}.location-icon{width:20px;height:20px;background-color:#374151;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.location-icon:before{content:\"\";width:8px;height:8px;background-color:#fff;border-radius:50%;position:absolute}.postal-code-input{font-size:12px;font-weight:600;letter-spacing:.5px;border:none;outline:none;background:transparent;width:90%}.postal-code-input::placeholder{font-weight:500}.locate-btn{background:none!important;border:none!important;font-weight:500;font-size:12px!important;padding:0!important;box-shadow:none!important;width:20%!important}.gps{font-size:17px}.locate-btn:focus{box-shadow:none!important}.delivery-section{margin-bottom:15px;border:1px solid rgb(240,240,240);padding:10px;border-radius:12px}.delivery-icon{font-size:18px;color:#ec4899;margin-right:14px;width:20px}.delivery-text{font-size:14px;font-weight:700}.store-section{border:1px solid rgb(240,240,240);padding:10px;border-radius:12px;margin-bottom:15px}.store-item{margin-bottom:11px}.store-icon{font-size:18px;color:#f97316;margin-right:14px;margin-top:2px;width:20px}.store-details{flex:1}.store-text{font-size:14px}.store-name{font-weight:700}.availability-section{margin-bottom:6px}.availability-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:#d97706;background-color:#fef3c7;padding:4px 8px;border-radius:12px;letter-spacing:.5px}.other-stores-text{font-size:14px;color:#6b7280;line-height:1.4}.other-stores-link{color:#6b46c1;cursor:pointer;text-decoration:underline}.other-stores-link:hover{color:#553c9a}.find-store-btn{width:100%!important;padding:8px 20px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px}.try-home-section{border-radius:12px;padding:10px;border:1px solid rgb(240,240,240)}.try-home-item{margin-bottom:10px;padding:0}.home-icon{font-size:18px;color:#6b46c1;margin-right:14px;margin-top:2px;width:20px}.try-home-details{flex:1}.try-home-text{font-size:14px;font-weight:700;color:#374151}.free-text{font-size:14px;color:#6b7280}.appointment-text{font-size:14px;color:#6b7280;line-height:1.4}.appointment-available{font-weight:500;color:#374151}.book-appointment-btn{background:linear-gradient(135deg,#8b5cf6,#a855f7);color:#fff;border:none;padding:8px 20px;border-radius:12px;font-weight:600;font-size:14px!important;cursor:pointer;letter-spacing:.5px;transition:all .2s ease}.book-appointment-btn:hover{background:linear-gradient(135deg,#7c3aed,#9333ea);transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}@media (max-width: 480px){.delivery-container{padding:12px}.location-section{padding:12px 0}.try-home-section{padding:20px}}.w-90{width:90%}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.w-12{width:12%!important}.w-88{width:88%!important}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.border-unset{border:unset!important}.error-border{border:2px solid #dc3545!important}.offcanvas-small{height:72vh;top:25%;width:35%;border-radius:50px 0 0 50px}.rating{width:max-content;border:1px solid;border-radius:20px;padding:0 10px;margin-bottom:.5rem}.zoom:hover{transform:scale(1.2);transition:transform .2s ease-in-out;overflow:hidden}.rating-no{padding-right:7px;margin:0;border-right:1px solid;font-size:.75rem}.p-10-20{padding:10px 30px}.price-break-header{font-size:19px;font-weight:600}.price-container{border-bottom:1px solid rgb(233,233,233)}.price-container-header{font-size:14px;font-weight:600;color:#333}.total-ratings{font-size:.75rem}.header-row .col-3{font-size:12px;font-weight:500;color:#666}.value-row .col-3{font-size:14px;font-weight:400;color:#333}.value-row .col-3.total{font-weight:600}.summary-row .col-6{font-size:15px;font-weight:500;color:#333;padding:unset}.summary-row .col-6.total{font-weight:600;padding-right:10px}.summary-row{padding:0 42px}.error-border{border:2px solid #e74c3c!important;box-shadow:0 0 5px #e74c3c4d!important}.form-control,.input-field input{transition:border-color .3s ease,box-shadow .3s ease}.error-border:focus{border-color:#e74c3c!important;box-shadow:0 0 8px #e74c3c80!important}.input-field input:focus{transform:scale(1.02)}.spinner-border{display:inline-block;width:1rem;height:1rem;vertical-align:-.125em;border:.125em solid currentcolor;border-right-color:transparent;border-radius:50%;animation:spinner-border .75s linear infinite}.spinner-border-sm{width:.875rem;height:.875rem;border-width:.125em}@keyframes spinner-border{to{transform:rotate(360deg)}}.me-2{margin-right:.5rem}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.width-30{width:30px!important}.review-header{font-size:20px;font-weight:600}.review-desc{font-weight:500}.see-more{font-weight:600;cursor:pointer;border-top:1px solid #d1d1d1}.see-more span{font-size:12px}.cust-header{font-size:24px}.bar{border:1px solid;height:20px;border-radius:5px;overflow:hidden}.bar div{border-radius:2px}.parent-container{height:100%;width:100%;display:flex}.home-appointment-text{font-size:.8rem;color:#4e555e}.home-appointment-text span{font-weight:600}.video-call-img{height:120px;margin:0;padding:0;border-radius:45px}.video-call-img img{border-top-left-radius:12px;border-bottom-left-radius:12px}.discount{background:#fff3f2;padding:15px 15px 20px;margin-top:14px;border-radius:8px;display:flex;flex-direction:column;gap:5px;position:relative}.discount p{margin-bottom:0;color:#4f3267;font-weight:700;font-size:1rem}.discount .offer{color:#eb4f5c}.discount:before{content:\"\";display:block;height:44px;width:4px;background:#eb4f5c;position:absolute;left:0;top:16px;border-top-right-radius:20px;border-bottom-right-radius:20px}.metal-purity{display:flex;flex-direction:column;gap:10px}.scrollable-content{height:100%;max-height:95vh;overflow-y:auto}\n"] }]
16004
15778
  }], ctorParameters: () => [{ type: Object, decorators: [{
16005
15779
  type: Inject,
16006
15780
  args: [PLATFORM_ID]