simpo-component-library 3.6.165 → 3.6.167
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/ecommerce/sections/featured-products/featured-products.component.mjs +6 -3
- package/esm2022/lib/ecommerce/sections/user-profile/user-profile.component.mjs +3 -3
- package/esm2022/lib/sections/header-section/header-section.component.mjs +3 -3
- package/fesm2022/simpo-component-library.mjs +9 -6
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/authentication-required/authentication-required.component.d.ts +1 -1
- package/lib/ecommerce/sections/featured-products/featured-products.component.d.ts +1 -0
- package/lib/ecommerce/sections/product-desc/product-desc.component.d.ts +1 -1
- package/lib/elements/link-editor/link-editor.component.d.ts +1 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.167.tgz +0 -0
- package/simpo-component-library-3.6.165.tgz +0 -0
|
@@ -13736,7 +13736,7 @@ class HeaderSectionComponent {
|
|
|
13736
13736
|
this.router.navigate(['/list'], { queryParams: { category: this.selectedCategory?.categoryName, pageNo: 1 } });
|
|
13737
13737
|
}
|
|
13738
13738
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: i2$1.MatDialog }, { token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13739
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [style.height.px]=\"getParentHeight\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [ngClass]=\"{'box-shadow': isEcommerceWebsite}\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\"\r\n [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n <div>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n </div>\r\n <!-- <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container> -->\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount()\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"input-group w-50\" [ngStyle]=\"{'border' : '2px solid ' + accentColor}\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\" (click)=\"goToStores()\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" [style.borderColor]=\"accentColor\" *ngIf=\"storeAvaiable\">\r\n <mat-icon [style.color]=\"accentColor\">store</mat-icon>\r\n <span [style.color]=\"accentColor\">Stores</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" (click)=\"goToAccount()\" [style.backgroundColor]=\"accentColor\" *ngIf=\"!loggedIn\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">person_outline</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\"\r\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n {{ele?.categoryName | titlecase}}\r\n </div>\r\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n [style.color]=\"data?.styles?.background?.accentColor\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n Collections\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showList = false\" -->\r\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n <div class=\"list-header mb-3\">By Price</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n <div class=\"each-price cursor-pointer\"\r\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n {{price | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 overflow-scroll\"\r\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n <div class=\"list-header mb-3\">By Style</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n |\r\n titlecase}}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls; let i = index\">\r\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showCollections = false\" -->\r\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n <div class=\"collection row col-3 align-items-center\"\r\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n <div class=\"col-imag col-4\">\r\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"col-8 text-overflow\">\r\n {{collection?.collectionName | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls); let i = index\">\r\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;border-radius:12px;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:10px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;padding:6px 15px;border-radius:8px;cursor:pointer}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:after{content:\"\";position:absolute;bottom:0;left:50%;width:0;height:3px;background:var(--border-color);transition:all .3s ease;transform:translate(-50%)}.category:hover:after{width:100%}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:18px;font-weight:600}.list-item{gap:1rem;font-size:16px}.image-container img{border-radius:12px}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content}.text-overflow{overflow:hidden;text-overflow:ellipsis}.col-5{width:44.666667%}.h-10{height:10vh}.br-12{border-radius:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
|
|
13739
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [style.height.px]=\"getParentHeight\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [ngClass]=\"{'box-shadow': isEcommerceWebsite}\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\"\r\n [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n <div>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n </div>\r\n <!-- <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container> -->\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount()\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"input-group w-50\" [ngStyle]=\"{'border' : '2px solid ' + accentColor}\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\" [style.borderColor]=\"accentColor\" *ngIf=\"storeAvaiable\">\r\n <mat-icon [style.color]=\"accentColor\">store</mat-icon>\r\n <span [style.color]=\"accentColor\">Stores</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" (click)=\"goToAccount()\" [style.backgroundColor]=\"accentColor\" *ngIf=\"!loggedIn\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">person_outline</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\"\r\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n {{ele?.categoryName | titlecase}}\r\n </div>\r\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n [style.color]=\"data?.styles?.background?.accentColor\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n Collections\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showList = false\" -->\r\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n <div class=\"list-header mb-3\">By Price</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n <div class=\"each-price cursor-pointer\"\r\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n {{price | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 overflow-scroll\"\r\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n <div class=\"list-header mb-3\">By Style</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n |\r\n titlecase}}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls; let i = index\">\r\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showCollections = false\" -->\r\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n <div class=\"collection row col-3 align-items-center\"\r\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n <div class=\"col-imag col-4\">\r\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"col-8 text-overflow\">\r\n {{collection?.collectionName | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls); let i = index\">\r\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;border-radius:12px;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:10px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;padding:6px 15px;border-radius:8px;cursor:pointer}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:after{content:\"\";position:absolute;bottom:0;left:50%;width:0;height:3px;background:var(--border-color);transition:all .3s ease;transform:translate(-50%)}.category:hover:after{width:100%}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:18px;font-weight:600}.list-item{gap:1rem;font-size:16px}.image-container img{border-radius:12px}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content}.text-overflow{overflow:hidden;text-overflow:ellipsis}.col-5{width:44.666667%}.h-10{height:10vh}.br-12{border-radius:12px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i3.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
|
|
13740
13740
|
}
|
|
13741
13741
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
|
|
13742
13742
|
type: Component,
|
|
@@ -13774,7 +13774,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
13774
13774
|
SpacingHorizontalDirective,
|
|
13775
13775
|
MovingTextComponent,
|
|
13776
13776
|
ContentFitDirective
|
|
13777
|
-
], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [style.height.px]=\"getParentHeight\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [ngClass]=\"{'box-shadow': isEcommerceWebsite}\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\"\r\n [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n <div>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n </div>\r\n <!-- <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container> -->\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount()\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"input-group w-50\" [ngStyle]=\"{'border' : '2px solid ' + accentColor}\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\" (click)=\"goToStores()\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" [style.borderColor]=\"accentColor\" *ngIf=\"storeAvaiable\">\r\n <mat-icon [style.color]=\"accentColor\">store</mat-icon>\r\n <span [style.color]=\"accentColor\">Stores</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" (click)=\"goToAccount()\" [style.backgroundColor]=\"accentColor\" *ngIf=\"!loggedIn\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">person_outline</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\"\r\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n {{ele?.categoryName | titlecase}}\r\n </div>\r\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n [style.color]=\"data?.styles?.background?.accentColor\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n Collections\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showList = false\" -->\r\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n <div class=\"list-header mb-3\">By Price</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n <div class=\"each-price cursor-pointer\"\r\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n {{price | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 overflow-scroll\"\r\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n <div class=\"list-header mb-3\">By Style</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n |\r\n titlecase}}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls; let i = index\">\r\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showCollections = false\" -->\r\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n <div class=\"collection row col-3 align-items-center\"\r\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n <div class=\"col-imag col-4\">\r\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"col-8 text-overflow\">\r\n {{collection?.collectionName | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls); let i = index\">\r\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;border-radius:12px;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:10px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;padding:6px 15px;border-radius:8px;cursor:pointer}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:after{content:\"\";position:absolute;bottom:0;left:50%;width:0;height:3px;background:var(--border-color);transition:all .3s ease;transform:translate(-50%)}.category:hover:after{width:100%}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:18px;font-weight:600}.list-item{gap:1rem;font-size:16px}.image-container img{border-radius:12px}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content}.text-overflow{overflow:hidden;text-overflow:ellipsis}.col-5{width:44.666667%}.h-10{height:10vh}.br-12{border-radius:12px}\n"] }]
|
|
13777
|
+
], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [style.height.px]=\"getParentHeight\" simpoHover\r\n (hovering)=\"showEditTabs($event)\">\r\n <div class=\"w-100\" #childContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\"\r\n [ngClass]=\"{'box-shadow': isEcommerceWebsite}\" [scrollValue]=\"isComponentMerged ? scrollValue : 0\"\r\n [simpoBackground]=\"backgroundInfo\" [simpoSticky]=\"isHeaderSticky\">\r\n <ng-container *ngIf=\"style?.headline?.display\">\r\n <div>\r\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\r\n </div>\r\n </ng-container>\r\n <div>\r\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\r\n </div>\r\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoLayout]=\"stylesLayout\"\r\n [isHeader]=\"true\" [id]=\"data?.id\">\r\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\r\n </div>\r\n </div>\r\n <!-- <ng-container *ngIf=\"isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\r\n </ng-container> -->\r\n </div>\r\n\r\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\r\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n</section>\r\n\r\n<ng-template #header1Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header2Template>\r\n <div class=\"header1\">\r\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n </div>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header3Template>\r\n <div class=\"header1\">\r\n <div>\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #header4Template>\r\n <div class=\"header1\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\r\n <ng-container *ngIf=\"!isEcommerceWebsite\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </ng-container> </ng-container>\r\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\r\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\r\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\r\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\r\n </div>\r\n <div class=\"text-end\">\r\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\r\n </div>\r\n\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #logoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\r\n (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\r\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\r\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #pageLinksTemplate>\r\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\r\n <div class=\"d-flex gap-3\"\r\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\r\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | lowercase | titlecase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n\r\n\r\n</ng-template>\r\n\r\n<ng-template #buttonsTemplate>\r\n <div class=\"d-flex\">\r\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\r\n <div *ngFor=\"let button of action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\r\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\r\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount()\">Login</button>\r\n</ng-template>\r\n\r\n<ng-template #mobileFooterTemplate>\r\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\r\n <div class=\"icons\" (click)=\"goToHome()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Home</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"searchProducts()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Shop</span>\r\n </div>\r\n <div class=\"icons\" (click)=\"goToWishlist()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\r\n </div>\r\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\r\n <span [simpoColor]=\"simpoColor\">Cart</span>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ecommerceButtonsTemplate>\r\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\r\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\r\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\r\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\r\n </div> -->\r\n <div class=\"input-group w-50\" [ngStyle]=\"{'border' : '2px solid ' + accentColor}\">\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\">\r\n <mat-icon class=\"h-100\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">search</mat-icon>\r\n </div>\r\n <div class=\"d-flex gap-3 align-items-center\">\r\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\" [style.borderColor]=\"accentColor\" *ngIf=\"storeAvaiable\">\r\n <mat-icon [style.color]=\"accentColor\">store</mat-icon>\r\n <span [style.color]=\"accentColor\">Stores</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">favorite</mat-icon>\r\n </div>\r\n <div class=\"d-flex align-items-center mx-3 position-relative\" style=\"gap: 5px; cursor: pointer;\"\r\n (click)=\"goToCart()\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">shopping_cart</mat-icon>\r\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\r\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\r\n {{getCartItemsCount}}</div>\r\n </div>\r\n <div class=\"loginButton\" (click)=\"goToAccount()\" [style.backgroundColor]=\"accentColor\" *ngIf=\"!loggedIn\">\r\n <mat-icon [simpoColor]=\"style?.background?.color\">person_outline</mat-icon>\r\n <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span>\r\n </div>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\"\r\n *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n </div>\r\n <!-- <div> -->\r\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\r\n <!-- </div> -->\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #navbarLinksTemplate>\r\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\r\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\r\n <ng-container *ngFor=\"let item of getNavbarButton\">\r\n <ng-container *ngIf=\"item.showHeader\">\r\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\r\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\r\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\r\n </ng-container>\r\n </ng-container>\r\n\r\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\r\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\r\n <div class=\"position-relative\">\r\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\r\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\r\n {{link | uppercase}}\r\n </button>\r\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\r\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\r\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\r\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\r\n <div class=\"offcanvas-header\">\r\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\r\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\r\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\r\n </div>\r\n <div class=\"offcanvas-body\">\r\n <div class=\"pages\">\r\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n <div class=\"offcanvas-footer\">\r\n <div class=\"canvas-button\">\r\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<ng-template #ecomProfileTemplate>\r\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount()\" *ngIf=\"loggedIn\">\r\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #mobileLogoSectionTemplate>\r\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\r\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\r\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\r\n </div>\r\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\r\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\r\n </div>\r\n </div>\r\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\r\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\r\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\r\n <!-- </div> -->\r\n</ng-template>\r\n\r\n<ng-template #categoriesHeader>\r\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\"\r\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n {{ele?.categoryName | titlecase}}\r\n </div>\r\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\r\n [style.color]=\"data?.styles?.background?.accentColor\"\r\n [style.--border-color]=\"data?.styles?.background?.accentColor\">\r\n Collections\r\n </div>\r\n </div>\r\n\r\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\r\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\r\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\r\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\r\n </div>\r\n <div class=\"text-center\">{{ele?.categoryName | titlecase}}</div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showList = false\" -->\r\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\r\n <div class=\"list-header mb-3\">By Price</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\r\n <div class=\"each-price cursor-pointer\"\r\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\r\n {{price | titlecase}}\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 overflow-scroll\"\r\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\r\n <div class=\"list-header mb-3\">By Style</div>\r\n <div class=\"d-flex flex-column gap-3 list-item\">\r\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\r\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\r\n |\r\n titlecase}}</div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\r\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls; let i = index\">\r\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\">\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- (mouseleave)=\"showCollections = false\" -->\r\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\r\n <div class=\"row w-100 h-100\">\r\n <div class=\"col-7 row\">\r\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\r\n <div class=\"collection row col-3 align-items-center\"\r\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\r\n <div class=\"col-imag col-4\">\r\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\r\n </div>\r\n <div class=\"col-8 text-overflow\">\r\n {{collection?.collectionName | titlecase}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\r\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls); let i = index\">\r\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\">\r\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\r\n <div class=\"text-center p-2 btm-col-name position-absolute\"\r\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;border-radius:12px;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:10px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;padding:6px 15px;border-radius:8px;cursor:pointer}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:100000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:after{content:\"\";position:absolute;bottom:0;left:50%;width:0;height:3px;background:var(--border-color);transition:all .3s ease;transform:translate(-50%)}.category:hover:after{width:100%}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:18px;font-weight:600}.list-item{gap:1rem;font-size:16px}.image-container img{border-radius:12px}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content}.text-overflow{overflow:hidden;text-overflow:ellipsis}.col-5{width:44.666667%}.h-10{height:10vh}.br-12{border-radius:12px}\n"] }]
|
|
13778
13778
|
}], ctorParameters: () => [{ type: EventsService }, { type: i2$3.Router }, { type: i2$3.ActivatedRoute }, { type: i2$1.MatDialog }, { type: StorageServiceService }, { type: RestService }], propDecorators: { data: [{
|
|
13779
13779
|
type: Input
|
|
13780
13780
|
}], nextComponent: [{
|
|
@@ -14611,8 +14611,11 @@ class FeaturedProductsComponent extends BaseSection {
|
|
|
14611
14611
|
getBtnStyle(index) {
|
|
14612
14612
|
return this.data?.action?.buttons[index]?.styles || {};
|
|
14613
14613
|
}
|
|
14614
|
+
getBtnData(index) {
|
|
14615
|
+
return this.data?.action?.buttons[index].content || {};
|
|
14616
|
+
}
|
|
14614
14617
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FeaturedProductsComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$3.Router }, { token: CartService }, { token: StorageServiceService }, { token: i4.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14615
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBackground]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\" [simpoCorner]=\"styles?.corners\">\r\n <div class=\"d-flex jc-space align-center content-side\">\r\n <div class=\"input-text content-side\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container>\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <!-- mt-3 -->\r\n <div class=\"d-flex gap-md-4\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\"\r\n [class.flex-column]=\"screenWidth <= 475\">\r\n <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [class.w-100]=\"screenWidth <= 475\">\r\n <ng-container>\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" alt=\"\" class=\"section-image w-100 h-100\"\r\n [simpoCorner]=\"styles?.corners\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"product-parent position-relative\" [class.w-50]=\"content?.image?.showImage\"\r\n [class.w-100]=\"!content?.image?.showImage || screenWidth <= 475\">\r\n\r\n <!-- <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n </ng-container> -->\r\n <div *ngIf=\"responseData && responseData?.length\" [simpoWrapContainer]=\"styles?.direction\" class=\"d-flex\"\r\n #container>\r\n <div\r\n *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\"\r\n [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\"\r\n [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\r\n [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n </ng-container>\r\n <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [index]=\"idx\"\r\n [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <ng-container>\r\n <div class=\"d-flex justify-content-end align-items-center w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center mt-3 w-100\">\r\n <div class=\"d-flex align-items-center gap-3\" *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"responseData?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n <button class=\"view-all-btn text-center mx-3\" simpoButtonDirective\r\n [id]=\"data?.id+(getBtnId(1) || '')\" [buttonStyle]=\"getBtnStyle(1)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\"\r\n [buttonId]=\"getBtnId(1)\">{{viewAllButton?.content?.label ?? 'See All'}}</button>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <!-- <div class=\"body-large view-all d-flex align-items-center justify-content-end\"\r\n *ngIf=\"content?.display?.showButton && screenWidth > 475\" (click)=\"proceedToProductList()\"><button\r\n class=\"view-all-btn text-center\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\"\r\n [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\">{{viewAllButton?.content?.label ?? 'See All'}}</button></div> -->\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\r\n (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to\r\n Cart'}}</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\" [ngClass]=\"{\r\n 'text-left': stylesLayout?.align === 'left',\r\n 'text-right': stylesLayout?.align === 'right',\r\n 'text-center': stylesLayout?.align === 'center'\r\n }\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\" >\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.value}}</div> -->\r\n <div class=\"d-flex gap-2\">\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n <ng-container\r\n *ngIf=\"product.price.sellingPrice - product.price.discountedPrice > 10\">{{product.price.discountedPrice |\r\n number:'1.0-0'}}</ng-container>\r\n <span class=\"price\" [class.discount-price]=\"product.price.sellingPrice - product.price.discountedPrice > 10\">\r\n {{product.price.sellingPrice}}\r\n </span>\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\"\r\n [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : styles?.mobileColumn == 2 ? '230' : '110' ) : ''\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <!-- <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\r\n class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\r\n (mouseleave)=\"product.prviewIdx = 0\"> -->\r\n <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\"\r\n [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n\r\n </div>\r\n <div class=\"mt-15 w-100\">\r\n <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n [simpoColor]=\"styles?.background?.color\">\r\n {{product.name }}</div>\r\n </div>\r\n</ng-template>\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>", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.view-all-btn{padding:6px;width:15%!important;font-size:13px!important}.product{padding:10px;height:100%;cursor:pointer;position:relative;display:flex;flex-direction:column}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:13px;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin-left:-40px}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.view-all-btn{width:30%!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}.product-parent{margin-top:unset!important}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
|
|
14618
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: FeaturedProductsComponent, isStandalone: true, selector: "simpo-featured-products", inputs: { data: "data", responseData: "responseData", index: "index", isRelatedProduct: "isRelatedProduct", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, outputs: { changeDetailProduct: "changeDetailProduct" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBackground]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\" [simpoCorner]=\"styles?.corners\">\r\n <div class=\"d-flex jc-space align-center content-side\">\r\n <div class=\"input-text content-side\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container>\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <!-- mt-3 -->\r\n <div class=\"d-flex gap-md-4\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\"\r\n [class.flex-column]=\"screenWidth <= 475\">\r\n <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [class.w-100]=\"screenWidth <= 475\">\r\n <ng-container>\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" alt=\"\" class=\"section-image w-100 h-100\"\r\n [simpoCorner]=\"styles?.corners\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"product-parent position-relative\" [class.w-50]=\"content?.image?.showImage\"\r\n [class.w-100]=\"!content?.image?.showImage || screenWidth <= 475\">\r\n\r\n <!-- <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n </ng-container> -->\r\n <div *ngIf=\"responseData && responseData?.length\" [simpoWrapContainer]=\"styles?.direction\" class=\"d-flex\"\r\n #container>\r\n <div\r\n *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\"\r\n [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\"\r\n [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\r\n [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n </ng-container>\r\n <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [index]=\"idx\"\r\n [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <ng-container>\r\n <div class=\"d-flex justify-content-end align-items-center w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center mt-3 w-100\">\r\n <div class=\"d-flex align-items-center gap-3\" *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"responseData?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n <button class=\"view-all-btn text-center mx-3\" simpoButtonDirective\r\n [id]=\"data?.id+(getBtnId(1) || '')\" [buttonStyle]=\"getBtnStyle(1)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\" [buttonData]=\"getBtnData(1)\"\r\n [buttonId]=\"getBtnId(1)\">{{viewAllButton?.content?.label ?? 'See All'}}</button>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <!-- <div class=\"body-large view-all d-flex align-items-center justify-content-end\"\r\n *ngIf=\"content?.display?.showButton && screenWidth > 475\" (click)=\"proceedToProductList()\"><button\r\n class=\"view-all-btn text-center\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\"\r\n [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\">{{viewAllButton?.content?.label ?? 'See All'}}</button></div> -->\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\r\n (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to\r\n Cart'}}</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\" [ngClass]=\"{\r\n 'text-left': stylesLayout?.align === 'left',\r\n 'text-right': stylesLayout?.align === 'right',\r\n 'text-center': stylesLayout?.align === 'center'\r\n }\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\" >\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.value}}</div> -->\r\n <div class=\"d-flex gap-2\">\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n <ng-container\r\n *ngIf=\"product.price.sellingPrice - product.price.discountedPrice > 10\">{{product.price.discountedPrice |\r\n number:'1.0-0'}}</ng-container>\r\n <span class=\"price\" [class.discount-price]=\"product.price.sellingPrice - product.price.discountedPrice > 10\">\r\n {{product.price.sellingPrice}}\r\n </span>\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\"\r\n [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : styles?.mobileColumn == 2 ? '230' : '110' ) : ''\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <!-- <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\r\n class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\r\n (mouseleave)=\"product.prviewIdx = 0\"> -->\r\n <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\"\r\n [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n\r\n </div>\r\n <div class=\"mt-15 w-100\">\r\n <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n [simpoColor]=\"styles?.background?.color\">\r\n {{product.name }}</div>\r\n </div>\r\n</ng-template>\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>", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.view-all-btn{padding:6px;width:15%!important;font-size:13px!important}.product{padding:10px;height:100%;cursor:pointer;position:relative;display:flex;flex-direction:column}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:13px;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin-left:-40px}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.view-all-btn{width:30%!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}.product-parent{margin-top:unset!important}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type:
|
|
14616
14619
|
//directive
|
|
14617
14620
|
SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SimpoWrapComntainer, selector: "[simpoWrapContainer]", inputs: ["simpoWrapContainer"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type:
|
|
14618
14621
|
// MatBottomSheetModule,
|
|
@@ -14650,7 +14653,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
14650
14653
|
SpacingAroundDirective,
|
|
14651
14654
|
ButtonEditorDirective,
|
|
14652
14655
|
ObjectPositionDirective
|
|
14653
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBackground]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\" [simpoCorner]=\"styles?.corners\">\r\n <div class=\"d-flex jc-space align-center content-side\">\r\n <div class=\"input-text content-side\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container>\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <!-- mt-3 -->\r\n <div class=\"d-flex gap-md-4\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\"\r\n [class.flex-column]=\"screenWidth <= 475\">\r\n <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [class.w-100]=\"screenWidth <= 475\">\r\n <ng-container>\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" alt=\"\" class=\"section-image w-100 h-100\"\r\n [simpoCorner]=\"styles?.corners\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"product-parent position-relative\" [class.w-50]=\"content?.image?.showImage\"\r\n [class.w-100]=\"!content?.image?.showImage || screenWidth <= 475\">\r\n\r\n <!-- <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n </ng-container> -->\r\n <div *ngIf=\"responseData && responseData?.length\" [simpoWrapContainer]=\"styles?.direction\" class=\"d-flex\"\r\n #container>\r\n <div\r\n *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\"\r\n [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\"\r\n [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\r\n [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n </ng-container>\r\n <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [index]=\"idx\"\r\n [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <ng-container>\r\n <div class=\"d-flex justify-content-end align-items-center w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center mt-3 w-100\">\r\n <div class=\"d-flex align-items-center gap-3\" *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"responseData?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n <button class=\"view-all-btn text-center mx-3\" simpoButtonDirective\r\n [id]=\"data?.id+(getBtnId(1) || '')\" [buttonStyle]=\"getBtnStyle(1)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\"\r\n [buttonId]=\"getBtnId(1)\">{{viewAllButton?.content?.label ?? 'See All'}}</button>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <!-- <div class=\"body-large view-all d-flex align-items-center justify-content-end\"\r\n *ngIf=\"content?.display?.showButton && screenWidth > 475\" (click)=\"proceedToProductList()\"><button\r\n class=\"view-all-btn text-center\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\"\r\n [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\">{{viewAllButton?.content?.label ?? 'See All'}}</button></div> -->\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\r\n (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to\r\n Cart'}}</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\" [ngClass]=\"{\r\n 'text-left': stylesLayout?.align === 'left',\r\n 'text-right': stylesLayout?.align === 'right',\r\n 'text-center': stylesLayout?.align === 'center'\r\n }\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\" >\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.value}}</div> -->\r\n <div class=\"d-flex gap-2\">\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n <ng-container\r\n *ngIf=\"product.price.sellingPrice - product.price.discountedPrice > 10\">{{product.price.discountedPrice |\r\n number:'1.0-0'}}</ng-container>\r\n <span class=\"price\" [class.discount-price]=\"product.price.sellingPrice - product.price.discountedPrice > 10\">\r\n {{product.price.sellingPrice}}\r\n </span>\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\"\r\n [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : styles?.mobileColumn == 2 ? '230' : '110' ) : ''\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <!-- <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\r\n class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\r\n (mouseleave)=\"product.prviewIdx = 0\"> -->\r\n <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\"\r\n [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n\r\n </div>\r\n <div class=\"mt-15 w-100\">\r\n <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n [simpoColor]=\"styles?.background?.color\">\r\n {{product.name }}</div>\r\n </div>\r\n</ng-template>\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>", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.view-all-btn{padding:6px;width:15%!important;font-size:13px!important}.product{padding:10px;height:100%;cursor:pointer;position:relative;display:flex;flex-direction:column}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:13px;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin-left:-40px}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.view-all-btn{width:30%!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}.product-parent{margin-top:unset!important}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}\n"] }]
|
|
14656
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<ng-container>\r\n <section class=\"container-fluid total-container\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div [id]=\"data?.id\" class=\"display-block\" #mainContainer [simpoOverlay]=\"styles?.background\"\r\n [simpoBackground]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [spacingHorizontal]=\"stylesLayout\" [simpoCorner]=\"styles?.corners\">\r\n <div class=\"d-flex jc-space align-center content-side\">\r\n <div class=\"input-text content-side\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <ng-container>\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"> -->\r\n <!-- </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n <img *ngIf=\"styles?.dividerImage?.showDivider\" loading=\"lazy\" [src]=\"styles?.dividerImage?.url\" alt=\"\"\r\n class=\"span-img mt-15\">\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <!-- mt-3 -->\r\n <div class=\"d-flex gap-md-4\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\" [id]=\"data?.id\"\r\n [class.flex-column]=\"screenWidth <= 475\">\r\n <div class=\"w-50\" *ngIf=\"content?.image?.showImage\" [class.w-100]=\"screenWidth <= 475\">\r\n <ng-container>\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" alt=\"\" class=\"section-image w-100 h-100\"\r\n [simpoCorner]=\"styles?.corners\" [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\"\r\n [sectionId]=\"data?.id\" [class]=\"data?.id+(content?.image?.id || '')\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\">\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"product-parent position-relative\" [class.w-50]=\"content?.image?.showImage\"\r\n [class.w-100]=\"!content?.image?.showImage || screenWidth <= 475\">\r\n\r\n <!-- <ng-container *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"showLeftArrow && responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n </ng-container> -->\r\n <div *ngIf=\"responseData && responseData?.length\" [simpoWrapContainer]=\"styles?.direction\" class=\"d-flex\"\r\n #container>\r\n <div\r\n *ngFor=\"let product of responseData | slice:getSliceParameters()[0]:getSliceParameters()[1]; let idx = index\"\r\n class=\"product\" [style.padding.px]=\"styles?.theme != theme.Theme1 ? '3' : ''\"\r\n [style.width.%]=\"styles?.theme != theme.Theme1 && isMobile && isRelatedProduct ? '48' : ''\"\r\n [style.minWidth]=\"applyProductWidth() ? getProductWidth() : ''\"\r\n [style.maxWidth]=\"applyProductWidth() ? getProductWidth() : ''\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDes; context: {data: product, idx: idx}\"></ng-container>\r\n </ng-container>\r\n <div *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [index]=\"idx\"\r\n [isScrollable]=\"this.screenWidth > 475 || (this.screenWidth <= 475 && styles?.direction == 'ROW')\"></simpo-small-product-listing>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n <ng-container>\r\n <div class=\"d-flex justify-content-end align-items-center w-100\">\r\n <div class=\"d-flex justify-content-between align-items-center mt-3 w-100\">\r\n <div class=\"d-flex align-items-center gap-3\" *ngIf=\"styles?.direction == 'ROW' && !isMobile\">\r\n <div class=\"left-arrow\" (click)=\"scrollLeft()\" *ngIf=\"responseData?.length\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </div>\r\n <div class=\"right-arrow\" (click)=\"scrollRight()\" *ngIf=\"responseData?.length\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </div>\r\n </div>\r\n <button class=\"view-all-btn text-center mx-3\" simpoButtonDirective\r\n [id]=\"data?.id+(getBtnId(1) || '')\" [buttonStyle]=\"getBtnStyle(1)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\"\r\n [backgroundInfo]=\"styles?.background\" [sectionId]=\"data?.id\" [buttonData]=\"getBtnData(1)\"\r\n [buttonId]=\"getBtnId(1)\">{{viewAllButton?.content?.label ?? 'See All'}}</button>\r\n\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <!-- <div class=\"body-large view-all d-flex align-items-center justify-content-end\"\r\n *ngIf=\"content?.display?.showButton && screenWidth > 475\" (click)=\"proceedToProductList()\"><button\r\n class=\"view-all-btn text-center\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\"\r\n [buttonStyle]=\"button?.styles\" [color]=\"styles?.background?.accentColor\"\r\n [backgroundInfo]=\"styles?.background\">{{viewAllButton?.content?.label ?? 'See All'}}</button></div> -->\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\"></simpo-card-skeleton-loader>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n </section>\r\n</ng-container>\r\n\r\n<ng-template #VarientList let-product=\"data\">\r\n <div class=\"varient-list\" *ngIf=\"product?.itemVariant?.length\">\r\n <ng-container *ngFor=\"let varient of product?.itemVariant; let idx = index\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"varient.variantImages?.[0]?.imgUrl\" alt=\"\" class=\"varient\"\r\n [ngClass]=\"{'selected-varient': varient.variantId == product.varientId}\"\r\n [style.borderColor]=\"varient.variantId == product.varientId ? 'blue' : 'transparent'\"\r\n (click)=\"selectVarient(product, varient)\">\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'ADD')\" *ngIf=\"!product.whislist\">favorite_border</mat-icon>\r\n <mat-icon class=\"fav-icon\" [style.color]=\"data?.styles?.background?.accentColor\"\r\n (click)=\"toggleItemToFav($event, product, 'REMOVE')\" *ngIf=\"product.whislist\">favorite</mat-icon>\r\n</ng-template>\r\n\r\n<ng-template #AddToCart let-product=\"data\">\r\n <div *ngIf=\"content?.display?.showButton\" class=\"add-to-cart-btn\" [style.marginTop]=\"true ? '10px' : ''\">\r\n <button simpoButtonDirective [id]=\"data?.id+(getBtnId(0) || '')\" [buttonStyle]=\"getBtnStyle(0)\"\r\n [color]=\"styles?.background?.accentColor\" [appButtonEditor]=\"edit ?? false\" [backgroundInfo]=\"styles?.background\"\r\n [sectionId]=\"data?.id\" [buttonId]=\"getBtnId(0)\" *ngIf=\"!product.quantity && !isItemOutOfStock(product)\"\r\n (click)=\"addItemToCart(product, 'ADD')\">{{button?.content?.label ?? 'Add to\r\n Cart'}}</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"addItemToCart(product, 'ADD')\">+</span>\r\n </div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductPricing let-product=\"data\">\r\n <div class=\"d-flex justify-content-between align-items-center\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large g-10\" [id]=\"data?.id\" [simpoColor]=\"styles?.background?.color\" [ngClass]=\"{\r\n 'text-left': stylesLayout?.align === 'left',\r\n 'text-right': stylesLayout?.align === 'right',\r\n 'text-center': stylesLayout?.align === 'center'\r\n }\">\r\n <!-- <div *ngIf=\"product.price.value != product.price.discountedPrice\" class=\"selling-price\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.value}}\r\n </div> -->\r\n <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice != product?.price?.value\" >\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n {{product.price.value}}</div> -->\r\n <div class=\"d-flex gap-2\">\r\n <span [innerHTML]='currency | sanitizeHtml'></span>\r\n <ng-container\r\n *ngIf=\"product.price.sellingPrice - product.price.discountedPrice > 10\">{{product.price.discountedPrice |\r\n number:'1.0-0'}}</ng-container>\r\n <span class=\"price\" [class.discount-price]=\"product.price.sellingPrice - product.price.discountedPrice > 10\">\r\n {{product.price.sellingPrice}}\r\n </span>\r\n </div>\r\n </div>\r\n <ng-container>\r\n <ng-container *ngTemplateOutlet=\"AddToCart; context: {data: product}\"></ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #ProductDes let-product=\"data\" let-idx=\"idx\">\r\n <div (click)=\"proceedToProductDesc(product)\" class=\"position-relative box-shadow\"\r\n [style.height.px]=\"isMobile ? (styles?.mobileColumn == 1 ? '480' : styles?.mobileColumn == 2 ? '230' : '110' ) : ''\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <!-- <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [id]=\"'preview_'+idx\" [src]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" alt=\"\"\r\n class=\"product-img preivew\" (mouseenter)=\"togglePreviewImage(product, idx)\"\r\n (mouseleave)=\"product.prviewIdx = 0\"> -->\r\n <image-loading [hash]=\"product.itemImages?.[product.prviewIdx]?.blurhash\" [index]=\"idx\"\r\n [imageUrl]=\"product.itemImages?.[product.prviewIdx]?.imgUrl\" [theme]=\"styles?.theme\"></image-loading>\r\n\r\n </div>\r\n <div class=\"mt-15 w-100\">\r\n <ng-container *ngTemplateOutlet=\"VarientList; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"ProductPricing; context: {data: product}\"></ng-container>\r\n <div class=\"product-name heading-large trim-text w-100\" [id]=\"data?.id\" (click)=\"proceedToProductDesc(product)\"\r\n [simpoColor]=\"styles?.background?.color\">\r\n {{product.name }}</div>\r\n </div>\r\n</ng-template>\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>", styles: ["div[class*=arrow]{background-color:#fff;color:#000;padding:5px;border-radius:50%;position:sticky;height:fit-content;top:50%;display:flex;align-items:center;justify-content:center;z-index:101;cursor:pointer;box-shadow:#63636333 0 2px 8px}div[class*=arrow] .mat-icon{color:#000}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.left-arrow{left:2px}.right-arrow{right:2px}.product-parent{display:flex;flex-wrap:wrap;margin-top:15px}.view-all-btn{padding:6px;width:15%!important;font-size:13px!important}.product{padding:10px;height:100%;cursor:pointer;position:relative;display:flex;flex-direction:column}.price{color:#222;font-size:16px;font-weight:600;line-height:normal}.varient-list{display:flex;gap:5px;margin-bottom:5px;width:100%;overflow-x:auto}.varient-list .varient{height:60px;width:45px;border-radius:5px;border:1px solid lightgray}.varient-list .selected-varient{border:1px solid transparent}.tags{position:absolute;top:8px;left:8px;display:flex;gap:5px}.tags .tag{font-size:12px;background-color:#fff;padding:5px;border-radius:3px}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.fav-icon{position:absolute;z-index:1000;padding:5px;right:8px;top:8px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;padding:5px 10px;border-radius:5px}.product-name{color:#222;font-size:13px;line-height:26px;margin-bottom:5px;font-weight:500}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}@media screen and (max-width: 475px){.selling-price{display:none!important}}.discounted-price{margin-top:-3px}.add-product-button{width:20%}.action-btn{display:flex;justify-content:center;margin-top:20px}.action-btn>a{width:fit-content!important;padding:5px 20px;text-decoration:none}.mt-15{margin-top:15px}.default-image{background-color:#f2f3f5;text-align:center}.default-image img{width:70%;height:310px}.total-container{height:auto;position:relative}.display-block{display:block!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid;border-radius:3px;padding:5px;font-weight:600;width:95px}.preivew{transition:opacity .5s ease-in-out;opacity:1}.transition-preview{opacity:0}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%;margin-left:-40px}.them2-lisiting{min-width:195px;max-width:195px;margin-right:10px}.input-text{width:90%}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important}.view-all-btn{width:30%!important}.default-image img{height:250px}.out-of-stock{font-size:12px!important}.input-text{width:100%}}.add-to-cart-btn{display:flex;gap:10px}.add-to-cart-btn .mat-icon{height:30px;width:35px;font-size:27px;margin-top:5px}.add-to-cart-btn button{height:35px;font-size:16px!important}.jc-space{justify-content:space-between}.align-end{align-items:end}.view-all{font-size:16px;font-weight:600;cursor:pointer}.box-shadow{box-shadow:#0000003d 0 3px 8px;border-radius:10px}.full-width-quantity{text-align:center;padding:unset;font-weight:600;height:35px}.change-quantity{width:15%;height:inherit;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:600;position:relative}.align-center{align-items:center}@media screen and (max-width: 475px){.product-name{font-size:14px}.product-parent{margin-top:unset!important}}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mb-5{margin-bottom:5px!important}.trim-text{text-align:inherit!important}\n"] }]
|
|
14654
14657
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
14655
14658
|
type: Inject,
|
|
14656
14659
|
args: [PLATFORM_ID]
|
|
@@ -17130,7 +17133,7 @@ class UserProfileComponent extends BaseSection {
|
|
|
17130
17133
|
return order?.brandOrderDetails?.[0]?.orderedItems.slice(0, 3) || [];
|
|
17131
17134
|
}
|
|
17132
17135
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$3.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i2$1.MatDialog }, { token: i8$3.MatBottomSheet }, { token: i2$4.CookieService }, { token: i4.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17133
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\"\r\n [ngStyle]=\"{'height': isMobile ? '100vh' : '80vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box shadow-lg\"\r\n style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\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 *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n <ng-container *ngSwitchCase=\"'Home Appointment'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </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;\"\r\n (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'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n 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\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </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;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{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\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [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 <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n <ng-container *ngSwitchCase=\"'Home Appointment'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\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)\">\r\n {{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'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\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 content-side\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </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\"\r\n (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 <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [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=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n <div class=\"card-body p-3\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\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'\"\r\n 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\r\n </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 <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n </div>\r\n <div class=\"arrow-icon\">\r\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- Middle Section -->\r\n <div class=\"order-details\">\r\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"amount-section\">\r\n <span class=\"h5 mb-0 text-success fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>\r\n {{order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2 w-50\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n Remove\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\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'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</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<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"container\">\r\n <div class=\"header\">\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-3\">\r\n <div class=\"available-savings\">\r\n <h3>Available Savings</h3>\r\n <div class=\"amount\">\u20B97,000</div>\r\n <div class=\"subtitle\">+1,000 this month</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Schemes</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">2</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n </div>\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Upcoming Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <div class=\"payment-item overdue\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>Smart EMA - 3rd EMI</h4>\r\n <span>Date 22 Jan | Due by: 14 days</span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B95,000</div>\r\n <div class=\"payment-status overdue-status\">Overdue</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"payment-item\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon upcoming\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>Smart EMA - 4th EMI</h4>\r\n <p>Date 22 Jan | Due by: 2 days</p>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B95,000</div>\r\n <div class=\"payment-status upcoming-status\">Upcoming</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"quick-actions\">\r\n <h3>Quick Actions</h3>\r\n <div class=\"action-item d-flex align-items-center mb-2\"><mat-icon>visibility</mat-icon>View Due Payments\r\n </div>\r\n <div class=\"action-item d-flex align-items-center\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/957092c1753433825745SVG.png\"> View\r\n Passbook</div>\r\n <button class=\"enroll-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n New Scheme</button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Schemes</h2>\r\n <div class=\"view-all d-flex align-items-center\">View all <mat-icon>arrow_right_alt</mat-icon></div>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\" (click)=\"viewSchemeDetails()\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">Smart EMA</div>\r\n <div class=\"scheme-amount\">\u20B97000/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">Enrolled: 17 Jun'24</div>\r\n </div>\r\n <div class=\"scheme-status active-status\">Active</div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\u20B97,000</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">2</div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">9</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: 5 Jun 2025</span>\r\n </div>\r\n\r\n <div class=\"price-notice d-flex justify-content-center align-items-center\">\r\n 7 days price period has started\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-card d-flex flex-column gap-2\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">Premium Gold</div>\r\n <div class=\"scheme-amount\">\u20B93000/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">Enrolled: 15 Dec'23</div>\r\n </div>\r\n <div class=\"scheme-status active-status\">Active</div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\u20B915,000</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">5</div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">7</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: 15 Dec 2024</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details></simpo-scheme-details>\r\n</ng-template>\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>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.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;border-radius:20px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;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{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.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:20px;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}.profile-icon{width:70px}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.d-flex.justify-content-end{flex-direction:column!important}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:80%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings:after{content:\"\\1f4b0\";position:absolute;top:15px;right:15px;font-size:24px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount,.scheme-date{font-size:12px;color:#666}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;width:15%}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;width:10%!important;display:flex;justify-content:space-evenly}.header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.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: i7$1.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: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i17.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details" }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }] }); }
|
|
17136
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\"\r\n [ngStyle]=\"{'height': isMobile ? '100vh' : '80vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box shadow-lg\"\r\n style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\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 *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Home Appointment'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\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;\"\r\n (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'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n 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\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </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;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{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\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [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 <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Home Appointment'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\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)\">\r\n {{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'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\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 content-side\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </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\"\r\n (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 <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [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=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n <div class=\"card-body p-3\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\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'\"\r\n 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\r\n </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 <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n </div>\r\n <div class=\"arrow-icon\">\r\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- Middle Section -->\r\n <div class=\"order-details\">\r\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"amount-section\">\r\n <span class=\"h5 mb-0 text-success fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>\r\n {{order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2 w-50\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n Remove\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\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'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</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<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"container\">\r\n <div class=\"header\">\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-3\">\r\n <div class=\"available-savings\">\r\n <h3>Available Savings</h3>\r\n <div class=\"amount\">\u20B97,000</div>\r\n <div class=\"subtitle\">+1,000 this month</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Schemes</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">2</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n </div>\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Upcoming Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <div class=\"payment-item overdue\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>Smart EMA - 3rd EMI</h4>\r\n <span>Date 22 Jan | Due by: 14 days</span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B95,000</div>\r\n <div class=\"payment-status overdue-status\">Overdue</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"payment-item\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon upcoming\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>Smart EMA - 4th EMI</h4>\r\n <p>Date 22 Jan | Due by: 2 days</p>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B95,000</div>\r\n <div class=\"payment-status upcoming-status\">Upcoming</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"quick-actions\">\r\n <h3>Quick Actions</h3>\r\n <div class=\"action-item d-flex align-items-center mb-2\"><mat-icon>visibility</mat-icon>View Due Payments\r\n </div>\r\n <div class=\"action-item d-flex align-items-center\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/957092c1753433825745SVG.png\"> View\r\n Passbook</div>\r\n <button class=\"enroll-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n New Scheme</button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Schemes</h2>\r\n <div class=\"view-all d-flex align-items-center\">View all <mat-icon>arrow_right_alt</mat-icon></div>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\" (click)=\"viewSchemeDetails()\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">Smart EMA</div>\r\n <div class=\"scheme-amount\">\u20B97000/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">Enrolled: 17 Jun'24</div>\r\n </div>\r\n <div class=\"scheme-status active-status\">Active</div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\u20B97,000</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">2</div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">9</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: 5 Jun 2025</span>\r\n </div>\r\n\r\n <div class=\"price-notice d-flex justify-content-center align-items-center\">\r\n 7 days price period has started\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-card d-flex flex-column gap-2\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">Premium Gold</div>\r\n <div class=\"scheme-amount\">\u20B93000/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">Enrolled: 15 Dec'23</div>\r\n </div>\r\n <div class=\"scheme-status active-status\">Active</div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\u20B915,000</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">5</div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">7</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: 15 Dec 2024</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details></simpo-scheme-details>\r\n</ng-template>\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", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.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;border-radius:20px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;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{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.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:20px;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}.profile-icon{width:70px}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.d-flex.justify-content-end{flex-direction:column!important}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:80%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings:after{content:\"\\1f4b0\";position:absolute;top:15px;right:15px;font-size:24px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount,.scheme-date{font-size:12px;color:#666}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;width:15%}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;width:10%!important;display:flex;justify-content:space-evenly}.header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.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: i7$1.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: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i17.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "img[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details" }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }] }); }
|
|
17134
17137
|
}
|
|
17135
17138
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, decorators: [{
|
|
17136
17139
|
type: Component,
|
|
@@ -17156,7 +17159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
17156
17159
|
ImageEditorDirective,
|
|
17157
17160
|
SchemeDetailsComponent,
|
|
17158
17161
|
ListHomeAppointmentComponent
|
|
17159
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\"\r\n [ngStyle]=\"{'height': isMobile ? '100vh' : '80vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box shadow-lg\"\r\n style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\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 *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n <ng-container *ngSwitchCase=\"'Home Appointment'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </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;\"\r\n (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'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n 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\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </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;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{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\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [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 <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n <ng-container *ngSwitchCase=\"'Home Appointment'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\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)\">\r\n {{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'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\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 content-side\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </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\"\r\n (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 <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [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=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n <div class=\"card-body p-3\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\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'\"\r\n 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\r\n </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 <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n </div>\r\n <div class=\"arrow-icon\">\r\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- Middle Section -->\r\n <div class=\"order-details\">\r\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"amount-section\">\r\n <span class=\"h5 mb-0 text-success fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>\r\n {{order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2 w-50\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n Remove\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\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'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</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<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"container\">\r\n <div class=\"header\">\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-3\">\r\n <div class=\"available-savings\">\r\n <h3>Available Savings</h3>\r\n <div class=\"amount\">\u20B97,000</div>\r\n <div class=\"subtitle\">+1,000 this month</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Schemes</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">2</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n </div>\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Upcoming Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <div class=\"payment-item overdue\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>Smart EMA - 3rd EMI</h4>\r\n <span>Date 22 Jan | Due by: 14 days</span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B95,000</div>\r\n <div class=\"payment-status overdue-status\">Overdue</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"payment-item\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon upcoming\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>Smart EMA - 4th EMI</h4>\r\n <p>Date 22 Jan | Due by: 2 days</p>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B95,000</div>\r\n <div class=\"payment-status upcoming-status\">Upcoming</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"quick-actions\">\r\n <h3>Quick Actions</h3>\r\n <div class=\"action-item d-flex align-items-center mb-2\"><mat-icon>visibility</mat-icon>View Due Payments\r\n </div>\r\n <div class=\"action-item d-flex align-items-center\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/957092c1753433825745SVG.png\"> View\r\n Passbook</div>\r\n <button class=\"enroll-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n New Scheme</button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Schemes</h2>\r\n <div class=\"view-all d-flex align-items-center\">View all <mat-icon>arrow_right_alt</mat-icon></div>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\" (click)=\"viewSchemeDetails()\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">Smart EMA</div>\r\n <div class=\"scheme-amount\">\u20B97000/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">Enrolled: 17 Jun'24</div>\r\n </div>\r\n <div class=\"scheme-status active-status\">Active</div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\u20B97,000</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">2</div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">9</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: 5 Jun 2025</span>\r\n </div>\r\n\r\n <div class=\"price-notice d-flex justify-content-center align-items-center\">\r\n 7 days price period has started\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-card d-flex flex-column gap-2\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">Premium Gold</div>\r\n <div class=\"scheme-amount\">\u20B93000/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">Enrolled: 15 Dec'23</div>\r\n </div>\r\n <div class=\"scheme-status active-status\">Active</div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\u20B915,000</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">5</div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">7</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: 15 Dec 2024</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details></simpo-scheme-details>\r\n</ng-template>\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>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.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;border-radius:20px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;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{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.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:20px;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}.profile-icon{width:70px}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.d-flex.justify-content-end{flex-direction:column!important}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:80%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings:after{content:\"\\1f4b0\";position:absolute;top:15px;right:15px;font-size:24px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount,.scheme-date{font-size:12px;color:#666}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;width:15%}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;width:10%!important;display:flex;justify-content:space-evenly}.header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}\n"] }]
|
|
17162
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\r\n [spacingHorizontal]=\"styles?.layout\"\r\n [ngStyle]=\"{'height': isMobile ? '100vh' : '80vh', 'z-index': isMobile ? '100000000' : ''}\"\r\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\">\r\n <ng-container *ngIf=\"!isMobile\">\r\n <div class=\"p-4 profile-box shadow-lg\"\r\n style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\r\n [style.order]=\"styles?.swap ? '1' : '0'\">\r\n\r\n <!-- Profile Header Section -->\r\n <div class=\"d-flex align-items-center profile-header\"\r\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\r\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\r\n style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\r\n <div class=\"online-indicator\"\r\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\r\n </div>\r\n </div>\r\n\r\n <div class=\"profile-details flex-grow-1\">\r\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\r\n {{getUserDetails?.contact?.name}}</h4>\r\n\r\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n\r\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\r\n *ngIf=\"getUserDetails?.contact?.email?.length\"\r\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\r\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </h6>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Navigation Tabs Section -->\r\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\r\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\r\n <div class=\"d-flex align-items-center tab-item\"\r\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\r\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\r\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\r\n <div class=\"tab-icon-wrapper\"\r\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\r\n </div>\r\n\r\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\r\n {{tab.value}}</div>\r\n\r\n <!-- Hover effect background -->\r\n <div class=\"tab-hover-bg\"\r\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Action Buttons Section -->\r\n <div class=\"d-flex action-buttons\"\r\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\r\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\r\n Edit Profile\r\n </button>\r\n\r\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\r\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\r\n Logout\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\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 *ngSwitchCase=\"'Scheme Details'\">\r\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Home Appointment'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\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;\"\r\n (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'\"\r\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\r\n 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\">\r\n <mat-icon>stay_primary_portrait</mat-icon>\r\n <span>{{getUserDetails?.contact?.mobile}}</span>\r\n </h6>\r\n <h6 class=\"d-flex align-items-center font-weight-normal\"\r\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\r\n <span>{{getUserDetails?.contact?.email}}</span>\r\n </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;\"\r\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\r\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\r\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\r\n {{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\"\r\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\r\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\r\n [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 <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\r\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\r\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'Home Appointment'\">\r\n <simpo-list-home-appointment></simpo-list-home-appointment>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isEcommerce]=\"true\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n\r\n</section>\r\n\r\n<ng-template #OrderSection>\r\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\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)\">\r\n {{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'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\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 content-side\"\r\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\r\n <simpo-text-editor [(value)]=\"text.value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </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\"\r\n (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 <h3 class=\"title-text\">My Address</h3>\r\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\r\n [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=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\r\n <div class=\"card-body p-3\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\r\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\r\n <div class=\"icon-grp d-flex\">\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"editAddress(idx)\">edit</mat-icon>\r\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\r\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"address-content mb-3\">\r\n <div class=\"address-line mb-2\">\r\n <span class=\"text-muted small d-block\">Address</span>\r\n <span class=\"address-text\">{{address.addressLine1}}</span>\r\n </div>\r\n <div class=\"phone-info\">\r\n <span class=\"text-muted small d-block\">Phone</span>\r\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n\r\n\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'\"\r\n 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\r\n </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 <h3 class=\"onlyDesktop\">My Accounts</h3>\r\n</ng-template>\r\n<ng-template #LogoutSection>\r\n <h3 class=\"onlyDesktop\">Logout</h3>\r\n</ng-template>\r\n<ng-template #OrderCard let-order=\"data\">\r\n <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\r\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\r\n <!-- Header Section -->\r\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\r\n <div class=\"order-number\">\r\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\r\n </div>\r\n <div class=\"arrow-icon\">\r\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\r\n </div>\r\n </div>\r\n <div class=\"ordered-item row mb-2\">\r\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\r\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"item-img w-50\">\r\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- Middle Section -->\r\n <div class=\"order-details\">\r\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\r\n <span class=\"text-muted small mb-3 mb-sm-0\">\r\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\r\n </span>\r\n </div>\r\n </div>\r\n <div class=\"d-flex justify-content-between align-items-center\">\r\n <div class=\"amount-section\">\r\n <span class=\"h5 mb-0 text-success fw-bold\">\r\n <span [innerHTML]=\"currency\"></span>\r\n {{order.billDetails.discountAmount ?\r\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\r\n order?.billDetails?.totalTaxAfterDiscount) :\r\n order.billDetails.totalGrossValue}}\r\n </span>\r\n </div>\r\n <div class=\"status-section\">\r\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\r\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #WishlistDetails>\r\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\r\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\r\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\r\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\r\n <div class=\"address-card mb-2 w-50\">\r\n <div class=\"card-body p-4\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-auto\">\r\n <div class=\"product-image-wrapper\">\r\n <img loading=\"lazy\"\r\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\r\n </div>\r\n </div>\r\n <div class=\"col\">\r\n <div class=\"product-details\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n <div\r\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\r\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\r\n {{item.itemName}}\r\n </h6>\r\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\r\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\r\n title=\"Remove from wishlist\">\r\n <mat-icon class=\"small-icon\">delete</mat-icon>\r\n </button>\r\n </div>\r\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\r\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\r\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\r\n Remove\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"product-price mb-3\">\r\n <span class=\"h5 text-success fw-bold mb-0\">\r\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\r\n </span>\r\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\r\n ({{item.quantity}} items)\r\n </span>\r\n </div>\r\n <div class=\"action-buttons d-flex gap-2\">\r\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\r\n *ngIf=\"item.quantity\">\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'SUBSTRACT')\">\r\n -\r\n </button>\r\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\r\n {{item.quantity}}\r\n </span>\r\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\r\n (click)=\"addToFav(item, 'ADD')\"> +\r\n </button>\r\n </div>\r\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\r\n (click)=\"addToFav(item, 'ADD')\">\r\n + Add Quantity\r\n </button>\r\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\r\n Move to Cart\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n\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'\"\r\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <ng-container>\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Your Wishlist is Empty</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<ng-template #SchemeDetails>\r\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\r\n <div class=\"row gap-2\">\r\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\r\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\r\n <div class=\"card-header row gap-2\">\r\n <div class=\"card-head-left col-7\">\r\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\r\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\r\n </div>\r\n <div class=\"card-head-right col-4 text-center align-content-center\">\r\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\r\n </div>\r\n </div>\r\n <div class=\"card-body d-flex p-0 mb-3\">\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\r\n class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\r\n <div class=\"card-sub-text text-center\">Total Acheived</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\r\n <div class=\"card-sub-text text-center\">Rewards</div>\r\n </div>\r\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\r\n alt=\"\" class=\"w-40 mb-2\">\r\n <div class=\"card-text text-center fw-600\">8</div>\r\n <div class=\"card-sub-text text-center\">Due Months</div>\r\n </div>\r\n </div>\r\n <div class=\"card-footer row\">\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\r\n may 2025</span>\r\n </div>\r\n <div class=\"col-6 d-flex gap-2 p-0\">\r\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\r\n may 2026</span>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n<ng-template #SchemePassbook>\r\n <div class=\"container\">\r\n <div class=\"header\">\r\n <div class=\"scheme-overview d-flex flex-column\">\r\n <div class=\"d-flex gap-3\">\r\n <div class=\"available-savings\">\r\n <h3>Available Savings</h3>\r\n <div class=\"amount\">\u20B97,000</div>\r\n <div class=\"subtitle\">+1,000 this month</div>\r\n </div>\r\n <div class=\"active-schemes\">\r\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\r\n <h3>Active Schemes</h3>\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\r\n </div>\r\n </div>\r\n <div class=\"scheme-count\">2</div>\r\n <div class=\"subtitle\">On Track</div>\r\n </div>\r\n </div>\r\n <div class=\"section d-flex-flex-column gap-2\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Upcoming Payments</h2>\r\n </div>\r\n <div class=\"payment-list d-flex flex-column gap-2\">\r\n <div class=\"payment-item overdue\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>Smart EMA - 3rd EMI</h4>\r\n <span>Date 22 Jan | Due by: 14 days</span>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B95,000</div>\r\n <div class=\"payment-status overdue-status\">Overdue</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"payment-item\">\r\n <div class=\"payment-info\">\r\n <div class=\"payment-icon upcoming\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\r\n </div>\r\n <div class=\"payment-details\">\r\n <h4>Smart EMA - 4th EMI</h4>\r\n <p>Date 22 Jan | Due by: 2 days</p>\r\n </div>\r\n </div>\r\n <div class=\"payment-amount\">\r\n <div class=\"amount-value\">\u20B95,000</div>\r\n <div class=\"payment-status upcoming-status\">Upcoming</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"quick-actions\">\r\n <h3>Quick Actions</h3>\r\n <div class=\"action-item d-flex align-items-center mb-2\"><mat-icon>visibility</mat-icon>View Due Payments\r\n </div>\r\n <div class=\"action-item d-flex align-items-center\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/957092c1753433825745SVG.png\"> View\r\n Passbook</div>\r\n <button class=\"enroll-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\r\n New Scheme</button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"section\">\r\n <div class=\"section-header\">\r\n <h2 class=\"section-title\">Your Active Schemes</h2>\r\n <div class=\"view-all d-flex align-items-center\">View all <mat-icon>arrow_right_alt</mat-icon></div>\r\n </div>\r\n\r\n <div class=\"schemes-grid\">\r\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\" (click)=\"viewSchemeDetails()\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">Smart EMA</div>\r\n <div class=\"scheme-amount\">\u20B97000/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">Enrolled: 17 Jun'24</div>\r\n </div>\r\n <div class=\"scheme-status active-status\">Active</div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\u20B97,000</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">2</div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">9</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: 5 Jun 2025</span>\r\n </div>\r\n\r\n <div class=\"price-notice d-flex justify-content-center align-items-center\">\r\n 7 days price period has started\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-card d-flex flex-column gap-2\">\r\n <div class=\"scheme-header\">\r\n <div>\r\n <div class=\"scheme-title\">Premium Gold</div>\r\n <div class=\"scheme-amount\">\u20B93000/Monthly</div>\r\n </div>\r\n <div class=\"scheme-date\">Enrolled: 15 Dec'23</div>\r\n </div>\r\n <div class=\"scheme-status active-status\">Active</div>\r\n\r\n <div class=\"scheme-stats\">\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">\u20B915,000</div>\r\n <div class=\"stat-label\">Deposited Amount</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">5</div>\r\n <div class=\"stat-label\">Paid Months</div>\r\n </div>\r\n <div class=\"stat\">\r\n <div class=\"stat-value\">7</div>\r\n <div class=\"stat-label\">Due Months</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"scheme-footer\">\r\n <span>Maturity Date: 15 Dec 2024</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"auto-pay\">\r\n <div class=\"auto-pay-icon\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\r\n <div class=\"auto-pay-content\">\r\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\r\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\r\n </div>\r\n <button class=\"manage-btn\"><img\r\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #Scheme_Details>\r\n <simpo-scheme-details></simpo-scheme-details>\r\n</ng-template>\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", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.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;border-radius:20px}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;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{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.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:20px;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}.profile-icon{width:70px}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.d-flex.justify-content-end{flex-direction:column!important}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:80%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings:after{content:\"\\1f4b0\";position:absolute;top:15px;right:15px;font-size:24px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount,.scheme-date{font-size:12px;color:#666}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;width:15%}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;width:10%!important;display:flex;justify-content:space-evenly}.header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}\n"] }]
|
|
17160
17163
|
}], ctorParameters: () => [{ type: i2$3.Router }, { type: EventsService }, { type: RestService }, { type: StorageServiceService }, { type: CartService }, { type: i2$1.MatDialog }, { type: i8$3.MatBottomSheet }, { type: i2$4.CookieService }, { type: i4.MessageService }], propDecorators: { data: [{
|
|
17161
17164
|
type: Input
|
|
17162
17165
|
}], index: [{
|