simpo-component-library 1.6.56 → 1.6.60

package/fesm2022/simpo-component-library.mjs

@@ -7008,8 +7008,9 @@ class ProductDescComponent extends BaseSection {
             {
                 icon: "pi pi-share-alt",
                 command: () => {
-                    navigator.clipboard.writeText(window.location.href);
-                    this.messageService.add({ severity: 'info', summary: 'Copied', detail: 'You can share the url', key: 'wishlist' });
+                    this.shareProduct();
+                    // navigator.clipboard.writeText(window.location.href);
+                    // this.messageService.add({ severity: 'info', summary: 'Copied', detail: 'You can share the url', key: 'wishlist' });
                 }
             }
         ];
@@ -7124,6 +7125,15 @@ class ProductDescComponent extends BaseSection {
         });
         return selectedVarient;
     }
+    shareProduct() {
+        navigator.share({
+            title: 'Buy ' + this.responseData?.name,
+            text: this.responseData.brief,
+            url: window.location.href,
+        })
+            .then(() => this.messageService.add({ severity: 'info', summary: 'Shared', detail: 'Product shared', key: 'wishlist' }))
+            .catch((error) => this.messageService.add({ severity: 'error', summary: 'Shared', detail: 'Failed to share product. Try Again.', key: 'wishlist' }));
+    }
     routeToHome() {
         this.router.navigate(['/']);
     }
@@ -7311,7 +7321,7 @@ class ProductDescComponent extends BaseSection {
         return window.innerWidth <= 475;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: RestService }, { token: CartService }, { token: StorageServiceService }, { token: i7.MessageService }, { token: i1.Meta }, { token: i1.Title }, { token: i5.MatBottomSheet }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], 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\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [style.height.vh]=\"!isMobile ? 100 : ''\">\r\n      <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div>\r\n      <div class=\"row h-100\" [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-12 h-100 product-detail\">\r\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n            <div>\r\n              <div class=\"varient-key\">{{varient.key}}</div>\r\n              <div class=\"d-flex\" style=\"gap: 5px;\">\r\n                \r\n                <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\r\n                <div *ngFor=\"let varientValue of varient.value\"\r\n                class=\"varient-tag\"\r\n                  [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n                  [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n          <div class=\"product-sku\">\r\n            <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n            <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\r\n                (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n              </a></div>\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container>\r\n          <ng-container *ngIf=\"responseData?.rating == 0\">\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\r\n        <div class=\"tab-group\">\r\n          <div class=\"tab\">Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <!-- <ng-container *ngIf=\"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    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n      <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\r\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n  </div>\r\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\"  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button  [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n          [color]=\"data?.styles?.background?.accentColor\" (click)=\"addProductReview()\" [disabled]=\"productReview == 0 || reviewTitle?.length == 0 || reviewDescription?.length == 0\">Submit review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n  <div class=\"d-flex\">\r\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n      <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n    </div>\r\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n        [color]=\"data?.styles?.background?.accentColor\"\r\n        (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"favourite\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #ProductDesc>\r\n  <div class=\"heading-large trim-text\">{{responseData?.name}}</div>\r\n  <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n    <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n      *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.value}}</div>\r\n    <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.discountedPrice}}</div>\r\n    <div class=\"tax-text\">(excluding all taxes)</div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading\">\r\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\" [magnification]=\"2\"\r\n            [lensHeight]=\"100\" [lensWidth]=\"100\" style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px',\r\n      'position': 'relative',\r\n      'right': '5px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        This content is aligned from right to left.\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n        <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;height:100%;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:100%;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px;width:155px;justify-content:space-between;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.mobile-footer{display:none}@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:10001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{height:25%;width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: i14.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "edit", "customClass", "delete"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i15.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: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductDescComponent, isStandalone: true, selector: "simpo-product-desc", inputs: { data: "data", responseData: "responseData", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" (click)=\"editSection()\">\r\n    \r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [style.height.vh]=\"!isMobile ? 100 : ''\">\r\n      <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div>\r\n      <div class=\"row h-100\" [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-12 h-100 product-detail\">\r\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n            <div>\r\n              <div class=\"varient-key\">{{varient.key}}</div>\r\n              <div class=\"d-flex\" style=\"gap: 5px;\">\r\n                \r\n                <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\r\n                <div *ngFor=\"let varientValue of varient.value\"\r\n                class=\"varient-tag\"\r\n                  [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n                  [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n          <div class=\"product-sku\">\r\n            <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n            <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\r\n                (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n              </a></div>\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\r\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n          <ng-container *ngIf=\"responseData?.rating == 0\">\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\r\n        <div class=\"tab-group\">\r\n          <div class=\"tab\">Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <!-- <ng-container *ngIf=\"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    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n      <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\r\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n  </div>\r\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\"  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button  [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n          [color]=\"data?.styles?.background?.accentColor\" (click)=\"addProductReview()\" [disabled]=\"productReview == 0 || reviewTitle?.length == 0 || reviewDescription?.length == 0\">Submit review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n  <div class=\"d-flex\">\r\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n      <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n    </div>\r\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n        [color]=\"data?.styles?.background?.accentColor\"\r\n        (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"favourite\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #ProductDesc>\r\n  <div class=\"heading-large trim-text\">{{responseData?.name}}</div>\r\n  <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n    <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n      *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.value}}</div>\r\n    <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.discountedPrice}}</div>\r\n    <div class=\"tax-text\">(excluding all taxes)</div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading\">\r\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n        \r\n        <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon>\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\" [magnification]=\"2\"\r\n            [lensHeight]=\"100\" [lensWidth]=\"100\" style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px',\r\n      'position': 'relative',\r\n      'right': '5px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        This content is aligned from right to left.\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n        <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->", styles: [".product-desc{display:flex}.share-icon{border:1.5px solid rgba(211,211,211,.382);position:absolute;top:10px;right:10px;z-index:1;opacity:.5;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:#00000003 0 1px 2px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;height:100%;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:100%;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px;width:155px;justify-content:space-between;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.mobile-footer{display:none}@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:10001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{height:25%;width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: NgxImageZoomModule }, { kind: "component", type: i14.NgxImageZoomComponent, selector: "lib-ngx-image-zoom", inputs: ["thumbImage", "fullImage", "zoomMode", "magnification", "minZoomRatio", "maxZoomRatio", "scrollStepSize", "enableLens", "lensWidth", "lensHeight", "circularLens", "enableScrollZoom", "altText", "titleText"], outputs: ["zoomScroll", "zoomPosition", "imagesLoaded"] }, { kind: "component", type: FeaturedProductsComponent, selector: "simpo-featured-products", inputs: ["data", "responseData", "index", "isRelatedProduct", "edit", "customClass", "delete"], outputs: ["changeDetailProduct"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "component", type: SociaIconsComponent, selector: "simpo-socia-icons", inputs: ["socialIconData", "color", "sectionId"] }, { kind: "ngmodule", type: RatingModule }, { kind: "component", type: i15.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: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductDescComponent, decorators: [{
             type: Component,
@@ -7335,7 +7345,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         RatingModule,
                         SpeedDialModule,
                         ToastModule
-                    ], 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\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [style.height.vh]=\"!isMobile ? 100 : ''\">\r\n      <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div>\r\n      <div class=\"row h-100\" [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-12 h-100 product-detail\">\r\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n            <div>\r\n              <div class=\"varient-key\">{{varient.key}}</div>\r\n              <div class=\"d-flex\" style=\"gap: 5px;\">\r\n                \r\n                <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\r\n                <div *ngFor=\"let varientValue of varient.value\"\r\n                class=\"varient-tag\"\r\n                  [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n                  [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n          <div class=\"product-sku\">\r\n            <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n            <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\r\n                (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n              </a></div>\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\r\n          <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container>\r\n          <ng-container *ngIf=\"responseData?.rating == 0\">\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\r\n        <div class=\"tab-group\">\r\n          <div class=\"tab\">Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <!-- <ng-container *ngIf=\"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    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n      <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\r\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n  </div>\r\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\"  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button  [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n          [color]=\"data?.styles?.background?.accentColor\" (click)=\"addProductReview()\" [disabled]=\"productReview == 0 || reviewTitle?.length == 0 || reviewDescription?.length == 0\">Submit review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n  <div class=\"d-flex\">\r\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n      <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n    </div>\r\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n        [color]=\"data?.styles?.background?.accentColor\"\r\n        (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"favourite\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #ProductDesc>\r\n  <div class=\"heading-large trim-text\">{{responseData?.name}}</div>\r\n  <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n    <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n      *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.value}}</div>\r\n    <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.discountedPrice}}</div>\r\n    <div class=\"tax-text\">(excluding all taxes)</div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading\">\r\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\" [magnification]=\"2\"\r\n            [lensHeight]=\"100\" [lensWidth]=\"100\" style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px',\r\n      'position': 'relative',\r\n      'right': '5px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        This content is aligned from right to left.\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n        <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->", styles: [".product-desc{display:flex}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;height:100%;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:100%;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px;width:155px;justify-content:space-between;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.mobile-footer{display:none}@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:10001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{height:25%;width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}\n"] }]
+                    ], providers: [MessageService], template: "<ng-container *ngIf=\"!isLoading\">\r\n  <p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"wishlist\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n  <section class=\"total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoBackground]=\"styles?.background\"\r\n    simpoHover (hovering)=\"showEditTabs($event)\" [attr.style]=\"customClass\" (click)=\"editSection()\">\r\n    \r\n    <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n      <p-speedDial [model]=\"items\" direction=\"up\" [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\" />\r\n    </div>\r\n    <section class=\"container\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [style.height.vh]=\"!isMobile ? 100 : ''\">\r\n      <div><a href=\"javascript:void(0)\" style=\"text-decoration: none; color: #0267C1\" (click)=\"routeToHome()\">Home</a> /\r\n        <span>{{ responseData?.name | titlecase }}</span>\r\n      </div>\r\n      <div class=\"row h-100\" [ngStyle]=\"{'min-height: 95vh': isMobile, 'max-width: 95vh': !isMobile}\">\r\n        <div class=\"col-lg-6 col-12 h-100\">\r\n          <div class=\"prod-img-block\">\r\n            <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6 col-12 h-100 product-detail\">\r\n          <ng-container *ngTemplateOutlet=\"ProductDesc\"></ng-container>\r\n\r\n          <ng-container *ngIf=\"!isMobile\">\r\n            <ng-container *ngTemplateOutlet=\"ActionBtn\"></ng-container>\r\n          </ng-container>\r\n\r\n          <ng-container *ngFor=\"let varient of varients | keyvalue\">\r\n            <div>\r\n              <div class=\"varient-key\">{{varient.key}}</div>\r\n              <div class=\"d-flex\" style=\"gap: 5px;\">\r\n                \r\n                <!-- [attr.class]=\"!isVarientAvailable(varient) ? 'varient-tag disable-varient' : 'varient-tag'\" -->\r\n                <div *ngFor=\"let varientValue of varient.value\"\r\n                class=\"varient-tag\"\r\n                  [style.color]=\"selectedVarient.get(varient.key) == varientValue ? 'white' : data?.styles?.background?.accentColor\"\r\n                  [style.backgroundColor]=\"selectedVarient.get(varient.key) == varientValue ? data?.styles?.background?.accentColor : ''\"\r\n                  (click)=\"selectVarient(varient.key, varientValue)\">{{varientValue}}</div>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <div class=\"product-desc body-large d-block trim-text\" *ngIf=\"responseData?.brief\" [innerHTML]=\"responseData.brief\"></div>\r\n          <div class=\"product-sku\">\r\n            <div *ngIf=\"responseData?.itemInventory\">SKU : {{responseData.itemInventory?.openingStock}}</div>\r\n            <div *ngIf=\"responseData?.itemCategorisation?.itemCategories\">Category : <a href=\"javascript:void(0)\"\r\n                (click)=\"goToFilter(cat.refName)\"\r\n                *ngFor=\"let cat of responseData?.itemCategorisation?.itemCategories;let idx = index\">{{cat.refName |\r\n                titlecase}} <ng-container\r\n                  *ngIf=\"(idx+1) != responseData?.itemCategorisation?.itemCategories?.length\">,</ng-container>\r\n              </a></div>\r\n            <div *ngIf=\"(responseData?.itemCategorisation?.productTags?.length || 0) > 0\">Tags : <span\r\n                *ngFor=\"let tag of responseData?.itemCategorisation?.productTags\">{{tag.tagName}},\r\n              </span></div>\r\n          </div>\r\n          <!-- <ng-container *ngTemplateOutlet=\"SocialIcons\"></ng-container> -->\r\n          <ng-container *ngIf=\"responseData?.rating == 0\">\r\n            <ng-container *ngTemplateOutlet=\"ReviewSection\"></ng-container>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <div class=\"row prod-desc\" *ngIf=\"responseData?.descriptor?.name\">\r\n        <div class=\"tab-group\">\r\n          <div class=\"tab\">Description</div>\r\n        </div>\r\n        <div style=\"margin-top: 10px;\" class=\"body-large\" *ngIf=\"responseData?.descriptor\"\r\n          [innerHTML]=\"responseData?.descriptor?.name\"></div>\r\n      </div>\r\n    </section>\r\n    <ng-container *ngIf=\"relatedProductData?.length\">\r\n      <simpo-featured-products [edit]=\"false\" [data]=\"featureProductData\" [responseData]=\"relatedProductData\"\r\n        [isRelatedProduct]=\"true\" (changeDetailProduct)=\"changeProduct($event)\"></simpo-featured-products>\r\n    </ng-container>\r\n    <!-- <ng-container *ngIf=\"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    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n      <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n    </div>\r\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n      <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n    </div>\r\n  </section>\r\n</ng-container>\r\n\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\r\n  width: '100%',\r\n  height: '40vh',\r\n  'border-radius': '10px',\r\n  'position': 'relative',\r\n  'right': '5px'\r\n}\">\r\n</ngx-skeleton-loader>\r\n\r\n\r\n<div class=\"mobile-footer\">\r\n  <div class=\"icons\">\r\n    <div (click)=\"goToCart()\">\r\n      <mat-icon>shopping_cart</mat-icon>\r\n    </div>\r\n    <div>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n      <!-- <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">bookmark</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">bookmark_border</mat-icon> -->\r\n    </div>\r\n  </div>\r\n  <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n  <div class=\"quantity\" *ngIf=\"responseData?.quantity && !isItemOutOfStock\">\r\n    <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n    <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n    <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n  </div>\r\n  <button class=\"add-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" (click)=\"addToCart()\"\r\n    *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n</div>\r\n\r\n<ng-template #ReviewSection>\r\n  <div class=\"review-sec\">\r\n    <div class=\"title\">Customer Review</div>\r\n    <p-rating [cancel]=\"false\" [readonly]=\"true\" [(ngModel)]=\"totalReview\" />\r\n    <span>Be the first to write a review</span>\r\n    <button class=\"mt-3\"  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n    [color]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = !showReview\">{{ !showReview ? 'Add Review' : 'Cancel Review'}}</button>\r\n    <ng-container *ngIf=\"showReview\">\r\n      <hr />\r\n      <div class=\"user-review\">\r\n        <div class=\"title\">Write a review</div>\r\n        <span class=\"secondary-text\">RATING</span>\r\n        <p-rating [(ngModel)]=\"productReview\" [cancel]=\"false\" [readonly]=\"false\" />\r\n        <div>\r\n          <span class=\"secondary-text\">Review Title</span>\r\n          <input type=\"text\" placeholder=\"Give your review a title\" [(ngModel)]=\"reviewTitle\">\r\n        </div>\r\n        <div>\r\n          <span class=\"secondary-text\">Review</span>\r\n          <textarea placeholder=\"Write your comments here\" [(ngModel)]=\"reviewDescription\"></textarea>\r\n        </div>\r\n        <div class=\"review-action-btn\">\r\n          <button  [style.borderColor]=\"data?.styles?.background?.accentColor\" [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"showReview = false\">Cancel review</button>\r\n          <button  simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n          [color]=\"data?.styles?.background?.accentColor\" (click)=\"addProductReview()\" [disabled]=\"productReview == 0 || reviewTitle?.length == 0 || reviewDescription?.length == 0\">Submit review</button>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</ng-template>\r\n<ng-template #SocialIcons>\r\n  <div class=\"d-flex\">\r\n    <div class=\"d-flex align-items-start align-items-lg-center flex-column flex-lg-row gap-lg-0 gap-3\"\r\n      [ngClass]=\"data?.content?.socialLinks?.display ? 'justify-content-between' : 'justify-content-end'\">\r\n      <div class=\"d-flex mt-0\" *ngIf=\"data?.content?.socialLinks?.display\">\r\n        <ng-container *ngFor=\"let item of data?.content?.socialLinks?.channels\">\r\n          <div style=\"position: relative;margin-right: 10px;\">\r\n            <simpo-socia-icons [socialIconData]=\"item\" [color]=\"data?.styles?.background?.accentColor\" [sectionId]=\"data?.id\"></simpo-socia-icons>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #ActionBtn>\r\n  <div class=\"button-parent\">\r\n    <div class=\"out-of-stock\" *ngIf=\"isItemOutOfStock\">Out of Stock</div>\r\n    <div class=\"quantity\" *ngIf=\"responseData?.quantity\">\r\n      <div class=\"plus\" (click)=\"addToCart('SUBSTRACT')\">-</div>\r\n      <div style=\"width: 50px;\" class=\"d-flex justify-content-center\">{{responseData.quantity}}</div>\r\n      <div class=\"minus\" (click)=\"addToCart('ADD')\">+</div>\r\n    </div>\r\n    <div *ngIf=\"!responseData?.quantity && !isItemOutOfStock\">\r\n      <button class=\"send-btn\" simpoButtonDirective [id]=\"buttonId\" [buttonStyle]=\"button?.styles\"\r\n        [color]=\"data?.styles?.background?.accentColor\"\r\n        (click)=\"addToCart()\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"favourite\">\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"addToFavourite()\"\r\n        *ngIf=\"!isItemAsFavorite\">favorite_border</mat-icon>\r\n      <mat-icon [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"removeToFavourite()\"\r\n        *ngIf=\"isItemAsFavorite\">favorite</mat-icon>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #ProductDesc>\r\n  <div class=\"heading-large trim-text\">{{responseData?.name}}</div>\r\n  <div class=\"d-flex\" style=\"gap: 10px; align-items: center; margin-top: 15px;\">\r\n    <div class=\"price\" [ngClass]=\"{'discount-price': responseData?.price?.discountedPrice}\"\r\n      *ngIf=\"responseData?.price?.discountedPrice != responseData?.price?.value\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.value}}</div>\r\n    <div class=\"price\" *ngIf=\"responseData?.price?.discountedPrice\"><span [innerHTML]='currency'></span>\r\n      {{responseData?.price?.discountedPrice}}</div>\r\n    <div class=\"tax-text\">(excluding all taxes)</div>\r\n  </div>\r\n\r\n</ng-template>\r\n\r\n<ng-template #ImageSection>\r\n  <ng-container *ngIf=\"!varientLoading\">\r\n    <div class=\"img-list\" *ngIf=\"screenWidth > 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\"\r\n          [style.borderColor]=\"img.imgUrl == currentImg ? data?.styles?.background?.accentColor : 'transparent'\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"item-img\">\r\n      <ng-container *ngIf=\"currentImg\">\r\n        \r\n        <mat-icon class=\"share-icon\" (click)=\"shareProduct()\">share</mat-icon>\r\n        <ng-container *ngIf=\"!isMobile\">\r\n          <lib-ngx-image-zoom [thumbImage]=\"currentImg\" [fullImage]=\"currentImg\" [zoomMode]=\"'hover'\" [magnification]=\"2\"\r\n            [lensHeight]=\"100\" [lensWidth]=\"100\" style=\"height: 100%; width: 100%;\"></lib-ngx-image-zoom>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"isMobile\">\r\n          <img loading=\"lazy\" [src]=\"currentImg\" alt=\"\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!currentImg\">\r\n        <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\">\r\n      </ng-container>\r\n    </div>\r\n    <div class=\"img-list\" *ngIf=\"screenWidth <= 500\">\r\n      <ng-container *ngFor=\"let img of itemImages\">\r\n        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"img.imgUrl\"\r\n          alt=\"\" class=\"img\" (click)=\"changeImg(img.imgUrl)\">\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\r\n  <div class=\"item-img\" *ngIf=\"varientLoading\">\r\n    <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n      width: '100%',\r\n      height: '100%',\r\n      'border-radius': '10px',\r\n      'position': 'relative',\r\n      'right': '5px'\r\n    }\">\r\n    </ngx-skeleton-loader>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n\r\n\r\n<!-- <div class=\"modal fade\" id=\"itemVarients\" tabindex=\"-1\" aria-labelledby=\"itemVarients\" aria-hidden=\"true\">\r\n  <div class=\"modal-dialog\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">Right-to-Left Modal</h5>\r\n        <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n      </div>\r\n      <div class=\"modal-body\">\r\n        This content is aligned from right to left.\r\n      </div>\r\n      <div class=\"modal-footer\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" data-bs-dismiss=\"modal\">Close</button>\r\n        <button type=\"button\" class=\"btn btn-primary\">Save changes</button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div> -->", styles: [".product-desc{display:flex}.share-icon{border:1.5px solid rgba(211,211,211,.382);position:absolute;top:10px;right:10px;z-index:1;opacity:.5;border-radius:50%;padding:5px;height:30px;width:30px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:#00000003 0 1px 2px;cursor:pointer}.row{margin-top:25px}.prod-img-block{height:100%;display:flex;gap:5px}.img-list{display:flex;flex-direction:column;gap:5px;height:100%;overflow:scroll}.img-list img{height:100px;width:100%;cursor:pointer}ngx-image-zoom{display:inline-block;position:relative}.ngx-image-zoom__zoomed{z-index:9999;max-width:100%;max-height:100%;object-fit:contain}.item-img{position:relative;width:500px;height:100%;overflow:hidden}.item-img img{width:100%!important;height:100%!important}.fast-checkout{position:absolute;top:10px;right:10px;display:flex;gap:10px;width:fit-content}.fast-checkout img{cursor:pointer}.selling-fast-tag{background-color:#fff;color:#000;padding:5px 10px;border-radius:3px;font-weight:700}.price{font-weight:600;font-family:Poppins;font-size:20px}.product-desc{margin-top:15px}.button-parent{margin-top:15px;display:flex;gap:10px;align-items:center}.quantity{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px;width:155px;justify-content:space-between;margin-top:1rem;border-radius:5px}.quantity .plus{position:relative;left:10px;font-size:18px;font-weight:600;cursor:pointer;color:#848484}.quantity .minus{position:relative;right:15px;font-size:18px;font-weight:600;color:#848484;cursor:pointer}.quantity input{width:60px;border:none;outline:none;text-align:center}.trim-text{-webkit-line-clamp:3!important}.product-sku{margin-top:20px}.product-sku div{font-weight:400;font-size:15px;color:#848484;font-family:Poppins;margin-top:.5rem}.tab-group{display:flex;gap:10px;overflow-y:scroll}.tab{font-family:Poppins;font-weight:500;font-size:18px;color:#222;padding-bottom:2px;border-bottom:1px solid black}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.img-list>img{border:2px solid transparent;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;padding:15px 20px;border-radius:5px;margin-top:15px}.varient-key{font-weight:500;font-size:16px;margin-top:10px;margin-bottom:5px}.varient-tag{background-color:#fff;color:#000;border-radius:3px;border:1px solid #d3d3d347;margin-right:5px;padding:5px 15px;cursor:pointer}.send-btn{display:flex;border:2px solid #E6E6E6;align-items:center;gap:15px;height:50px!important;width:130px!important;justify-content:space-between;margin-top:1rem;border-radius:5px}.disable-varient{text-decoration:line-through;cursor:not-allowed}.review-sec{box-shadow:#00000029 0 1px 4px;width:100%;padding:20px;margin:20px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px}.review-sec .title{font-size:26px;margin-bottom:10px}.review-sec button{border-radius:20px!important;background-color:transparent;padding:5px 15px;width:fit-content!important;margin:auto}.review-sec hr{border-top:1.5px solid lightgray;width:100%}.review-sec .user-review{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%}.review-sec .user-review>div{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.review-sec .user-review>div input{width:80%;margin:auto;border-radius:20px;padding:10px 10px 10px 20px;border:1.5px solid lightgray}.review-sec .user-review>div textarea{width:80%;border-radius:5px;padding:10px;border:1.5px solid lightgray}.review-sec .user-review .review-action-btn{display:flex;flex-direction:row;gap:10px}.review-sec .user-review .review-action-btn button{width:fit-content!important;font-size:16px!important;margin:5px!important;border:1px solid transparent}.review-sec .user-review .secondary-text{font-size:18px}.product-detail{overflow-y:auto}.mobile-footer{display:none}@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:10001;background-color:#fff;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;color:#000;align-items:center;justify-content:center;gap:15px;width:20%}.mobile-footer .icons .mat-icon{font-size:26px}.total-container{padding-top:10px!important;padding-bottom:10px!important}.out-of-stock,.add-btn,.quantity{text-align:center;width:70%!important;border:none!important;padding:5px;margin-top:0!important}.quantity{border:1px solid rgba(211,211,211,.332)!important}.item-img{width:100%!important}.item-img img{width:100%;height:448px}.prod-img-block{flex-direction:column}.img-list{flex-direction:row;overflow-x:scroll}.img-list img{height:25%;width:25%;border:2px solid lightgray;cursor:pointer}.product-detail,.prod-desc{margin-top:20px}.product-img{height:220px}.send-btn{padding:.5rem 1rem!important}.favourite .mat-icon{padding:10px!important;position:relative!important;min-height:0px!important;height:43px!important;top:8px!important;min-width:52px!important}.review-sec :is(input,textarea){width:100%!important}}.send-btn{font-size:16px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.favourite .mat-icon{min-height:55px;min-width:55px;font-size:35px;display:flex;align-items:center;justify-content:center;border-radius:5px;padding:30px 25px 25px;position:relative;top:5px;cursor:pointer}a{text-decoration:none}.body-large{color:#848484}.total-container{height:auto;position:relative;display:block!important}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.modal-dialog{height:100vh;position:absolute;top:0;margin:0;right:0;border:none}.modal-content{height:100%;border:none;border-radius:0!important}\n"] }]
         }], ctorParameters: () => [{ type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -8547,7 +8557,7 @@ class UserProfileComponent extends BaseSection {
         return BUSINESS_CONSTANTS.CURRENCY;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$3.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i3.MatDialog }, { token: i5.MatBottomSheet }, { token: i2$2.CookieService }, { token: i7.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100\" style=\"margin: auto; overflow-y: auto;\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [style.color]=\"styles?.background?.accentColor\" [style.backgroundColor]=\"styles?.background?.color ?? 'white'\" [style.height.vh]=\"isMobile ? '100':'90'\" [style.zIndex]=\"isMobile ? '100000000' : ''\" [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3 profile-box\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.order]=\"styles?.swap ? '1' : '0'\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"  [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"font-weight-bold\" [style.color]=\"styles?.background?.accentColor\">{{getUserDetails?.contact?.name}}</h4>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.mobile?.length\">\r\n                        <mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span> \r\n                        <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('MOBILE')\">edit</mat-icon> -->\r\n                    </h6>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.email?.length\">\r\n                        <mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span> \r\n                        <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('EMAIL')\">edit</mat-icon> -->\r\n                    </h6>\r\n                </div>\r\n            </div>\r\n            <div class=\"tabs\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n                        <!-- <mat-icon [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.icon}}</mat-icon> -->\r\n                        <img [src]=\"tab.image | genderIcon\" alt=\"\" style=\"height: 20px;\" [style.color]=\"styles?.background?.accentColor\">\r\n                        <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"d-flex\" style=\"gap: 5px;\">\r\n                    <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                    <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\" [simpoBackground]=\"styles?.background\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\" *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\" [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\r\n                            </div>\r\n                            \r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>    \r\n                    </div>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                \r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\r\n    <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                  <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                  </div>\r\n                  <div class=\"cart-text\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\" (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h1 class=\"title-text\">My Address</h1>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\" [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"address\" [style.width]=\"getProductWidth\">\r\n                    <div class=\"address-left\">\r\n                        <div class=\"top\">\r\n                            <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n                            <span class=\"address-type\">{{address.addressType}}</span>\r\n                        </div>\r\n                        <div class=\"address-det trim-text\">{{address.addressLine1}}</div>\r\n                        <div class=\"phone\">\r\n                            <span>Phone:</span>\r\n                            <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"address-right\">\r\n                        <mat-icon (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                        <mat-icon (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                  <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                  </div>\r\n                  <div class=\"cart-text\">\r\n                    <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery</div>\r\n                    <!-- </ng-container> -->\r\n                  </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\r\n        <div class=\"top\">\r\n            <span class=\"font-weight-normal\">{{order.orderNum}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.createdTimeStamp | date: 'medium'}}</span>\r\n            <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"font-weight-normal\">Amount: <span> <span [innerHTML]=\"currency\"></span> {{ order.billDetails.totalGrossValue }}</span></span>\r\n            <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #WishlistDetails>\r\n    <h1 class=\"onlyDesktop\">My Wishlist</h1>\r\n    <div class=\"wishlist-list\">\r\n        <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"cart-items\">\r\n                    <div class=\"d-flex item-parent\">\r\n                    <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n                    </div>\r\n                    <div class=\"col-md-8 h-100 item-desc\">\r\n                        <div class=\"lh-23\">\r\n                        <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                        <div class=\"price-with-tax\">\r\n                            <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n                        </div>\r\n                        <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\r\n                            <div class=\"item-quantity\" *ngIf=\"item.quantity\">\r\n                                <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n                                <span>{{item.quantity}}</span>\r\n                                <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n                            </div>\r\n                            <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add to Quantity</div>\r\n                            <div class=\"item-quantity\" (click)=\"moveToCart(item)\">Move to Cart</div>\r\n                        </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"position-relative d-flex flex-column justify-content-between iemPrice\" style=\"right: 5px\">\r\n                        <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span> {{(item.discountedPrice) * item.quantity}}</div>\r\n                        <div>\r\n                        <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\" *ngIf=\"!isMobile\">delete</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n          </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\r\n              <div class=\"cart-image\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n              </div>\r\n              <div class=\"cart-text\">\r\n                <ng-container *ngFor=\"let text of content?.inputText\">\r\n                    <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\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<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;box-shadow:#0000000d 0 0 0 1px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:#0000000d 0 0 0 1px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;min-height:40vh;max-height:71vh;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{border:1px solid lightgray;box-shadow:#00000029 0 1px 4px}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}@media screen and (max-width: 475px){.title-text{font-size:24px}.tab-selected div{font-weight:600!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" [ngStyle]=\"{'height': isMobile ? '100vh' : '90vh', 'z-index': isMobile ? '100000000' : ''}\" [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3 profile-box\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.order]=\"styles?.swap ? '1' : '0'\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"  [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"font-weight-bold\" [style.color]=\"styles?.background?.accentColor\">{{getUserDetails?.contact?.name}}</h4>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.mobile?.length\">\r\n                        <mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span> \r\n                        <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('MOBILE')\">edit</mat-icon> -->\r\n                    </h6>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.email?.length\">\r\n                        <mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span> \r\n                        <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('EMAIL')\">edit</mat-icon> -->\r\n                    </h6>\r\n                </div>\r\n            </div>\r\n            <div class=\"tabs\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n                        <!-- <mat-icon [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.icon}}</mat-icon> -->\r\n                        <img [src]=\"tab.image | genderIcon\" alt=\"\" style=\"height: 20px;\" [style.color]=\"styles?.background?.accentColor\">\r\n                        <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"d-flex\" style=\"gap: 5px;\">\r\n                    <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                    <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\" [simpoBackground]=\"styles?.background\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\" *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\" [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\r\n                            </div>\r\n                            \r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>    \r\n                    </div>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                \r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\r\n    <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                  <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                  </div>\r\n                  <div class=\"cart-text\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\" (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h1 class=\"title-text\">My Address</h1>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\" [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"address\" [style.width]=\"getProductWidth\">\r\n                    <div class=\"address-left\">\r\n                        <div class=\"top\">\r\n                            <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n                            <span class=\"address-type\">{{address.addressType}}</span>\r\n                        </div>\r\n                        <div class=\"address-det trim-text\">{{address.addressLine1}}</div>\r\n                        <div class=\"phone\">\r\n                            <span>Phone:</span>\r\n                            <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"address-right\">\r\n                        <mat-icon (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                        <mat-icon (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                  <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                  </div>\r\n                  <div class=\"cart-text\">\r\n                    <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery</div>\r\n                    <!-- </ng-container> -->\r\n                  </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\r\n        <div class=\"top\">\r\n            <span class=\"font-weight-normal\">{{order.orderNum}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.createdTimeStamp | date: 'medium'}}</span>\r\n            <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"font-weight-normal\">Amount: <span> <span [innerHTML]=\"currency\"></span> {{ order.billDetails.totalGrossValue }}</span></span>\r\n            <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #WishlistDetails>\r\n    <h1 class=\"onlyDesktop\">My Wishlist</h1>\r\n    <div class=\"wishlist-list\">\r\n        <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"cart-items\">\r\n                    <div class=\"d-flex item-parent\">\r\n                    <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n                    </div>\r\n                    <div class=\"col-md-8 h-100 item-desc\">\r\n                        <div class=\"lh-23\">\r\n                        <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                        <div class=\"price-with-tax\">\r\n                            <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n                        </div>\r\n                        <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\r\n                            <div class=\"item-quantity\" *ngIf=\"item.quantity\">\r\n                                <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n                                <span>{{item.quantity}}</span>\r\n                                <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n                            </div>\r\n                            <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add to Quantity</div>\r\n                            <div class=\"item-quantity\" (click)=\"moveToCart(item)\">Move to Cart</div>\r\n                        </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"position-relative d-flex flex-column justify-content-between iemPrice\" style=\"right: 5px\">\r\n                        <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span> {{(item.discountedPrice) * item.quantity}}</div>\r\n                        <div>\r\n                        <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\" *ngIf=\"!isMobile\">delete</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n          </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\r\n              <div class=\"cart-image\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n              </div>\r\n              <div class=\"cart-text\">\r\n                <ng-container *ngFor=\"let text of content?.inputText\">\r\n                    <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\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<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;box-shadow:#0000000d 0 0 0 1px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:#0000000d 0 0 0 1px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;min-height:40vh;max-height:71vh;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{border:1px solid lightgray;box-shadow:#00000029 0 1px 4px}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}@media screen and (max-width: 475px){.title-text{font-size:24px}.tab-selected div{font-weight:600!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i2.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i13.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i13$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: UserProfileComponent, decorators: [{
             type: Component,
@@ -8568,7 +8578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         MatBottomSheetModule,
                         ToastModule,
                         GenderIcon
-                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100\" style=\"margin: auto; overflow-y: auto;\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [style.color]=\"styles?.background?.accentColor\" [style.backgroundColor]=\"styles?.background?.color ?? 'white'\" [style.height.vh]=\"isMobile ? '100':'90'\" [style.zIndex]=\"isMobile ? '100000000' : ''\" [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3 profile-box\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.order]=\"styles?.swap ? '1' : '0'\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"  [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"font-weight-bold\" [style.color]=\"styles?.background?.accentColor\">{{getUserDetails?.contact?.name}}</h4>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.mobile?.length\">\r\n                        <mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span> \r\n                        <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('MOBILE')\">edit</mat-icon> -->\r\n                    </h6>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.email?.length\">\r\n                        <mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span> \r\n                        <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('EMAIL')\">edit</mat-icon> -->\r\n                    </h6>\r\n                </div>\r\n            </div>\r\n            <div class=\"tabs\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n                        <!-- <mat-icon [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.icon}}</mat-icon> -->\r\n                        <img [src]=\"tab.image | genderIcon\" alt=\"\" style=\"height: 20px;\" [style.color]=\"styles?.background?.accentColor\">\r\n                        <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"d-flex\" style=\"gap: 5px;\">\r\n                    <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                    <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\" [simpoBackground]=\"styles?.background\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\" *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\" [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\r\n                            </div>\r\n                            \r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>    \r\n                    </div>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                \r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\r\n    <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                  <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                  </div>\r\n                  <div class=\"cart-text\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\" (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h1 class=\"title-text\">My Address</h1>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\" [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"address\" [style.width]=\"getProductWidth\">\r\n                    <div class=\"address-left\">\r\n                        <div class=\"top\">\r\n                            <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n                            <span class=\"address-type\">{{address.addressType}}</span>\r\n                        </div>\r\n                        <div class=\"address-det trim-text\">{{address.addressLine1}}</div>\r\n                        <div class=\"phone\">\r\n                            <span>Phone:</span>\r\n                            <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"address-right\">\r\n                        <mat-icon (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                        <mat-icon (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                  <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                  </div>\r\n                  <div class=\"cart-text\">\r\n                    <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery</div>\r\n                    <!-- </ng-container> -->\r\n                  </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\r\n        <div class=\"top\">\r\n            <span class=\"font-weight-normal\">{{order.orderNum}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.createdTimeStamp | date: 'medium'}}</span>\r\n            <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"font-weight-normal\">Amount: <span> <span [innerHTML]=\"currency\"></span> {{ order.billDetails.totalGrossValue }}</span></span>\r\n            <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #WishlistDetails>\r\n    <h1 class=\"onlyDesktop\">My Wishlist</h1>\r\n    <div class=\"wishlist-list\">\r\n        <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"cart-items\">\r\n                    <div class=\"d-flex item-parent\">\r\n                    <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n                    </div>\r\n                    <div class=\"col-md-8 h-100 item-desc\">\r\n                        <div class=\"lh-23\">\r\n                        <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                        <div class=\"price-with-tax\">\r\n                            <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n                        </div>\r\n                        <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\r\n                            <div class=\"item-quantity\" *ngIf=\"item.quantity\">\r\n                                <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n                                <span>{{item.quantity}}</span>\r\n                                <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n                            </div>\r\n                            <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add to Quantity</div>\r\n                            <div class=\"item-quantity\" (click)=\"moveToCart(item)\">Move to Cart</div>\r\n                        </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"position-relative d-flex flex-column justify-content-between iemPrice\" style=\"right: 5px\">\r\n                        <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span> {{(item.discountedPrice) * item.quantity}}</div>\r\n                        <div>\r\n                        <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\" *ngIf=\"!isMobile\">delete</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n          </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\r\n              <div class=\"cart-image\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n              </div>\r\n              <div class=\"cart-text\">\r\n                <ng-container *ngFor=\"let text of content?.inputText\">\r\n                    <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\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<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;box-shadow:#0000000d 0 0 0 1px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:#0000000d 0 0 0 1px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;min-height:40vh;max-height:71vh;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{border:1px solid lightgray;box-shadow:#00000029 0 1px 4px}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}@media screen and (max-width: 475px){.title-text{font-size:24px}.tab-selected div{font-weight:600!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}\n"] }]
+                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100\" [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"styles?.layout\" [simpoBackground]=\"styles?.background\" [ngStyle]=\"{'height': isMobile ? '100vh' : '90vh', 'z-index': isMobile ? '100000000' : ''}\" [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\" (click)=\"editSection()\" [attr.style]=\"customClass\">\r\n    <ng-container *ngIf=\"!isMobile\">\r\n        <div class=\"p-3 profile-box\" style=\"width: 25%; border-radius: 10px; height: fit-content;\" [style.order]=\"styles?.swap ? '1' : '0'\">\r\n            <div class=\"d-flex align-items-center\" style=\"gap: 5px; height: 70px;\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"  [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100\" style=\"width: 70px;\">\r\n                <div>\r\n                    <h4 class=\"font-weight-bold\" [style.color]=\"styles?.background?.accentColor\">{{getUserDetails?.contact?.name}}</h4>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.mobile?.length\">\r\n                        <mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span> \r\n                        <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('MOBILE')\">edit</mat-icon> -->\r\n                    </h6>\r\n                    <h6 class=\"d-flex align-items-center font-weight-normal position-relative\" [style.color]=\"styles?.background?.accentColor\" *ngIf=\"getUserDetails?.contact?.email?.length\">\r\n                        <mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span> \r\n                        <!-- <mat-icon class=\"edit-icon\" (click)=\"editProfileData('EMAIL')\">edit</mat-icon> -->\r\n                    </h6>\r\n                </div>\r\n            </div>\r\n            <div class=\"tabs\">\r\n                <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                    <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\">\r\n                        <!-- <mat-icon [style.color]=\"getSupportingColor(getCardBGColor)\">{{tab.icon}}</mat-icon> -->\r\n                        <img [src]=\"tab.image | genderIcon\" alt=\"\" style=\"height: 20px;\" [style.color]=\"styles?.background?.accentColor\">\r\n                        <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\r\n                    </div>\r\n                </ng-container>\r\n                <div class=\"d-flex\" style=\"gap: 5px;\">\r\n                    <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                    <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n        <div class=\"orders-sec\" [simpoBorder]=\"styles?.border\" [style.order]=\"styles?.swap ? '0' : '1'\" [simpoBackground]=\"styles?.background\">\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isMobile\">\r\n        <div class=\"w-100 position-relative\" style=\"height: 80vh;\">\r\n            <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\">\r\n                <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\" (click)=\"goBack()\">keyboard_backspace</mat-icon>\r\n                <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\r\n            </div>\r\n            <ng-container [ngSwitch]=\"selectedSidePanelTab\">\r\n                <ng-container *ngSwitchCase=\"''\">\r\n                    <section class=\"top-sec\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\" [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\" style=\"width: 50px; height: 50px;\">\r\n                        <div class=\"d-flex flex-column align-items-center\">\r\n                            <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\"><mat-icon>stay_primary_portrait</mat-icon> <span>{{getUserDetails?.contact?.mobile}}</span></h6>\r\n                            <h6 class=\"d-flex align-items-center font-weight-normal\" *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon> <span>{{getUserDetails?.contact?.email}}</span></h6>\r\n                        </div>\r\n                    </section>\r\n                    <section class=\"list-sec\">\r\n                        <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n                            <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\" [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\" [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n                                <img [src]=\"tab.image | genderIcon\" alt=\"\" [style.color]=\"styles?.background?.accentColor\">\r\n                                <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">{{tab.value}}</div>\r\n                            </div>\r\n                            \r\n                        </ng-container>\r\n                    </section>\r\n                    <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\r\n                        <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n                        <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\" [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>    \r\n                    </div>\r\n                </ng-container>\r\n                \r\n                <ng-container *ngSwitchCase=\"'Orders'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Address'\">\r\n                    <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Account Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Logout'\">\r\n                    <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Wishlist'\">\r\n                    <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\r\n                </ng-container>\r\n                <ng-container *ngSwitchCase=\"'Orders_Details'\">\r\n                    <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\r\n                </ng-container>\r\n                \r\n            </ng-container>\r\n        </div>\r\n    </ng-container>\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n    <h1 class=\"onlyDesktop\">My Orders</h1>\r\n    <div class=\"d-flex my-3 orderlist onlyDesktop\">\r\n        <ng-container *ngFor=\"let tab of tabs\">\r\n            <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">{{tab.value}}</div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"order-list\">\r\n        <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\r\n            <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\r\n                <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\r\n            </div>\r\n        </ng-container>\r\n        <ng-template #showEmptyScreen>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                  <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n                  </div>\r\n                  <div class=\"cart-text\">\r\n                    <ng-container *ngFor=\"let text of content?.inputText\">\r\n                        <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n                    </ng-container>\r\n                  </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #OrderDetails>\r\n    <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\" (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\r\n</ng-template>\r\n<ng-template #AddressSection>\r\n    <div class=\"d-flex justify-content-between mb-2\">\r\n        <h1 class=\"title-text\">My Address</h1>\r\n        <button class=\"address-btn\" (click)=\"addNewAddress()\" [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\r\n    </div>\r\n    <div class=\"address-list\">\r\n        <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\r\n            <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\r\n                <div class=\"address\" [style.width]=\"getProductWidth\">\r\n                    <div class=\"address-left\">\r\n                        <div class=\"top\">\r\n                            <span class=\"fw-bold mr-2\">{{address.receiverName}}</span>\r\n                            <span class=\"address-type\">{{address.addressType}}</span>\r\n                        </div>\r\n                        <div class=\"address-det trim-text\">{{address.addressLine1}}</div>\r\n                        <div class=\"phone\">\r\n                            <span>Phone:</span>\r\n                            <span class=\"address-phone\">{{address.receiverPhone}}</span>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"address-right\">\r\n                        <mat-icon (click)=\"editAddress(idx)\">edit</mat-icon>\r\n                        <mat-icon (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-template #showEmptyAddress>\r\n            <section class=\"empty-cart m-auto\">\r\n                <div>\r\n                  <div class=\"cart-image\">\r\n                    <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\r\n                  </div>\r\n                  <div class=\"cart-text\">\r\n                    <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\r\n                        <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\r\n                        <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery</div>\r\n                    <!-- </ng-container> -->\r\n                  </div>\r\n                </div>\r\n            </section>\r\n        </ng-template>\r\n    </div>\r\n</ng-template>\r\n<ng-template #AccountsSection>\r\n    <h1 class=\"onlyDesktop\">My Accounts</h1>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n    <h1 class=\"onlyDesktop\">Logout</h1>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n    <div (click)=\"goToOrderDetails(order)\" class=\"cursor-pointer\">\r\n        <div class=\"top\">\r\n            <span class=\"font-weight-normal\">{{order.orderNum}}</span>\r\n            <mat-icon>arrow_forward_ios</mat-icon>\r\n        </div>\r\n        <div class=\"middle my-2\">\r\n            <span>{{order.createdTimeStamp | date: 'medium'}}</span>\r\n            <span class=\"font-weight-bold\">{{order?.brandOrderDetails?.[0]?.brandName | titlecase}}</span>\r\n        </div>\r\n        <hr />\r\n        <div class=\"bottom\">\r\n            <span class=\"font-weight-normal\">Amount: <span> <span [innerHTML]=\"currency\"></span> {{ order.billDetails.totalGrossValue }}</span></span>\r\n            <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">{{ order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | uppercase }}</span>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #WishlistDetails>\r\n    <h1 class=\"onlyDesktop\">My Wishlist</h1>\r\n    <div class=\"wishlist-list\">\r\n        <div class=\"d-flex flex-wrap justify-content-between\" style=\"gap: 10px;\">\r\n            <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n                <div class=\"cart-items\">\r\n                    <div class=\"d-flex item-parent\">\r\n                    <div class=\"h-100\" style=\"padding: 0px; width: fit-content;\">\r\n                        <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   class=\"product-img\" [src]=\"item.imgUrl\" alt=\"\">\r\n                    </div>\r\n                    <div class=\"col-md-8 h-100 item-desc\">\r\n                        <div class=\"lh-23\">\r\n                        <div class=\"item-name heading-large\">{{item.itemName}}</div>\r\n                        <div class=\"price-with-tax\">\r\n                            <span [innerHTML]='currency'></span> {{item.discountedPrice}}\r\n                        </div>\r\n                        <div class=\"d-flex action-btn\" style=\"gap: 5px;\">\r\n                            <div class=\"item-quantity\" *ngIf=\"item.quantity\">\r\n                                <span class=\"cursor\" (click)=\"addToFav(item, 'SUBSTRACT')\">-</span>\r\n                                <span>{{item.quantity}}</span>\r\n                                <span class=\"cursor\" (click)=\"addToFav(item, 'ADD')\">+</span>\r\n                            </div>\r\n                            <div class=\"item-quantity\" *ngIf=\"!item.quantity\" (click)=\"addToFav(item, 'ADD')\">Add to Quantity</div>\r\n                            <div class=\"item-quantity\" (click)=\"moveToCart(item)\">Move to Cart</div>\r\n                        </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"position-relative d-flex flex-column justify-content-between iemPrice\" style=\"right: 5px\">\r\n                        <div class=\"item-price\" *ngIf=\"item.quantity\"><span [innerHTML]='currency'></span> {{(item.discountedPrice) * item.quantity}}</div>\r\n                        <div>\r\n                        <mat-icon class=\"delete-item\" (click)=\"deleteFromWhislist(item)\" *ngIf=\"!isMobile\">delete</mat-icon>\r\n                        </div>\r\n                    </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n          </div>\r\n    </div>\r\n    <ng-template #showEmptyWishlistScreen>\r\n        <section class=\"empty-cart m-auto\">\r\n            <div>\r\n              <div class=\"cart-image\">\r\n                <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"   [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n              </div>\r\n              <div class=\"cart-text\">\r\n                <ng-container *ngFor=\"let text of content?.inputText\">\r\n                    <div class=\"heading-medium d-flex justify-content-center\" [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">{{ text.value }}</div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n        </section>\r\n    </ng-template>\r\n</ng-template>\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<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\" [isEcommerce]=\"true\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div>", styles: [".mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;margin-right:20px;padding:15px;overflow-y:auto;border:1px solid #d3d3d324;box-shadow:#0000000d 0 0 0 1px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order{border:1px solid lightgray;padding:15px;border-radius:5px;margin:10px 0;box-shadow:#0000000d 0 0 0 1px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;min-height:40vh;max-height:71vh;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{border:1px solid lightgray;box-shadow:#00000029 0 1px 4px}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}@media screen and (max-width: 475px){.title-text{font-size:24px}.tab-selected div{font-weight:600!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:10px;width:100vw;margin-bottom:40px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}\n"] }]
         }], ctorParameters: () => [{ type: i2$3.Router }, { type: EventsService }, { type: RestService }, { type: StorageServiceService }, { type: CartService }, { type: i3.MatDialog }, { type: i5.MatBottomSheet }, { type: i2$2.CookieService }, { type: i7.MessageService }], propDecorators: { data: [{
                 type: Input
             }], index: [{
@@ -8698,10 +8708,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
             }] } });
 
 class ProductCategoryListComponent extends BaseSection {
-    constructor(restService, cartService, activatedRoute) {
+    constructor(restService, cartService, _eventService, activatedRoute) {
         super();
         this.restService = restService;
         this.cartService = cartService;
+        this._eventService = _eventService;
         this.activatedRoute = activatedRoute;
         this.categories = [];
         this.productList = [];
@@ -8809,6 +8820,14 @@ class ProductCategoryListComponent extends BaseSection {
         let b = bigint & 255;
         return `rgba(${r}, ${g}, ${b}, 0.4)`;
     }
+    editSection() {
+        if (window.innerWidth <= 475)
+            return;
+        this._eventService.toggleEditorEvent.emit(false);
+        setTimeout(() => {
+            this._eventService.editSection.emit({ data: this.data });
+        }, 100);
+    }
     get getSpacingLayout() {
         return { ...this.styles?.layout };
     }
@@ -8821,8 +8840,8 @@ class ProductCategoryListComponent extends BaseSection {
     get currency() {
         return BUSINESS_CONSTANTS.CURRENCY;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductCategoryListComponent, deps: [{ token: RestService }, { token: CartService }, { token: i2$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductCategoryListComponent, isStandalone: true, selector: "simpo-product-category-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, viewQueries: [{ propertyName: "productListContainer", first: true, predicate: ["productListContainer"], descendants: true }, { propertyName: "productCategoryListSection", first: true, predicate: ["productCategoryList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"d-flex\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [ngClass]=\"{'removeAllPadding justify-content-between': isMobile}\" [attr.style]=\"customClass\" #productCategoryList>\r\n    <div class=\"filter-panel\">\r\n        <ng-container *ngFor=\"let category of categories\">\r\n            <div class=\"category\" [style.backgroundColor]=\"(category.categoryId == selectedCategory?.categoryId) ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\" [style.borderColor]=\"(category.categoryId == selectedCategory?.categoryId) ? styles?.background?.accentColor : ''\"\r\n                (click)=\"selectCategory(category)\">\r\n                <div class=\"product-img\">\r\n                    <img [src]=\"category.imgUrl?.[0]\" alt=\"\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\">\r\n                </div>\r\n                <span class=\"trim-text\" [style.fontWeight]=\"(category.categoryId == selectedCategory?.categoryId) ? '700' : ''\">{{ category.categoryName }}</span>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"product-list-container\" [simpoBackground]=\"styles?.background\">\r\n        <h2 [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"!isMobile\">Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\r\n\r\n        <section class=\"d-flex product-list\" *ngIf=\"!apiLoading\" #productListContainer>\r\n            <ng-container *ngFor=\"let product of productList\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\" [isCategoryProductList]=\"true\" [style.width.%]=\"isMobile ? '48' : ''\"></simpo-small-product-listing>\r\n            </ng-container>\r\n        </section>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n    </div>\r\n</section>\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div>\r\n", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:18%}.removeAllPadding{padding:0!important}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.product-img{height:45px;width:45px;padding:0;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:0 20px;width:80%}.product-list{overflow:auto;flex-wrap:wrap;height:90vh;border-radius:0 10px 10px/0px 10px 10px;gap:8px}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px 10px;font-weight:700}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;padding:5px!important;border-left:none!important}.category .trim-text{text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: 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: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductCategoryListComponent, deps: [{ token: RestService }, { token: CartService }, { token: EventsService }, { token: i2$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: ProductCategoryListComponent, isStandalone: true, selector: "simpo-product-category-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, viewQueries: [{ propertyName: "productListContainer", first: true, predicate: ["productListContainer"], descendants: true }, { propertyName: "productCategoryListSection", first: true, predicate: ["productCategoryList"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"d-flex\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [ngClass]=\"{'removeAllPadding justify-content-between': isMobile}\" [attr.style]=\"customClass\" #productCategoryList (click)=\"editSection()\">\r\n    <div class=\"filter-panel\">\r\n        <ng-container *ngFor=\"let category of categories\">\r\n            <div class=\"category\" [style.backgroundColor]=\"(category.categoryId == selectedCategory?.categoryId) ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\" [style.borderColor]=\"(category.categoryId == selectedCategory?.categoryId) ? styles?.background?.accentColor : ''\"\r\n                (click)=\"selectCategory(category)\">\r\n                <div class=\"product-img\">\r\n                    <img [src]=\"category.imgUrl?.[0]\" alt=\"\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\">\r\n                </div>\r\n                <span class=\"trim-text\" [style.fontWeight]=\"(category.categoryId == selectedCategory?.categoryId) ? '700' : ''\">{{ category.categoryName }}</span>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"product-list-container\" [simpoBackground]=\"styles?.background\">\r\n        <h2 [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"!isMobile\">Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\r\n\r\n        <section class=\"d-flex product-list\" *ngIf=\"!apiLoading\" #productListContainer>\r\n            <ng-container *ngFor=\"let product of productList\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\" [isCategoryProductList]=\"true\" [style.width.%]=\"isMobile ? '48' : ''\"></simpo-small-product-listing>\r\n            </ng-container>\r\n        </section>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n    </div>\r\n</section>\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div>\r\n", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:18%}.removeAllPadding{padding:0!important}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.product-img{height:45px;width:45px;padding:0;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:0 20px;width:80%}.product-list{overflow:auto;flex-wrap:wrap;height:90vh;border-radius:0 10px 10px/0px 10px 10px;gap:8px}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px 10px;font-weight:700}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;padding:5px!important;border-left:none!important}.category .trim-text{text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: 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: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: ProductCategoryListComponent, decorators: [{
             type: Component,
@@ -8840,8 +8859,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                         SmallProductListingComponent,
                         ContentTitleDirective,
                         CardSkeletonLoaderComponent
-                    ], template: "<section class=\"d-flex\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [ngClass]=\"{'removeAllPadding justify-content-between': isMobile}\" [attr.style]=\"customClass\" #productCategoryList>\r\n    <div class=\"filter-panel\">\r\n        <ng-container *ngFor=\"let category of categories\">\r\n            <div class=\"category\" [style.backgroundColor]=\"(category.categoryId == selectedCategory?.categoryId) ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\" [style.borderColor]=\"(category.categoryId == selectedCategory?.categoryId) ? styles?.background?.accentColor : ''\"\r\n                (click)=\"selectCategory(category)\">\r\n                <div class=\"product-img\">\r\n                    <img [src]=\"category.imgUrl?.[0]\" alt=\"\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\">\r\n                </div>\r\n                <span class=\"trim-text\" [style.fontWeight]=\"(category.categoryId == selectedCategory?.categoryId) ? '700' : ''\">{{ category.categoryName }}</span>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"product-list-container\" [simpoBackground]=\"styles?.background\">\r\n        <h2 [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"!isMobile\">Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\r\n\r\n        <section class=\"d-flex product-list\" *ngIf=\"!apiLoading\" #productListContainer>\r\n            <ng-container *ngFor=\"let product of productList\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\" [isCategoryProductList]=\"true\" [style.width.%]=\"isMobile ? '48' : ''\"></simpo-small-product-listing>\r\n            </ng-container>\r\n        </section>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n    </div>\r\n</section>\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div>\r\n", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:18%}.removeAllPadding{padding:0!important}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.product-img{height:45px;width:45px;padding:0;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:0 20px;width:80%}.product-list{overflow:auto;flex-wrap:wrap;height:90vh;border-radius:0 10px 10px/0px 10px 10px;gap:8px}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px 10px;font-weight:700}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;padding:5px!important;border-left:none!important}.category .trim-text{text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"] }]
-        }], ctorParameters: () => [{ type: RestService }, { type: CartService }, { type: i2$3.ActivatedRoute }], propDecorators: { responseData: [{
+                    ], template: "<section class=\"d-flex\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n    [simpoBackground]=\"styles?.background\" [simpoLayout]=\"styles?.layout\" [ngClass]=\"{'removeAllPadding justify-content-between': isMobile}\" [attr.style]=\"customClass\" #productCategoryList (click)=\"editSection()\">\r\n    <div class=\"filter-panel\">\r\n        <ng-container *ngFor=\"let category of categories\">\r\n            <div class=\"category\" [style.backgroundColor]=\"(category.categoryId == selectedCategory?.categoryId) ? getSupportingColor(styles?.background?.accentColor ?? '#000000') : ''\" [style.borderColor]=\"(category.categoryId == selectedCategory?.categoryId) ? styles?.background?.accentColor : ''\"\r\n                (click)=\"selectCategory(category)\">\r\n                <div class=\"product-img\">\r\n                    <img [src]=\"category.imgUrl?.[0]\" alt=\"\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\">\r\n                </div>\r\n                <span class=\"trim-text\" [style.fontWeight]=\"(category.categoryId == selectedCategory?.categoryId) ? '700' : ''\">{{ category.categoryName }}</span>\r\n            </div>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"product-list-container\" [simpoBackground]=\"styles?.background\">\r\n        <h2 [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"!isMobile\">Buy {{ selectedCategory?.categoryName | titlecase }} Online</h2>\r\n\r\n        <section class=\"d-flex product-list\" *ngIf=\"!apiLoading\" #productListContainer>\r\n            <ng-container *ngFor=\"let product of productList\">\r\n                <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"true\" [isCategoryProductList]=\"true\" [style.width.%]=\"isMobile ? '48' : ''\"></simpo-small-product-listing>\r\n            </ng-container>\r\n        </section>\r\n        <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n    </div>\r\n</section>\r\n<div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n</div>\r\n<div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n    <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n</div>\r\n", styles: [".filter-panel{border-right:2px solid rgba(211,211,211,.297);width:18%}.removeAllPadding{padding:0!important}.category{display:flex;align-items:center;gap:10px;padding:10px;border-left:5px solid transparent;cursor:pointer}.product-img{height:45px;width:45px;padding:0;border-radius:50%;background-color:#d3d3d3}.product-img img{height:100%;width:100%;border-radius:50%}.product-list-container{padding:0 20px;width:80%}.product-list{overflow:auto;flex-wrap:wrap;height:90vh;border-radius:0 10px 10px/0px 10px 10px;gap:8px}.product{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:10px;overflow:hidden;min-width:195px;max-width:195px;margin:10px;background-color:#fff}.product .prod-img{position:relative;height:200px;width:100%;overflow:hidden}.product .prod-img img{height:100%;width:100%;object-fit:cover}.product img:hover{-webkit-animation:scale-up-center .2s linear both;animation:scale-up-center .2s linear both}.styling{height:30px;width:30px;border-radius:50%;background-color:#fff;position:absolute;bottom:0;right:-12px}.strike-through{text-decoration:line-through;color:#d3d3d3;font-size:12px;margin-left:5px;position:relative}.add-to-cart{width:100%;cursor:pointer;background-color:#fff;border:1.5px solid #EF4C7B;border-radius:5px;color:#ef4c7b;padding:5px;text-align:center;display:flex;align-items:center}.add-to-cart .quantity-btn{background-color:#fb8dac7d;padding:5px 10px;font-weight:700}.add-to-cart .quantity{color:#ef4c7b}.discount{position:absolute;top:0;padding:5px;width:60px;text-align:center;font-size:12px;border-bottom-right-radius:3px}@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@keyframes scale-up-center{0%{-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:scale(1.08);transform:scale(1.08)}}@media screen and (max-width: 475px){.product-list-container{padding:5px!important}.category{flex-direction:column!important;padding:5px!important;border-left:none!important}.category .trim-text{text-align:center!important}.product{min-width:135px!important;max-width:135px!important;margin-left:0!important;margin-right:8px!important}}\n"] }]
+        }], ctorParameters: () => [{ type: RestService }, { type: CartService }, { type: EventsService }, { type: i2$3.ActivatedRoute }], propDecorators: { responseData: [{
                 type: Input
             }], data: [{
                 type: Input