simpo-component-library 3.6.976 → 3.6.980
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/cart/cart.component.mjs +8 -6
- package/esm2022/lib/ecommerce/sections/product-list/product-list.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/verify-payment/verify-payment.component.mjs +16 -2
- package/esm2022/lib/sections/blog-list/blog-list.component.mjs +3 -3
- package/esm2022/lib/sections/recent-blog-post-section/recent-blog-post-section.component.mjs +3 -3
- package/esm2022/lib/sections/view-blog/view-blog.component.mjs +3 -3
- package/fesm2022/simpo-component-library.mjs +30 -14
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.980.tgz +0 -0
- package/simpo-component-library-3.6.976.tgz +0 -0
|
@@ -10382,11 +10382,13 @@ class CartComponent extends BaseSection {
|
|
|
10382
10382
|
}
|
|
10383
10383
|
const isPaymentGatewayEnabled = localStorage.getItem("isPaymentGatewayEnabled") ? localStorage.getItem("isPaymentGatewayEnabled") == "true" : true;
|
|
10384
10384
|
const merchantId = localStorage.getItem('pMId') == "null" || localStorage.getItem('pMId') == "undefined" ? null : localStorage.getItem('pMId');
|
|
10385
|
-
|
|
10386
|
-
|
|
10387
|
-
|
|
10388
|
-
|
|
10389
|
-
|
|
10385
|
+
// Temporarily disabled for Stripe testing: the gateway/provider is decided by the
|
|
10386
|
+
// payment/order response, so the merchant id is not required on the client for now.
|
|
10387
|
+
// if (isPaymentGatewayEnabled && !merchantId) {
|
|
10388
|
+
// this.messageService.add({ severity: 'error', summary: 'Merchant onboarded', detail: 'Merchant is not onboarded' });
|
|
10389
|
+
// this.placeOrderLoader = false;
|
|
10390
|
+
// return;
|
|
10391
|
+
// }
|
|
10390
10392
|
const userDetail = this.storageService.getUser();
|
|
10391
10393
|
const address = userDetail?.addressDetailsList[this.selectedAddressIdx];
|
|
10392
10394
|
if (address?.receiverName?.length == 0) {
|
|
@@ -13137,7 +13139,7 @@ class RecentBlogPostSectionComponent extends BaseSection {
|
|
|
13137
13139
|
}, 100);
|
|
13138
13140
|
}
|
|
13139
13141
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RecentBlogPostSectionComponent, deps: [{ token: EventsService }, { token: RestService }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13140
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RecentBlogPostSectionComponent, isStandalone: true, selector: "simpo-recent-blog-post-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", responseData: "responseData", popular: "popular", businessId: "businessId", excludeBlogId: "excludeBlogId", size: "size" }, usesInheritance: true, ngImport: i0, template: "<section *ngIf=\"!popular || apiLoading || showCards\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [ngStyle]=\"{'width' : (displayedPosts.length || 0) == 0 ? '100%' : ''}\">\r\n <div *ngFor=\"let text of data?.content?.inputText; let i = index\">\r\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" >\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n <div class=\"heading-large content-side popular-heading\" *ngIf=\"popular && !data?.content?.inputText?.length\">\r\n You Might Also Like\r\n </div>\r\n <div class=\"row gap-2\" *ngIf=\"showCards\">\r\n <div (click)=\"goToBlog(content)\" [simpoColumnDirective]=\"columnSize\" [id]=\"data?.id\"\r\n class=\"individual-cards col-12\"\r\n *ngFor=\"let content of displayedPosts | slice:getSliceParameters()[0]:getSliceParameters()[1]\" [ngClass]=\"{'card-form': showCardStyle}\">\r\n <div class=\"image\">\r\n <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid\" alt=\"\" *ngIf=\"content.img\"\r\n loading=\"lazy\" [ngClass]=\"{'br-10': showCardStyle}\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\"\r\n loading=\"lazy\" [ngClass]=\"{'br-10': showCardStyle}\">\r\n </div>\r\n <div class=\"heading-medium title mt-4\" [ngClass]=\"{'p-10': showCardStyle}\">\r\n {{(content?.postTitle?.length || 0) > 100 ? content.postTitle.substring(0,100)+'...\"' : content.postTitle}}\r\n </div>\r\n <div class=\"body-large mt-4 pb-15\" [ngClass]=\"{'p-10': showCardStyle}\">\r\n {{(content?.postSummary?.length || 0) > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n content.postSummary}}\r\n </div>\r\n <!-- <div class=\"body-large adate mt-3\">\r\n {{content.createdTimeStamp | date:'EEEE, MMM, d, y'}}\r\n </div> -->\r\n </div>\r\n </div>\r\n <div *ngIf=\"apiLoading\" class=\"row\">\r\n <div class=\"skeleton col-12\" [simpoColumnDirective]=\"columnSize\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n 'aspect-ratio': '16/9',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!showCards && !apiLoading\" class=\"row\">\r\n <div class=\"no-blog-post\">\r\n <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\r\n </div>\r\n <div class=\"skeleton col-12\" [simpoColumnDirective]=\"columnSize\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n 'aspect-ratio': '16/9',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-section mt-3rem\" *ngIf=\"this.data?.action && this.data?.action?.display\">\r\n <button class=\"button p-2\" [buttonData]=\"buttonData?.content\" [buttonStyle]=\"buttonData?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"buttonData?.id ?? ''\" (click)=\"openBlogList()\">{{buttonData?.content?.label}}</button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem;display:block!important}.individual-cards{padding-bottom:30px;cursor:pointer}.individual-cards img{width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover}.title{font-size:20px;font-weight:500}.popular-heading{font-size:2rem;line-height:1.25em;font-weight:700;margin-bottom:24px}@media only screen and (max-width: 475px){.popular-heading{font-size:1.5rem}}.mt-3rem{margin-top:3rem}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}.col-12{flex:0 0 auto!important;width:100%!important}}.button{font-size:16px!important;padding:.5rem 1.5rem!important;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}.card-form{background:#fff;color:#000!important;border-radius:15px;box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;padding-left:unset;padding-right:unset}.br-10{border-radius:1rem 1rem 0 0!important}.p-10{padding:10px}.col-md-4{flex:0 0 auto;width:32.333333%}.pb-15{padding-bottom:15px}.row:before{content:unset!important;display:unset!important}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { 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: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }] }); }
|
|
13142
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RecentBlogPostSectionComponent, isStandalone: true, selector: "simpo-recent-blog-post-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor", responseData: "responseData", popular: "popular", businessId: "businessId", excludeBlogId: "excludeBlogId", size: "size" }, usesInheritance: true, ngImport: i0, template: "<section *ngIf=\"!popular || apiLoading || showCards\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [ngStyle]=\"{'width' : (displayedPosts.length || 0) == 0 ? '100%' : ''}\">\r\n <div *ngFor=\"let text of data?.content?.inputText; let i = index\">\r\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\r\n [inputTextIndex]=\"i\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n <div class=\"heading-large content-side popular-heading\" *ngIf=\"popular && !data?.content?.inputText?.length\">\r\n You Might Also Like\r\n </div>\r\n <div class=\"row gap-2\" *ngIf=\"showCards\">\r\n <div (click)=\"goToBlog(content)\" [simpoColumnDirective]=\"columnSize\" [id]=\"data?.id\"\r\n class=\"individual-cards col-12\"\r\n *ngFor=\"let content of displayedPosts | slice:getSliceParameters()[0]:getSliceParameters()[1]\"\r\n [ngClass]=\"{'card-form': showCardStyle}\">\r\n <div class=\"image\">\r\n <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid\" alt=\"\" *ngIf=\"content.img\"\r\n loading=\"lazy\" [ngClass]=\"{'br-10': showCardStyle}\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\" loading=\"lazy\" [ngClass]=\"{'br-10': showCardStyle}\">\r\n </div>\r\n <div class=\"d-flex flex-wrap align-items-center gap-3 blog-meta-row mt-2\"\r\n [ngClass]=\"{'p-10': showCardStyle}\"\r\n *ngIf=\"content.publishedDate || content.blogScheduledDate || content.createdTimeStamp\">\r\n <span class=\"blog-meta-item\">\r\n <svg class=\"meta-icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"></rect>\r\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n </svg>\r\n {{(content.publishedDate || content.blogScheduledDate || content.createdTimeStamp) | date:'d MMM y'}}\r\n </span>\r\n <span class=\"blog-meta-item\">\r\n <svg class=\"meta-icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path>\r\n <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n </svg>\r\n {{content.totalVisits || 0}}\r\n </span>\r\n </div>\r\n <div class=\"heading-medium title mt-2\" [ngClass]=\"{'p-10': showCardStyle}\">\r\n {{(content?.postTitle?.length || 0) > 100 ? content.postTitle.substring(0,100)+'...\"' :\r\n content.postTitle}}\r\n </div>\r\n <div class=\"body-large mt-4 pb-15\" [ngClass]=\"{'p-10': showCardStyle}\" *ngIf=\"!popular\">\r\n {{(content?.postSummary?.length || 0) > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n content.postSummary}}\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"apiLoading\" class=\"row\">\r\n <div class=\"skeleton col-12\" [simpoColumnDirective]=\"columnSize\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n 'aspect-ratio': '16/9',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!showCards && !apiLoading\" class=\"row\">\r\n <div class=\"no-blog-post\">\r\n <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\r\n </div>\r\n <div class=\"skeleton col-12\" [simpoColumnDirective]=\"columnSize\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n 'aspect-ratio': '16/9',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-section mt-3rem\" *ngIf=\"this.data?.action && this.data?.action?.display\">\r\n <button class=\"button p-2\" [buttonData]=\"buttonData?.content\" [buttonStyle]=\"buttonData?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"buttonData?.id ?? ''\"\r\n (click)=\"openBlogList()\">{{buttonData?.content?.label}}</button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem;display:block!important}.individual-cards{padding-bottom:30px;cursor:pointer}.individual-cards img{width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover}.title{font-size:20px;font-weight:500}.popular-heading{font-size:2rem;line-height:1.25em;font-weight:700;margin-bottom:24px}@media only screen and (max-width: 475px){.popular-heading{font-size:1.5rem}}.mt-3rem{margin-top:3rem}.blog-meta-row{font-size:13px;color:#6b6b6b}.blog-meta-item{display:inline-flex;align-items:center;gap:4px}.blog-meta-item .meta-icon{flex-shrink:0}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}.col-12{flex:0 0 auto!important;width:100%!important}}.button{font-size:16px!important;padding:.5rem 1.5rem!important;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}.card-form{background:#fff;color:#000!important;border-radius:15px;box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;padding-left:unset;padding-right:unset}.br-10{border-radius:1rem 1rem 0 0!important}.p-10{padding:0 10px}.col-md-4{flex:0 0 auto;width:32.333333%}.pb-15{padding-bottom:15px}.row:before{content:unset!important;display:unset!important}\n"], dependencies: [{ kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { 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: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }] }); }
|
|
13141
13143
|
}
|
|
13142
13144
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RecentBlogPostSectionComponent, decorators: [{
|
|
13143
13145
|
type: Component,
|
|
@@ -13164,7 +13166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
13164
13166
|
SpacingHorizontalDirective,
|
|
13165
13167
|
TextEditorComponent,
|
|
13166
13168
|
ButtonEditorDirective
|
|
13167
|
-
], template: "<section *ngIf=\"!popular || apiLoading || showCards\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\" [ngStyle]=\"{'width' : (displayedPosts.length || 0) == 0 ? '100%' : ''}\">\r\n <div *ngFor=\"let text of data?.content?.inputText; let i = index\">\r\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" >\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"i\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n <div class=\"heading-large content-side popular-heading\" *ngIf=\"popular && !data?.content?.inputText?.length\">\r\n You Might Also Like\r\n </div>\r\n <div class=\"row gap-2\" *ngIf=\"showCards\">\r\n <div (click)=\"goToBlog(content)\" [simpoColumnDirective]=\"columnSize\" [id]=\"data?.id\"\r\n class=\"individual-cards col-12\"\r\n *ngFor=\"let content of displayedPosts | slice:getSliceParameters()[0]:getSliceParameters()[1]\" [ngClass]=\"{'card-form': showCardStyle}\">\r\n <div class=\"image\">\r\n <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid\" alt=\"\" *ngIf=\"content.img\"\r\n loading=\"lazy\" [ngClass]=\"{'br-10': showCardStyle}\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\"\r\n loading=\"lazy\" [ngClass]=\"{'br-10': showCardStyle}\">\r\n </div>\r\n <div class=\"heading-medium title mt-4\" [ngClass]=\"{'p-10': showCardStyle}\">\r\n {{(content?.postTitle?.length || 0) > 100 ? content.postTitle.substring(0,100)+'...\"' : content.postTitle}}\r\n </div>\r\n <div class=\"body-large mt-4 pb-15\" [ngClass]=\"{'p-10': showCardStyle}\">\r\n {{(content?.postSummary?.length || 0) > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n content.postSummary}}\r\n </div>\r\n <!-- <div class=\"body-large adate mt-3\">\r\n {{content.createdTimeStamp | date:'EEEE, MMM, d, y'}}\r\n </div> -->\r\n </div>\r\n </div>\r\n <div *ngIf=\"apiLoading\" class=\"row\">\r\n <div class=\"skeleton col-12\" [simpoColumnDirective]=\"columnSize\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n 'aspect-ratio': '16/9',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!showCards && !apiLoading\" class=\"row\">\r\n <div class=\"no-blog-post\">\r\n <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\r\n </div>\r\n <div class=\"skeleton col-12\" [simpoColumnDirective]=\"columnSize\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n 'aspect-ratio': '16/9',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-section mt-3rem\" *ngIf=\"this.data?.action && this.data?.action?.display\">\r\n <button class=\"button p-2\" [buttonData]=\"buttonData?.content\" [buttonStyle]=\"buttonData?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\" [buttonId]=\"buttonData?.id ?? ''\" (click)=\"openBlogList()\">{{buttonData?.content?.label}}</button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\" [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>\r\n", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem;display:block!important}.individual-cards{padding-bottom:30px;cursor:pointer}.individual-cards img{width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover}.title{font-size:20px;font-weight:500}.popular-heading{font-size:2rem;line-height:1.25em;font-weight:700;margin-bottom:24px}@media only screen and (max-width: 475px){.popular-heading{font-size:1.5rem}}.mt-3rem{margin-top:3rem}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}.col-12{flex:0 0 auto!important;width:100%!important}}.button{font-size:16px!important;padding:.5rem 1.5rem!important;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}.card-form{background:#fff;color:#000!important;border-radius:15px;box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;padding-left:unset;padding-right:unset}.br-10{border-radius:1rem 1rem 0 0!important}.p-10{padding:10px}.col-md-4{flex:0 0 auto;width:32.333333%}.pb-15{padding-bottom:15px}.row:before{content:unset!important;display:unset!important}\n"] }]
|
|
13169
|
+
], template: "<section *ngIf=\"!popular || apiLoading || showCards\" [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [ngStyle]=\"{'width' : (displayedPosts.length || 0) == 0 ? '100%' : ''}\">\r\n <div *ngFor=\"let text of data?.content?.inputText; let i = index\">\r\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\" [sectionId]=\"data?.id\"\r\n [inputTextIndex]=\"i\" [isRTE]=\"text.isRTE\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n <div class=\"heading-large content-side popular-heading\" *ngIf=\"popular && !data?.content?.inputText?.length\">\r\n You Might Also Like\r\n </div>\r\n <div class=\"row gap-2\" *ngIf=\"showCards\">\r\n <div (click)=\"goToBlog(content)\" [simpoColumnDirective]=\"columnSize\" [id]=\"data?.id\"\r\n class=\"individual-cards col-12\"\r\n *ngFor=\"let content of displayedPosts | slice:getSliceParameters()[0]:getSliceParameters()[1]\"\r\n [ngClass]=\"{'card-form': showCardStyle}\">\r\n <div class=\"image\">\r\n <img loading=\"lazy\" [src]=\"content.img\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\" class=\"d-block mx-lg-auto img-fluid\" alt=\"\" *ngIf=\"content.img\"\r\n loading=\"lazy\" [ngClass]=\"{'br-10': showCardStyle}\">\r\n <img loading=\"lazy\" [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\" *ngIf=\"!content.img\" loading=\"lazy\" [ngClass]=\"{'br-10': showCardStyle}\">\r\n </div>\r\n <div class=\"d-flex flex-wrap align-items-center gap-3 blog-meta-row mt-2\"\r\n [ngClass]=\"{'p-10': showCardStyle}\"\r\n *ngIf=\"content.publishedDate || content.blogScheduledDate || content.createdTimeStamp\">\r\n <span class=\"blog-meta-item\">\r\n <svg class=\"meta-icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"></rect>\r\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n </svg>\r\n {{(content.publishedDate || content.blogScheduledDate || content.createdTimeStamp) | date:'d MMM y'}}\r\n </span>\r\n <span class=\"blog-meta-item\">\r\n <svg class=\"meta-icon\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path>\r\n <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n </svg>\r\n {{content.totalVisits || 0}}\r\n </span>\r\n </div>\r\n <div class=\"heading-medium title mt-2\" [ngClass]=\"{'p-10': showCardStyle}\">\r\n {{(content?.postTitle?.length || 0) > 100 ? content.postTitle.substring(0,100)+'...\"' :\r\n content.postTitle}}\r\n </div>\r\n <div class=\"body-large mt-4 pb-15\" [ngClass]=\"{'p-10': showCardStyle}\" *ngIf=\"!popular\">\r\n {{(content?.postSummary?.length || 0) > 250 ? content.postSummary.substring(0, 250) + '...' :\r\n content.postSummary}}\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"apiLoading\" class=\"row\">\r\n <div class=\"skeleton col-12\" [simpoColumnDirective]=\"columnSize\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n 'aspect-ratio': '16/9',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"!showCards && !apiLoading\" class=\"row\">\r\n <div class=\"no-blog-post\">\r\n <mat-icon>info</mat-icon>This section won't be visible because you have no published blog posts.\r\n </div>\r\n <div class=\"skeleton col-12\" [simpoColumnDirective]=\"columnSize\" [id]=\"data?.id\" *ngFor=\"let i of [1,2,3]\">\r\n <ngx-skeleton-loader count=\"1\" appearance=\"circle\" [theme]=\"{\r\n width: '100%',\r\n 'aspect-ratio': '16/9',\r\n 'border-radius': '10px',\r\n 'position': 'relative',\r\n 'right': '5px'\r\n }\">\r\n </ngx-skeleton-loader>\r\n <div class=\"second-section-wrapper\">\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '100%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '90%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n <div class=\"wrapper\">\r\n <ngx-skeleton-loader [theme]=\"{\r\n width: '60%',\r\n 'border-radius': '0',\r\n height: '15px',\r\n 'margin-bottom': '10px',\r\n 'display' : 'flex'\r\n }\"></ngx-skeleton-loader>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"button-section mt-3rem\" *ngIf=\"this.data?.action && this.data?.action?.display\">\r\n <button class=\"button p-2\" [buttonData]=\"buttonData?.content\" [buttonStyle]=\"buttonData?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(buttonData?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"buttonData?.id ?? ''\"\r\n (click)=\"openBlogList()\">{{buttonData?.content?.label}}</button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem;display:block!important}.individual-cards{padding-bottom:30px;cursor:pointer}.individual-cards img{width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover}.title{font-size:20px;font-weight:500}.popular-heading{font-size:2rem;line-height:1.25em;font-weight:700;margin-bottom:24px}@media only screen and (max-width: 475px){.popular-heading{font-size:1.5rem}}.mt-3rem{margin-top:3rem}.blog-meta-row{font-size:13px;color:#6b6b6b}.blog-meta-item{display:inline-flex;align-items:center;gap:4px}.blog-meta-item .meta-icon{flex-shrink:0}@media only screen and (max-width: 475px){.cards{flex-direction:column}.individual-cards{width:100%}.title{font-size:26px}.col-12{flex:0 0 auto!important;width:100%!important}}.button{font-size:16px!important;padding:.5rem 1.5rem!important;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important;margin-top:1rem}.skeleton-parent{display:flex;gap:15px}.skeleton{padding:10px;border-radius:10px}.second-section-wrapper{width:100%;height:auto;flex:1}.wrapper{width:100%;flex:1}.no-blog-post{color:#5185ad;text-align:left;display:flex;align-items:center;gap:15px;height:55px;background:#f6fbff;font-size:16px;font-weight:600}.card-form{background:#fff;color:#000!important;border-radius:15px;box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px;padding-left:unset;padding-right:unset}.br-10{border-radius:1rem 1rem 0 0!important}.p-10{padding:0 10px}.col-md-4{flex:0 0 auto;width:32.333333%}.pb-15{padding-bottom:15px}.row:before{content:unset!important;display:unset!important}\n"] }]
|
|
13168
13170
|
}], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: undefined, decorators: [{
|
|
13169
13171
|
type: Inject,
|
|
13170
13172
|
args: [LOCAL_STORAGE]
|
|
@@ -13281,7 +13283,7 @@ class BlogListComponent extends BaseSection {
|
|
|
13281
13283
|
}, 100);
|
|
13282
13284
|
}
|
|
13283
13285
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BlogListComponent, deps: [{ token: EventsService }, { token: RestService }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13284
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BlogListComponent, isStandalone: true, selector: "simpo-blog-list", inputs: { responseData: "responseData", index: "index", edit: "edit", customClass: "customClass", data: "data", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section\r\n [id]=\"data?.id\"\r\n [simpoBackground]=\"style?.background\"\r\n class=\"total-container\"\r\n simpoHover\r\n (hovering)=\"showEditTabs($event)\"\r\n *ngIf=\"\r\n categoryList.length > 0 || (displayedBlogs?.length || 0) > 0 || apiLoading;\r\n else elseBlock\r\n \"\r\n [attr.style]=\"customClass\">\r\n <div\r\n [id]=\"data?.id\"\r\n [simpoOverlay]=\"style?.background\"\r\n [simpoBorder]=\"style?.border\"\r\n [simpoAnimation]=\"style?.animation\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"container-fluid\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"blog-category-tabs\" *ngIf=\"categoryList.length > 0\">\r\n <span\r\n class=\"category-tab\"\r\n [class.active]=\"selectedCategoryId === null\"\r\n (click)=\"selectCategory(null)\"\r\n >All</span\r\n >\r\n <span\r\n class=\"category-tab\"\r\n *ngFor=\"let category of categoryList\"\r\n [class.active]=\"selectedCategoryId === category.id\"\r\n (click)=\"selectCategory(category.id)\">\r\n {{ category.categoryName }}\r\n </span>\r\n </div>\r\n <simpo-card-skeleton-loader\r\n *ngIf=\"apiLoading\"\r\n [showTitles]=\"true\"></simpo-card-skeleton-loader>\r\n <div\r\n class=\"no-blog-text-inline heading-medium\"\r\n *ngIf=\"!apiLoading && (displayedBlogs?.length || 0) === 0\">\r\n Sorry there are no blog posts in this category.\r\n </div>\r\n <div\r\n class=\"row gap-20\"\r\n *ngIf=\"!apiLoading && (displayedBlogs?.length || 0) > 0\">\r\n <div\r\n [simpoColumnDirective]=\"data?.styles?.size\"\r\n [id]=\"data?.id\"\r\n *ngFor=\"let content of displayedBlogs\"\r\n class=\"d-flex\">\r\n <a\r\n [routerLink]=\"['/blog', content.newPostTitle]\"\r\n (click)=\"getBlogById(content.articleSlug)\">\r\n <div\r\n class=\"cards h-100\"\r\n [simpoCorner]=\"style?.corners\"\r\n [id]=\"data?.id\">\r\n <img\r\n loading=\"lazy\"\r\n [src]=\"content.img\"\r\n [simpoImageDirective]=\"style?.image\"\r\n [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\"\r\n alt=\"\"\r\n *ngIf=\"content.img\"\r\n loading=\"lazy\" />\r\n <img\r\n loading=\"lazy\"\r\n [simpoImageDirective]=\"style?.image\"\r\n [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\"\r\n *ngIf=\"!content.img\"\r\n loading=\"lazy\" />\r\n <div class=\"p-30\">\r\n <div\r\n class=\"d-flex flex-wrap align-items-center gap-2 mb-2\"\r\n *ngIf=\"content?.tags?.length || content?.categoryName\">\r\n <p class=\"mb-0 p-2 border\" *ngIf=\"content?.categoryName\">\r\n {{ content.categoryName }}\r\n </p>\r\n <ng-container\r\n *ngFor=\"let tag of content?.tags | slice: 0 : 4\">\r\n <p class=\"mb-0 p-2 border\">{{ tag }}</p>\r\n </ng-container>\r\n </div>\r\n <div\r\n class=\"heading-medium title mt-2 fs-20\"\r\n *ngIf=\"blogContent?.display?.showHeading\">\r\n {{\r\n content.postTitle.length > 100\r\n ? content.postTitle.substring(0, 100) + '...\"'\r\n : content.postTitle\r\n }}\r\n <!-- {{content.postTitle}} -->\r\n </div>\r\n <ng-container>\r\n <div\r\n class=\"body-large mt-4 pb-15\"\r\n *ngIf=\"blogContent?.display?.showContent\">\r\n {{\r\n content.postSummary.length > 250\r\n ? content.postSummary.substring(0, 250) + '...'\r\n : content.postSummary\r\n }}\r\n </div>\r\n </ng-container>\r\n\r\n <div\r\n class=\"d-flex justify-content-end p-2 align-items-center\"\r\n *ngIf=\"\r\n content?.author?.content &&\r\n content?.author?.content.length > 0\r\n \">\r\n <p>- {{ content?.author?.content | titlecase }}</p>\r\n </div>\r\n\r\n <!-- <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n <div>\r\n <mat-icon>person</mat-icon> <span class=\"body-large\">{{content?.author?.content | titlecase}}</span>\r\n </div>\r\n <div class=\"calendar_today\">\r\n <mat-icon>calendar_today</mat-icon> <span class=\"body-large\">{{content.createdTimeStamp |\r\n date:'EEEE, MMM, d, y'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"button heading-large\" (click)=\"getBlogById(content.newPostTitle)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n Read More <mat-icon>arrow_right_alt</mat-icon>\r\n </div> -->\r\n </div>\r\n </div>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider\r\n [dividerType]=\"style?.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\r\n [data]=\"data\"\r\n [index]=\"index\"\r\n [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n</section>\r\n<ng-template #elseBlock>\r\n <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>\r\n", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:10px 15px 0}.border{border:1px solid;border-radius:8px}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:15px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:interReg;font-weight:500;justify-content:end}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.no-blog-text-inline{font-size:18px;padding:60px 0;text-align:center}.justify-content-right{justify-content:right}.h-100{height:100%}.gap-20{gap:20px 0px!important}.fs-20{font-size:20px!important}.pb-15{padding-bottom:15px}.ar-none{aspect-ratio:0!important}.blog-category-tabs{display:flex;flex-wrap:nowrap;align-items:center;gap:32px;overflow-x:auto;border-bottom:1px solid #e5e5e5;padding-bottom:14px;margin-bottom:24px;scrollbar-width:none}.blog-category-tabs::-webkit-scrollbar{display:none}.category-tab{flex-shrink:0;padding-bottom:4px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8a8a8a;white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent}.category-tab:hover,.category-tab.active{color:#1a1a1a}\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: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }] }); }
|
|
13286
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BlogListComponent, isStandalone: true, selector: "simpo-blog-list", inputs: { responseData: "responseData", index: "index", edit: "edit", customClass: "customClass", data: "data", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section\r\n [id]=\"data?.id\"\r\n [simpoBackground]=\"style?.background\"\r\n class=\"total-container\"\r\n simpoHover\r\n (hovering)=\"showEditTabs($event)\"\r\n *ngIf=\"\r\n categoryList.length > 0 || (displayedBlogs?.length || 0) > 0 || apiLoading;\r\n else elseBlock\r\n \"\r\n [attr.style]=\"customClass\">\r\n <div\r\n [id]=\"data?.id\"\r\n [simpoOverlay]=\"style?.background\"\r\n [simpoBorder]=\"style?.border\"\r\n [simpoAnimation]=\"style?.animation\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"container-fluid\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"blog-category-tabs\" *ngIf=\"categoryList.length > 0\">\r\n <span\r\n class=\"category-tab\"\r\n [class.active]=\"selectedCategoryId === null\"\r\n (click)=\"selectCategory(null)\"\r\n >All</span\r\n >\r\n <span\r\n class=\"category-tab\"\r\n *ngFor=\"let category of categoryList\"\r\n [class.active]=\"selectedCategoryId === category.id\"\r\n (click)=\"selectCategory(category.id)\">\r\n {{ category.categoryName }}\r\n </span>\r\n </div>\r\n <simpo-card-skeleton-loader\r\n *ngIf=\"apiLoading\"\r\n [showTitles]=\"true\"></simpo-card-skeleton-loader>\r\n <div\r\n class=\"no-blog-text-inline heading-medium\"\r\n *ngIf=\"!apiLoading && (displayedBlogs?.length || 0) === 0\">\r\n Sorry there are no blog posts in this category.\r\n </div>\r\n <div\r\n class=\"row gap-20\"\r\n *ngIf=\"!apiLoading && (displayedBlogs?.length || 0) > 0\">\r\n <div\r\n [simpoColumnDirective]=\"data?.styles?.size\"\r\n [id]=\"data?.id\"\r\n *ngFor=\"let content of displayedBlogs\"\r\n class=\"d-flex\">\r\n <a\r\n [routerLink]=\"['/blog', content.newPostTitle]\"\r\n (click)=\"getBlogById(content.articleSlug)\">\r\n <div\r\n class=\"cards h-100\"\r\n [simpoCorner]=\"style?.corners\"\r\n [id]=\"data?.id\">\r\n <img\r\n loading=\"lazy\"\r\n [src]=\"content.img\"\r\n [simpoImageDirective]=\"style?.image\"\r\n [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\"\r\n alt=\"\"\r\n *ngIf=\"content.img\"\r\n loading=\"lazy\" />\r\n <img\r\n loading=\"lazy\"\r\n [simpoImageDirective]=\"style?.image\"\r\n [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\"\r\n *ngIf=\"!content.img\"\r\n loading=\"lazy\" />\r\n <div class=\"p-30\">\r\n <div\r\n class=\"d-flex flex-wrap align-items-center gap-2 mb-2\"\r\n *ngIf=\"content?.tags?.length || content?.categoryName\">\r\n <p class=\"mb-0 p-2 border\" *ngIf=\"content?.categoryName\">\r\n {{ content.categoryName }}\r\n </p>\r\n <ng-container\r\n *ngFor=\"\r\n let tag of (content?.tags?.length || 0) > 3 && !content.showAllTags\r\n ? (content?.tags | slice: 0 : 2)\r\n : content?.tags\r\n \">\r\n <p class=\"mb-0 p-2 border\">{{ tag | titlecase }}</p>\r\n </ng-container>\r\n <p\r\n class=\"mb-0 p-2 see-more-chip\"\r\n *ngIf=\"(content?.tags?.length || 0) > 3\"\r\n (click)=\"$event.preventDefault(); $event.stopPropagation(); content.showAllTags = !content.showAllTags\">\r\n {{ content.showAllTags ? 'See less' : 'See more' }}\r\n </p>\r\n </div>\r\n <div\r\n class=\"heading-medium title mt-2 fs-20\"\r\n *ngIf=\"blogContent?.display?.showHeading\">\r\n {{\r\n content.postTitle.length > 100\r\n ? content.postTitle.substring(0, 100) + '...\"'\r\n : content.postTitle\r\n }}\r\n <!-- {{content.postTitle}} -->\r\n </div>\r\n <div\r\n class=\"d-flex flex-wrap align-items-center gap-3 blog-meta-row mt-2\"\r\n *ngIf=\"\r\n content.publishedDate ||\r\n content.blogScheduledDate ||\r\n content.createdTimeStamp\r\n \">\r\n <span class=\"blog-meta-item\">\r\n <svg\r\n class=\"meta-icon\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"></rect>\r\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n </svg>\r\n {{\r\n (content.publishedDate ||\r\n content.blogScheduledDate ||\r\n content.createdTimeStamp) | date: 'd MMM y'\r\n }}\r\n </span>\r\n <span class=\"blog-meta-item\">\r\n <svg\r\n class=\"meta-icon\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <path\r\n d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path>\r\n <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n </svg>\r\n {{ content.totalVisits || 0 }}\r\n </span>\r\n </div>\r\n <ng-container>\r\n <div\r\n class=\"body-large mt-4 pb-15\"\r\n *ngIf=\"blogContent?.display?.showContent\">\r\n {{\r\n content.postSummary.length > 250\r\n ? content.postSummary.substring(0, 250) + '...'\r\n : content.postSummary\r\n }}\r\n </div>\r\n </ng-container>\r\n\r\n <div\r\n class=\"d-flex justify-content-end p-2 align-items-center\"\r\n *ngIf=\"\r\n content?.author?.content &&\r\n content?.author?.content.length > 0\r\n \">\r\n <p>- {{ content?.author?.content | titlecase }}</p>\r\n </div>\r\n\r\n <!-- <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n <div>\r\n <mat-icon>person</mat-icon> <span class=\"body-large\">{{content?.author?.content | titlecase}}</span>\r\n </div>\r\n <div class=\"calendar_today\">\r\n <mat-icon>calendar_today</mat-icon> <span class=\"body-large\">{{content.createdTimeStamp |\r\n date:'EEEE, MMM, d, y'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"button heading-large\" (click)=\"getBlogById(content.newPostTitle)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n Read More <mat-icon>arrow_right_alt</mat-icon>\r\n </div> -->\r\n </div>\r\n </div>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider\r\n [dividerType]=\"style?.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\r\n [data]=\"data\"\r\n [index]=\"index\"\r\n [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n</section>\r\n<ng-template #elseBlock>\r\n <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>\r\n", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:10px 15px 0}.border{border:1px solid;border-radius:8px}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:15px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:interReg;font-weight:500;justify-content:end}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.no-blog-text-inline{font-size:18px;padding:60px 0;text-align:center}.justify-content-right{justify-content:right}.h-100{height:100%}.gap-20{gap:20px 0px!important}.fs-20{font-size:20px!important}.pb-15{padding-bottom:15px}.ar-none{aspect-ratio:0!important}.see-more-chip{flex-shrink:0;white-space:nowrap;cursor:pointer;font-size:12px;font-weight:600;text-decoration:underline}.blog-meta-row{font-size:13px;color:#6b6b6b}.blog-meta-item{display:inline-flex;align-items:center;gap:4px}.blog-meta-item .meta-icon{flex-shrink:0}.blog-category-tabs{display:flex;flex-wrap:nowrap;align-items:center;gap:32px;overflow-x:auto;border-bottom:1px solid #e5e5e5;padding-bottom:14px;margin-bottom:24px;scrollbar-width:none}.blog-category-tabs::-webkit-scrollbar{display:none}.category-tab{flex-shrink:0;padding-bottom:4px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8a8a8a;white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent}.category-tab:hover,.category-tab.active{color:#1a1a1a}\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: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }] }); }
|
|
13285
13287
|
}
|
|
13286
13288
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BlogListComponent, decorators: [{
|
|
13287
13289
|
type: Component,
|
|
@@ -13303,7 +13305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
13303
13305
|
SpacingHorizontalDirective,
|
|
13304
13306
|
RouterLink,
|
|
13305
13307
|
CardSkeletonLoaderComponent,
|
|
13306
|
-
], template: "<section\r\n [id]=\"data?.id\"\r\n [simpoBackground]=\"style?.background\"\r\n class=\"total-container\"\r\n simpoHover\r\n (hovering)=\"showEditTabs($event)\"\r\n *ngIf=\"\r\n categoryList.length > 0 || (displayedBlogs?.length || 0) > 0 || apiLoading;\r\n else elseBlock\r\n \"\r\n [attr.style]=\"customClass\">\r\n <div\r\n [id]=\"data?.id\"\r\n [simpoOverlay]=\"style?.background\"\r\n [simpoBorder]=\"style?.border\"\r\n [simpoAnimation]=\"style?.animation\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"container-fluid\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"blog-category-tabs\" *ngIf=\"categoryList.length > 0\">\r\n <span\r\n class=\"category-tab\"\r\n [class.active]=\"selectedCategoryId === null\"\r\n (click)=\"selectCategory(null)\"\r\n >All</span\r\n >\r\n <span\r\n class=\"category-tab\"\r\n *ngFor=\"let category of categoryList\"\r\n [class.active]=\"selectedCategoryId === category.id\"\r\n (click)=\"selectCategory(category.id)\">\r\n {{ category.categoryName }}\r\n </span>\r\n </div>\r\n <simpo-card-skeleton-loader\r\n *ngIf=\"apiLoading\"\r\n [showTitles]=\"true\"></simpo-card-skeleton-loader>\r\n <div\r\n class=\"no-blog-text-inline heading-medium\"\r\n *ngIf=\"!apiLoading && (displayedBlogs?.length || 0) === 0\">\r\n Sorry there are no blog posts in this category.\r\n </div>\r\n <div\r\n class=\"row gap-20\"\r\n *ngIf=\"!apiLoading && (displayedBlogs?.length || 0) > 0\">\r\n <div\r\n [simpoColumnDirective]=\"data?.styles?.size\"\r\n [id]=\"data?.id\"\r\n *ngFor=\"let content of displayedBlogs\"\r\n class=\"d-flex\">\r\n <a\r\n [routerLink]=\"['/blog', content.newPostTitle]\"\r\n (click)=\"getBlogById(content.articleSlug)\">\r\n <div\r\n class=\"cards h-100\"\r\n [simpoCorner]=\"style?.corners\"\r\n [id]=\"data?.id\">\r\n <img\r\n loading=\"lazy\"\r\n [src]=\"content.img\"\r\n [simpoImageDirective]=\"style?.image\"\r\n [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\"\r\n alt=\"\"\r\n *ngIf=\"content.img\"\r\n loading=\"lazy\" />\r\n <img\r\n loading=\"lazy\"\r\n [simpoImageDirective]=\"style?.image\"\r\n [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\"\r\n *ngIf=\"!content.img\"\r\n loading=\"lazy\" />\r\n <div class=\"p-30\">\r\n <div\r\n class=\"d-flex flex-wrap align-items-center gap-2 mb-2\"\r\n *ngIf=\"content?.tags?.length || content?.categoryName\">\r\n <p class=\"mb-0 p-2 border\" *ngIf=\"content?.categoryName\">\r\n {{ content.categoryName }}\r\n </p>\r\n <ng-container\r\n *ngFor=\"let tag of content?.tags | slice: 0 : 4\">\r\n <p class=\"mb-0 p-2 border\">{{ tag }}</p>\r\n </ng-container>\r\n </div>\r\n <div\r\n class=\"heading-medium title mt-2 fs-20\"\r\n *ngIf=\"blogContent?.display?.showHeading\">\r\n {{\r\n content.postTitle.length > 100\r\n ? content.postTitle.substring(0, 100) + '...\"'\r\n : content.postTitle\r\n }}\r\n <!-- {{content.postTitle}} -->\r\n </div>\r\n <ng-container>\r\n <div\r\n class=\"body-large mt-4 pb-15\"\r\n *ngIf=\"blogContent?.display?.showContent\">\r\n {{\r\n content.postSummary.length > 250\r\n ? content.postSummary.substring(0, 250) + '...'\r\n : content.postSummary\r\n }}\r\n </div>\r\n </ng-container>\r\n\r\n <div\r\n class=\"d-flex justify-content-end p-2 align-items-center\"\r\n *ngIf=\"\r\n content?.author?.content &&\r\n content?.author?.content.length > 0\r\n \">\r\n <p>- {{ content?.author?.content | titlecase }}</p>\r\n </div>\r\n\r\n <!-- <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n <div>\r\n <mat-icon>person</mat-icon> <span class=\"body-large\">{{content?.author?.content | titlecase}}</span>\r\n </div>\r\n <div class=\"calendar_today\">\r\n <mat-icon>calendar_today</mat-icon> <span class=\"body-large\">{{content.createdTimeStamp |\r\n date:'EEEE, MMM, d, y'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"button heading-large\" (click)=\"getBlogById(content.newPostTitle)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n Read More <mat-icon>arrow_right_alt</mat-icon>\r\n </div> -->\r\n </div>\r\n </div>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider\r\n [dividerType]=\"style?.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\r\n [data]=\"data\"\r\n [index]=\"index\"\r\n [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n</section>\r\n<ng-template #elseBlock>\r\n <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>\r\n", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:10px 15px 0}.border{border:1px solid;border-radius:8px}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:15px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:interReg;font-weight:500;justify-content:end}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.no-blog-text-inline{font-size:18px;padding:60px 0;text-align:center}.justify-content-right{justify-content:right}.h-100{height:100%}.gap-20{gap:20px 0px!important}.fs-20{font-size:20px!important}.pb-15{padding-bottom:15px}.ar-none{aspect-ratio:0!important}.blog-category-tabs{display:flex;flex-wrap:nowrap;align-items:center;gap:32px;overflow-x:auto;border-bottom:1px solid #e5e5e5;padding-bottom:14px;margin-bottom:24px;scrollbar-width:none}.blog-category-tabs::-webkit-scrollbar{display:none}.category-tab{flex-shrink:0;padding-bottom:4px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8a8a8a;white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent}.category-tab:hover,.category-tab.active{color:#1a1a1a}\n"] }]
|
|
13308
|
+
], template: "<section\r\n [id]=\"data?.id\"\r\n [simpoBackground]=\"style?.background\"\r\n class=\"total-container\"\r\n simpoHover\r\n (hovering)=\"showEditTabs($event)\"\r\n *ngIf=\"\r\n categoryList.length > 0 || (displayedBlogs?.length || 0) > 0 || apiLoading;\r\n else elseBlock\r\n \"\r\n [attr.style]=\"customClass\">\r\n <div\r\n [id]=\"data?.id\"\r\n [simpoOverlay]=\"style?.background\"\r\n [simpoBorder]=\"style?.border\"\r\n [simpoAnimation]=\"style?.animation\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"container-fluid\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"blog-category-tabs\" *ngIf=\"categoryList.length > 0\">\r\n <span\r\n class=\"category-tab\"\r\n [class.active]=\"selectedCategoryId === null\"\r\n (click)=\"selectCategory(null)\"\r\n >All</span\r\n >\r\n <span\r\n class=\"category-tab\"\r\n *ngFor=\"let category of categoryList\"\r\n [class.active]=\"selectedCategoryId === category.id\"\r\n (click)=\"selectCategory(category.id)\">\r\n {{ category.categoryName }}\r\n </span>\r\n </div>\r\n <simpo-card-skeleton-loader\r\n *ngIf=\"apiLoading\"\r\n [showTitles]=\"true\"></simpo-card-skeleton-loader>\r\n <div\r\n class=\"no-blog-text-inline heading-medium\"\r\n *ngIf=\"!apiLoading && (displayedBlogs?.length || 0) === 0\">\r\n Sorry there are no blog posts in this category.\r\n </div>\r\n <div\r\n class=\"row gap-20\"\r\n *ngIf=\"!apiLoading && (displayedBlogs?.length || 0) > 0\">\r\n <div\r\n [simpoColumnDirective]=\"data?.styles?.size\"\r\n [id]=\"data?.id\"\r\n *ngFor=\"let content of displayedBlogs\"\r\n class=\"d-flex\">\r\n <a\r\n [routerLink]=\"['/blog', content.newPostTitle]\"\r\n (click)=\"getBlogById(content.articleSlug)\">\r\n <div\r\n class=\"cards h-100\"\r\n [simpoCorner]=\"style?.corners\"\r\n [id]=\"data?.id\">\r\n <img\r\n loading=\"lazy\"\r\n [src]=\"content.img\"\r\n [simpoImageDirective]=\"style?.image\"\r\n [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\"\r\n alt=\"\"\r\n *ngIf=\"content.img\"\r\n loading=\"lazy\" />\r\n <img\r\n loading=\"lazy\"\r\n [simpoImageDirective]=\"style?.image\"\r\n [id]=\"data?.id\"\r\n [simpoCorner]=\"style?.corners\"\r\n src=\"https://dev-beeos.s3.amazonaws.com/library-media/541329c1719236963199pexels-pixabay-262508.jpg\"\r\n alt=\"\"\r\n *ngIf=\"!content.img\"\r\n loading=\"lazy\" />\r\n <div class=\"p-30\">\r\n <div\r\n class=\"d-flex flex-wrap align-items-center gap-2 mb-2\"\r\n *ngIf=\"content?.tags?.length || content?.categoryName\">\r\n <p class=\"mb-0 p-2 border\" *ngIf=\"content?.categoryName\">\r\n {{ content.categoryName }}\r\n </p>\r\n <ng-container\r\n *ngFor=\"\r\n let tag of (content?.tags?.length || 0) > 3 && !content.showAllTags\r\n ? (content?.tags | slice: 0 : 2)\r\n : content?.tags\r\n \">\r\n <p class=\"mb-0 p-2 border\">{{ tag | titlecase }}</p>\r\n </ng-container>\r\n <p\r\n class=\"mb-0 p-2 see-more-chip\"\r\n *ngIf=\"(content?.tags?.length || 0) > 3\"\r\n (click)=\"$event.preventDefault(); $event.stopPropagation(); content.showAllTags = !content.showAllTags\">\r\n {{ content.showAllTags ? 'See less' : 'See more' }}\r\n </p>\r\n </div>\r\n <div\r\n class=\"heading-medium title mt-2 fs-20\"\r\n *ngIf=\"blogContent?.display?.showHeading\">\r\n {{\r\n content.postTitle.length > 100\r\n ? content.postTitle.substring(0, 100) + '...\"'\r\n : content.postTitle\r\n }}\r\n <!-- {{content.postTitle}} -->\r\n </div>\r\n <div\r\n class=\"d-flex flex-wrap align-items-center gap-3 blog-meta-row mt-2\"\r\n *ngIf=\"\r\n content.publishedDate ||\r\n content.blogScheduledDate ||\r\n content.createdTimeStamp\r\n \">\r\n <span class=\"blog-meta-item\">\r\n <svg\r\n class=\"meta-icon\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"></rect>\r\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"></line>\r\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"></line>\r\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"></line>\r\n </svg>\r\n {{\r\n (content.publishedDate ||\r\n content.blogScheduledDate ||\r\n content.createdTimeStamp) | date: 'd MMM y'\r\n }}\r\n </span>\r\n <span class=\"blog-meta-item\">\r\n <svg\r\n class=\"meta-icon\"\r\n width=\"14\"\r\n height=\"14\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-width=\"2\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <path\r\n d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"></path>\r\n <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\r\n </svg>\r\n {{ content.totalVisits || 0 }}\r\n </span>\r\n </div>\r\n <ng-container>\r\n <div\r\n class=\"body-large mt-4 pb-15\"\r\n *ngIf=\"blogContent?.display?.showContent\">\r\n {{\r\n content.postSummary.length > 250\r\n ? content.postSummary.substring(0, 250) + '...'\r\n : content.postSummary\r\n }}\r\n </div>\r\n </ng-container>\r\n\r\n <div\r\n class=\"d-flex justify-content-end p-2 align-items-center\"\r\n *ngIf=\"\r\n content?.author?.content &&\r\n content?.author?.content.length > 0\r\n \">\r\n <p>- {{ content?.author?.content | titlecase }}</p>\r\n </div>\r\n\r\n <!-- <div class=\"authors\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n <div>\r\n <mat-icon>person</mat-icon> <span class=\"body-large\">{{content?.author?.content | titlecase}}</span>\r\n </div>\r\n <div class=\"calendar_today\">\r\n <mat-icon>calendar_today</mat-icon> <span class=\"body-large\">{{content.createdTimeStamp |\r\n date:'EEEE, MMM, d, y'}}</span>\r\n </div>\r\n </div>\r\n <div class=\"button heading-large\" (click)=\"getBlogById(content.newPostTitle)\" [ngClass]=\"'justify-content-' + (style?.layout?.align || '')\">\r\n Read More <mat-icon>arrow_right_alt</mat-icon>\r\n </div> -->\r\n </div>\r\n </div>\r\n </a>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider\r\n [dividerType]=\"style?.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\r\n [data]=\"data\"\r\n [index]=\"index\"\r\n [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n</section>\r\n<ng-template #elseBlock>\r\n <div class=\"no-blog-text heading-medium\">Sorry there are no blog posts.</div>\r\n</ng-template>\r\n", styles: [".cards{box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f}.cards img{width:100%;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.p-30{padding:10px 15px 0}.border{border:1px solid;border-radius:8px}.authors{display:flex;gap:35px;margin-top:40px}.authors div{display:flex}.authors .calendar_today{align-items:center}.authors .calendar_today mat-icon{font-size:20px}.button{font-size:15px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:interReg;font-weight:500;justify-content:end}.mt-20{margin-top:20px}.total-container{position:relative;height:auto}.hover_effect{position:absolute;width:100%;top:0;left:0;height:100%}.no-blog-text{font-size:24px;line-height:36px;height:40vh;display:flex;align-items:center;justify-content:center}.no-blog-text-inline{font-size:18px;padding:60px 0;text-align:center}.justify-content-right{justify-content:right}.h-100{height:100%}.gap-20{gap:20px 0px!important}.fs-20{font-size:20px!important}.pb-15{padding-bottom:15px}.ar-none{aspect-ratio:0!important}.see-more-chip{flex-shrink:0;white-space:nowrap;cursor:pointer;font-size:12px;font-weight:600;text-decoration:underline}.blog-meta-row{font-size:13px;color:#6b6b6b}.blog-meta-item{display:inline-flex;align-items:center;gap:4px}.blog-meta-item .meta-icon{flex-shrink:0}.blog-category-tabs{display:flex;flex-wrap:nowrap;align-items:center;gap:32px;overflow-x:auto;border-bottom:1px solid #e5e5e5;padding-bottom:14px;margin-bottom:24px;scrollbar-width:none}.blog-category-tabs::-webkit-scrollbar{display:none}.category-tab{flex-shrink:0;padding-bottom:4px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8a8a8a;white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent}.category-tab:hover,.category-tab.active{color:#1a1a1a}\n"] }]
|
|
13307
13309
|
}], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: undefined, decorators: [{
|
|
13308
13310
|
type: Inject,
|
|
13309
13311
|
args: [LOCAL_STORAGE]
|
|
@@ -13830,11 +13832,11 @@ class ViewBlogComponent {
|
|
|
13830
13832
|
anchors.forEach(anchor => this.tocObserver?.observe(anchor));
|
|
13831
13833
|
}
|
|
13832
13834
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ViewBlogComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i0.ElementRef }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13833
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ViewBlogComponent, isStandalone: true, selector: "simpo-view-blog", inputs: { responseData: "responseData" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"main-section\">\n <div class=\"blog-container\">\n <h1 class=\"blog-title\" *ngIf=\"responseData?.postTitle\">\n {{ responseData.postTitle }}\n </h1>\n\n <div class=\"meta-bar\">\n <div class=\"meta-item\">\n <span class=\"meta-label\">Publication Date</span>\n <span class=\"meta-value\">{{\n responseData?.publishedDate ||\n responseData?.blogScheduledDate ||\n responseData?.createdTimeStamp | date: 'd MMMM y'\n }}</span>\n </div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Author</span>\n <span class=\"meta-value\">{{\n responseData?.author?.content || '\u2014'\n }}</span>\n </div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Read Time</span>\n <span class=\"meta-value\"\n >{{ responseData?.readTime || '\u2014' }} min read</span\n >\n </div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Views</span>\n <span class=\"meta-value\">{{ responseData?.totalVisits || 0 }}+</span>\n </div>\n </div>\n\n <div class=\"tags-row\" *ngIf=\"tags.length\">\n <span class=\"tag-chip\" *ngFor=\"let tag of tags\">{{ tag | titlecase }}</span>\n </div>\n\n <div class=\"blog-layout\" [class.with-toc]=\"tocItems.length > 1\">\n <aside class=\"toc-sidebar\" *ngIf=\"tocItems.length > 1\">\n <button\n type=\"button\"\n class=\"toc-toggle\"\n (click)=\"tocOpen = !tocOpen\"\n [attr.aria-expanded]=\"tocOpen\">\n <span>Table Of Content</span>\n <span class=\"toc-toggle-icon\" [class.open]=\"tocOpen\"></span>\n </button>\n <div class=\"toc-header\">Table Of Content</div>\n <nav class=\"toc-list\" [class.open]=\"tocOpen\">\n <a\n *ngFor=\"let toc of tocItems\"\n class=\"toc-link\"\n [class.toc-top]=\"toc.level <= 2\"\n [style.paddingLeft.px]=\"(toc.level - 2) * 14\"\n [class.active]=\"activeTocId === toc.id\"\n [href]=\"'#block-' + toc.id\"\n (click)=\"scrollToBlock($event, toc.id)\">\n {{ toc.text }}\n </a>\n </nav>\n </aside>\n\n <div class=\"blog-details\">\n <ng-container *ngFor=\"let item of responseData?.blocks\">\n <div\n *ngIf=\"item.type == 'header' && hasVisibleText(item.data?.text)\"\n [id]=\"'block-' + item.id\"\n [class.toc-anchor]=\"isTocAnchor(item.id)\">\n <h1 *ngIf=\"item.data.level == 1\" [innerHTML]=\"item.data.text\"></h1>\n <h2 *ngIf=\"item.data.level == 2\" [innerHTML]=\"item.data.text\"></h2>\n <h3 *ngIf=\"item.data.level == 3\" [innerHTML]=\"item.data.text\"></h3>\n <h4 *ngIf=\"item.data.level == 4\" [innerHTML]=\"item.data.text\"></h4>\n <h5 *ngIf=\"item.data.level == 5\" [innerHTML]=\"item.data.text\"></h5>\n <h6 *ngIf=\"item.data.level == 6\" [innerHTML]=\"item.data.text\"></h6>\n </div>\n <div\n *ngIf=\"item.type == 'paragraph' && hasVisibleText(item.data?.text)\"\n [id]=\"'block-' + item.id\"\n [class.toc-anchor]=\"isTocAnchor(item.id)\">\n <p\n class=\"inner-text\"\n [class.heading-paragraph]=\"isTocAnchor(item.id)\"\n [innerHTML]=\"item.data.text\"></p>\n </div>\n <div *ngIf=\"item.type == 'list'\">\n <div *ngIf=\"item.data.style == 'ordered'\">\n <ol class=\"list-style\">\n <ng-container *ngFor=\"let list of item.data.items\">\n <li [innerHTML]=\"list\"></li>\n </ng-container>\n </ol>\n </div>\n <div *ngIf=\"item.data.style == 'unordered'\">\n <ul class=\"list-style\">\n <ng-container *ngFor=\"let list of item.data.items\">\n <li [innerHTML]=\"list\"></li>\n </ng-container>\n </ul>\n </div>\n </div>\n <div *ngIf=\"item.type == 'delimiter'\" class=\"ce-delimiter\"></div>\n <div\n *ngIf=\"item.type == 'image'\"\n class=\"image-container\"\n [class.hero-image]=\"item.id === heroImageBlockId\">\n <img loading=\"lazy\" [src]=\"item.data.file.url\" alt=\"\" />\n <span class=\"image-caption\" *ngIf=\"item.data?.caption\">{{\n item.data.caption\n }}</span>\n </div>\n <div *ngIf=\"item.type == 'table'\">\n <div class=\"table-wrapper\">\n <table\n [class.table-no-heading]=\"item.data.withHeadings === false\">\n <ng-container *ngFor=\"let data of item.data.content\">\n <tr>\n <ng-container *ngFor=\"let item of data\">\n <td [innerHTML]=\"item\"></td>\n </ng-container>\n </tr>\n </ng-container>\n </table>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <simpo-recent-blog-post-section\n [popular]=\"true\"\n [businessId]=\"responseData?.businessId\"\n [excludeBlogId]=\"responseData?.id\"\n [edit]=\"false\">\n </simpo-recent-blog-post-section>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main-section{padding:2% 5%;background-color:#fff}.blog-container{width:85%;margin:0 auto}.blog-title{font-size:2em;font-weight:700;line-height:1.25em;margin:0 0 20px}.meta-bar{display:flex;gap:12px;margin-bottom:28px}.meta-item{flex:1;background-color:#f5f5f5;border-radius:6px;padding:12px 10px;text-align:center}.meta-label{display:block;font-size:.75em;color:#8a8a8a;letter-spacing:.02em;margin-bottom:6px}.meta-value{display:block;font-size:.95em;font-weight:700;color:#1a1a1a}.blog-layout{display:block}.blog-layout.with-toc{display:flex;align-items:flex-start;gap:40px}.with-toc .blog-details{flex:1;min-width:0;order:1}.toc-sidebar{width:340px;flex-shrink:0;position:sticky;top:20px;background-color:#f5f5f5;border-radius:6px;padding:16px;order:2}.toc-header{font-weight:700;font-size:1.05em;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid #dcdcdc}.toc-toggle{display:none;width:100%;align-items:center;justify-content:space-between;background:none;border:none;font-weight:700;font-size:1.05em;padding:0;cursor:pointer}.toc-toggle-icon{width:10px;height:10px;border-right:2px solid #1a1a1a;border-bottom:2px solid #1a1a1a;transform:rotate(45deg);transition:transform .2s ease}.toc-toggle-icon.open{transform:rotate(-135deg)}.toc-list{display:flex;flex-direction:column;gap:14px;max-height:600px;overflow-y:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:#c9c9c9 transparent}.toc-list::-webkit-scrollbar{display:block;width:6px}.toc-list::-webkit-scrollbar-track{background-color:transparent}.toc-list::-webkit-scrollbar-thumb{display:block;background-color:#c9c9c9;border-radius:3px}.toc-link{color:#6f6f6f;text-decoration:none;font-size:.92em;line-height:1.4em}.toc-link:hover{color:#1a1a1a}.toc-link.active{color:#1a1a1a;font-weight:700}.toc-link.toc-top{font-weight:700;color:#1a1a1a}.tags-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}.tag-chip{background-color:#f5f5f5;border:1px solid #ececec;border-radius:999px;padding:6px 14px;font-size:.82em;color:#4a4a4a}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}.table-wrapper{width:100%;overflow-x:auto;margin:16px 0;border-radius:8px;border:1px solid #ececec}table{border-collapse:collapse;width:100%}th,td{border:1px solid #ececec;padding:10px 14px;text-align:left}table:not(.table-no-heading) tr:first-child td{background-color:#eee;font-weight:700;text-transform:uppercase;font-size:.82em}table:not(.table-no-heading) tr:not(:first-child):nth-child(2n) td{background-color:#fafafa}table.table-no-heading tr:nth-child(odd) td{background-color:#fafafa}.table-wrapper img{max-width:100%;height:auto;display:block;border-radius:4px}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:16px 0}.image-container img{width:100%;display:block;border-radius:8px;object-fit:cover}.image-container:not(.hero-image) img{aspect-ratio:16 / 9}.image-container.hero-image{margin:0 0 24px}.image-container.hero-image img{aspect-ratio:21 / 9;border-radius:12px}.image-caption{display:block;text-align:center;font-size:.85em;color:#8a8a8a;margin-top:8px}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}h2,h3,h4,h5,h6,.inner-text.heading-paragraph{font-weight:700;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid #ececec}.list-style{margin:16px 0;padding-left:22px;list-style-position:outside}.list-style li{text-align:left;line-height:1.6em;padding-left:6px}.list-style li:not(:last-child){margin-bottom:10px}.list-style li::marker{color:#1a1a1a;font-weight:700}@media only screen and (max-width: 900px){.blog-container{width:100%}.blog-layout.with-toc{flex-direction:column}.toc-sidebar{width:100%;position:static;box-sizing:border-box;order:0}.with-toc .blog-details{order:1}.toc-header{display:none}.toc-toggle{display:flex}.toc-list{display:none;margin-top:12px}.toc-list.open{display:flex}.meta-bar{flex-wrap:wrap}.meta-item{flex-basis:calc(50% - 6px)}}@media only screen and (max-width: 500px){.blog-details{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: RecentBlogPostSectionComponent, selector: "simpo-recent-blog-post-section", inputs: ["data", "index", "edit", "delete", "customClass", "nextComponentColor", "responseData", "popular", "businessId", "excludeBlogId", "size"] }] }); }
|
|
13835
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ViewBlogComponent, isStandalone: true, selector: "simpo-view-blog", inputs: { responseData: "responseData" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"main-section\">\n <div class=\"blog-container\">\n <h1 class=\"blog-title\" *ngIf=\"responseData?.postTitle\">\n {{ responseData.postTitle }}\n </h1>\n\n <div class=\"meta-bar\">\n <div class=\"meta-item\">\n <span class=\"meta-label\">Publication Date</span>\n <span class=\"meta-value\">{{\n responseData?.publishedDate ||\n responseData?.blogScheduledDate ||\n responseData?.createdTimeStamp | date: 'd MMMM y'\n }}</span>\n </div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Author</span>\n <span class=\"meta-value\">{{\n responseData?.author?.content || '\u2014'\n }}</span>\n </div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Read Time</span>\n <span class=\"meta-value\"\n >{{ responseData?.readTime || '\u2014' }} min read</span\n >\n </div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Views</span>\n <span class=\"meta-value\">{{ responseData?.totalVisits || 0 }}+</span>\n </div>\n </div>\n\n <div class=\"tags-row\" *ngIf=\"tags.length\">\n <span class=\"tag-chip\" *ngFor=\"let tag of tags\">{{ tag | titlecase }}</span>\n </div>\n\n <div class=\"blog-layout\" [class.with-toc]=\"tocItems.length > 1\">\n <aside class=\"toc-sidebar\" *ngIf=\"tocItems.length > 1\">\n <button\n type=\"button\"\n class=\"toc-toggle\"\n (click)=\"tocOpen = !tocOpen\"\n [attr.aria-expanded]=\"tocOpen\">\n <span>Table Of Content</span>\n <span class=\"toc-toggle-icon\" [class.open]=\"tocOpen\"></span>\n </button>\n <div class=\"toc-header\">Table Of Content</div>\n <nav class=\"toc-list\" [class.open]=\"tocOpen\">\n <a\n *ngFor=\"let toc of tocItems\"\n class=\"toc-link\"\n [class.toc-top]=\"toc.level <= 2\"\n [style.paddingLeft.px]=\"(toc.level - 2) * 14\"\n [class.active]=\"activeTocId === toc.id\"\n [href]=\"'#block-' + toc.id\"\n (click)=\"scrollToBlock($event, toc.id)\">\n {{ toc.text }}\n </a>\n </nav>\n </aside>\n\n <div class=\"blog-details\">\n <ng-container *ngFor=\"let item of responseData?.blocks\">\n <div\n *ngIf=\"item.type == 'header' && hasVisibleText(item.data?.text)\"\n [id]=\"'block-' + item.id\"\n [class.toc-anchor]=\"isTocAnchor(item.id)\">\n <h1 *ngIf=\"item.data.level == 1\" [innerHTML]=\"item.data.text\"></h1>\n <h2 *ngIf=\"item.data.level == 2\" [innerHTML]=\"item.data.text\"></h2>\n <h3 *ngIf=\"item.data.level == 3\" [innerHTML]=\"item.data.text\"></h3>\n <h4 *ngIf=\"item.data.level == 4\" [innerHTML]=\"item.data.text\"></h4>\n <h5 *ngIf=\"item.data.level == 5\" [innerHTML]=\"item.data.text\"></h5>\n <h6 *ngIf=\"item.data.level == 6\" [innerHTML]=\"item.data.text\"></h6>\n </div>\n <div\n *ngIf=\"item.type == 'paragraph' && hasVisibleText(item.data?.text)\"\n [id]=\"'block-' + item.id\"\n [class.toc-anchor]=\"isTocAnchor(item.id)\">\n <p\n class=\"inner-text\"\n [class.heading-paragraph]=\"isTocAnchor(item.id)\"\n [innerHTML]=\"item.data.text\"></p>\n </div>\n <div *ngIf=\"item.type == 'list'\">\n <div *ngIf=\"item.data.style == 'ordered'\">\n <ol class=\"list-style\">\n <ng-container *ngFor=\"let list of item.data.items\">\n <li [innerHTML]=\"list\"></li>\n </ng-container>\n </ol>\n </div>\n <div *ngIf=\"item.data.style == 'unordered'\">\n <ul class=\"list-style\">\n <ng-container *ngFor=\"let list of item.data.items\">\n <li [innerHTML]=\"list\"></li>\n </ng-container>\n </ul>\n </div>\n </div>\n <div *ngIf=\"item.type == 'delimiter'\" class=\"ce-delimiter\"></div>\n <div\n *ngIf=\"item.type == 'image'\"\n class=\"image-container\"\n [class.hero-image]=\"item.id === heroImageBlockId\">\n <img loading=\"lazy\" [src]=\"item.data.file.url\" alt=\"\" />\n <span class=\"image-caption\" *ngIf=\"item.data?.caption\">{{\n item.data.caption\n }}</span>\n </div>\n <div *ngIf=\"item.type == 'table'\">\n <div class=\"table-wrapper\">\n <table\n [class.table-no-heading]=\"item.data.withHeadings === false\">\n <ng-container *ngFor=\"let data of item.data.content\">\n <tr>\n <ng-container *ngFor=\"let item of data\">\n <td [innerHTML]=\"item\"></td>\n </ng-container>\n </tr>\n </ng-container>\n </table>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <simpo-recent-blog-post-section\n [popular]=\"true\"\n [businessId]=\"responseData?.businessId\"\n [excludeBlogId]=\"responseData?.id\"\n [edit]=\"false\">\n </simpo-recent-blog-post-section>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main-section{padding:2% 5%;background-color:#fff}.blog-container{width:85%;margin:0 auto}.blog-title{font-size:2em;font-weight:700;line-height:1.25em;margin:0 0 20px}.meta-bar{display:flex;gap:12px;margin-bottom:28px}.meta-item{flex:1;background-color:#f5f5f5;border-radius:6px;padding:12px 10px;text-align:center}.meta-label{display:block;font-size:.75em;color:#8a8a8a;letter-spacing:.02em;margin-bottom:6px}.meta-value{display:block;font-size:.95em;font-weight:700;color:#1a1a1a}.blog-layout{display:block}.blog-layout.with-toc{display:flex;align-items:flex-start;gap:40px}.with-toc .blog-details{flex:1;min-width:0;order:1}.toc-sidebar{width:340px;flex-shrink:0;position:sticky;top:20px;background-color:#f5f5f5;border-radius:6px;padding:16px;order:2}.toc-header{font-weight:700;font-size:1.05em;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid #dcdcdc}.toc-toggle{display:none;width:100%;align-items:center;justify-content:space-between;background:none;border:none;font-weight:700;font-size:1.05em;padding:0;cursor:pointer}.toc-toggle-icon{width:10px;height:10px;border-right:2px solid #1a1a1a;border-bottom:2px solid #1a1a1a;transform:rotate(45deg);transition:transform .2s ease}.toc-toggle-icon.open{transform:rotate(-135deg)}.toc-list{display:flex;flex-direction:column;gap:14px;max-height:600px;overflow-y:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:#c9c9c9 transparent}.toc-list::-webkit-scrollbar{display:block;width:6px}.toc-list::-webkit-scrollbar-track{background-color:transparent}.toc-list::-webkit-scrollbar-thumb{display:block;background-color:#c9c9c9;border-radius:3px}.toc-link{color:#6f6f6f;text-decoration:none;font-size:.92em;line-height:1.4em;outline:none}.toc-link:hover{color:#1a1a1a}.toc-link.active{color:#1a1a1a;font-weight:700}.toc-link.toc-top{font-weight:700;color:#1a1a1a}.tags-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}.tag-chip{background-color:#f5f5f5;border:1px solid #ececec;border-radius:999px;padding:6px 14px;font-size:.82em;color:#4a4a4a}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}.table-wrapper{width:100%;overflow-x:auto;margin:16px 0;border-radius:8px;border:1px solid #ececec}table{border-collapse:collapse;width:100%}th,td{border:1px solid #ececec;padding:10px 14px;text-align:left}table:not(.table-no-heading) tr:first-child td{background-color:#eee;font-weight:700;text-transform:uppercase;font-size:.82em}table:not(.table-no-heading) tr:not(:first-child):nth-child(2n) td{background-color:#fafafa}table.table-no-heading tr:nth-child(odd) td{background-color:#fafafa}.table-wrapper img{max-width:100%;height:auto;display:block;border-radius:4px}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:16px 0}.image-container img{width:100%;display:block;border-radius:8px;object-fit:cover}.image-container:not(.hero-image) img{aspect-ratio:16 / 9}.image-container.hero-image{margin:0 0 24px}.image-container.hero-image img{aspect-ratio:21 / 9;border-radius:12px}.image-caption{display:block;text-align:center;font-size:.85em;color:#8a8a8a;margin-top:8px}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}h2,h3,h4,h5,h6,.inner-text.heading-paragraph{font-weight:700;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid #ececec}.list-style{margin:16px 0;padding-left:22px;list-style-position:outside}.list-style li{text-align:left;line-height:1.6em;padding-left:6px}.list-style li:not(:last-child){margin-bottom:10px}.list-style li::marker{color:#1a1a1a;font-weight:700}@media only screen and (max-width: 900px){.blog-container{width:100%}.blog-layout.with-toc{flex-direction:column}.toc-sidebar{width:100%;position:static;box-sizing:border-box;order:0}.with-toc .blog-details{order:1}.toc-header{display:none}.toc-toggle{display:flex}.toc-list{display:none;margin-top:12px}.toc-list.open{display:flex}.meta-bar{flex-wrap:wrap}.meta-item{flex-basis:calc(50% - 6px)}}@media only screen and (max-width: 500px){.blog-details{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "component", type: RecentBlogPostSectionComponent, selector: "simpo-recent-blog-post-section", inputs: ["data", "index", "edit", "delete", "customClass", "nextComponentColor", "responseData", "popular", "businessId", "excludeBlogId", "size"] }] }); }
|
|
13834
13836
|
}
|
|
13835
13837
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ViewBlogComponent, decorators: [{
|
|
13836
13838
|
type: Component,
|
|
13837
|
-
args: [{ selector: 'simpo-view-blog', standalone: true, imports: [CommonModule, DatePipe, RecentBlogPostSectionComponent], template: "<section class=\"main-section\">\n <div class=\"blog-container\">\n <h1 class=\"blog-title\" *ngIf=\"responseData?.postTitle\">\n {{ responseData.postTitle }}\n </h1>\n\n <div class=\"meta-bar\">\n <div class=\"meta-item\">\n <span class=\"meta-label\">Publication Date</span>\n <span class=\"meta-value\">{{\n responseData?.publishedDate ||\n responseData?.blogScheduledDate ||\n responseData?.createdTimeStamp | date: 'd MMMM y'\n }}</span>\n </div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Author</span>\n <span class=\"meta-value\">{{\n responseData?.author?.content || '\u2014'\n }}</span>\n </div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Read Time</span>\n <span class=\"meta-value\"\n >{{ responseData?.readTime || '\u2014' }} min read</span\n >\n </div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Views</span>\n <span class=\"meta-value\">{{ responseData?.totalVisits || 0 }}+</span>\n </div>\n </div>\n\n <div class=\"tags-row\" *ngIf=\"tags.length\">\n <span class=\"tag-chip\" *ngFor=\"let tag of tags\">{{ tag | titlecase }}</span>\n </div>\n\n <div class=\"blog-layout\" [class.with-toc]=\"tocItems.length > 1\">\n <aside class=\"toc-sidebar\" *ngIf=\"tocItems.length > 1\">\n <button\n type=\"button\"\n class=\"toc-toggle\"\n (click)=\"tocOpen = !tocOpen\"\n [attr.aria-expanded]=\"tocOpen\">\n <span>Table Of Content</span>\n <span class=\"toc-toggle-icon\" [class.open]=\"tocOpen\"></span>\n </button>\n <div class=\"toc-header\">Table Of Content</div>\n <nav class=\"toc-list\" [class.open]=\"tocOpen\">\n <a\n *ngFor=\"let toc of tocItems\"\n class=\"toc-link\"\n [class.toc-top]=\"toc.level <= 2\"\n [style.paddingLeft.px]=\"(toc.level - 2) * 14\"\n [class.active]=\"activeTocId === toc.id\"\n [href]=\"'#block-' + toc.id\"\n (click)=\"scrollToBlock($event, toc.id)\">\n {{ toc.text }}\n </a>\n </nav>\n </aside>\n\n <div class=\"blog-details\">\n <ng-container *ngFor=\"let item of responseData?.blocks\">\n <div\n *ngIf=\"item.type == 'header' && hasVisibleText(item.data?.text)\"\n [id]=\"'block-' + item.id\"\n [class.toc-anchor]=\"isTocAnchor(item.id)\">\n <h1 *ngIf=\"item.data.level == 1\" [innerHTML]=\"item.data.text\"></h1>\n <h2 *ngIf=\"item.data.level == 2\" [innerHTML]=\"item.data.text\"></h2>\n <h3 *ngIf=\"item.data.level == 3\" [innerHTML]=\"item.data.text\"></h3>\n <h4 *ngIf=\"item.data.level == 4\" [innerHTML]=\"item.data.text\"></h4>\n <h5 *ngIf=\"item.data.level == 5\" [innerHTML]=\"item.data.text\"></h5>\n <h6 *ngIf=\"item.data.level == 6\" [innerHTML]=\"item.data.text\"></h6>\n </div>\n <div\n *ngIf=\"item.type == 'paragraph' && hasVisibleText(item.data?.text)\"\n [id]=\"'block-' + item.id\"\n [class.toc-anchor]=\"isTocAnchor(item.id)\">\n <p\n class=\"inner-text\"\n [class.heading-paragraph]=\"isTocAnchor(item.id)\"\n [innerHTML]=\"item.data.text\"></p>\n </div>\n <div *ngIf=\"item.type == 'list'\">\n <div *ngIf=\"item.data.style == 'ordered'\">\n <ol class=\"list-style\">\n <ng-container *ngFor=\"let list of item.data.items\">\n <li [innerHTML]=\"list\"></li>\n </ng-container>\n </ol>\n </div>\n <div *ngIf=\"item.data.style == 'unordered'\">\n <ul class=\"list-style\">\n <ng-container *ngFor=\"let list of item.data.items\">\n <li [innerHTML]=\"list\"></li>\n </ng-container>\n </ul>\n </div>\n </div>\n <div *ngIf=\"item.type == 'delimiter'\" class=\"ce-delimiter\"></div>\n <div\n *ngIf=\"item.type == 'image'\"\n class=\"image-container\"\n [class.hero-image]=\"item.id === heroImageBlockId\">\n <img loading=\"lazy\" [src]=\"item.data.file.url\" alt=\"\" />\n <span class=\"image-caption\" *ngIf=\"item.data?.caption\">{{\n item.data.caption\n }}</span>\n </div>\n <div *ngIf=\"item.type == 'table'\">\n <div class=\"table-wrapper\">\n <table\n [class.table-no-heading]=\"item.data.withHeadings === false\">\n <ng-container *ngFor=\"let data of item.data.content\">\n <tr>\n <ng-container *ngFor=\"let item of data\">\n <td [innerHTML]=\"item\"></td>\n </ng-container>\n </tr>\n </ng-container>\n </table>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <simpo-recent-blog-post-section\n [popular]=\"true\"\n [businessId]=\"responseData?.businessId\"\n [excludeBlogId]=\"responseData?.id\"\n [edit]=\"false\">\n </simpo-recent-blog-post-section>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main-section{padding:2% 5%;background-color:#fff}.blog-container{width:85%;margin:0 auto}.blog-title{font-size:2em;font-weight:700;line-height:1.25em;margin:0 0 20px}.meta-bar{display:flex;gap:12px;margin-bottom:28px}.meta-item{flex:1;background-color:#f5f5f5;border-radius:6px;padding:12px 10px;text-align:center}.meta-label{display:block;font-size:.75em;color:#8a8a8a;letter-spacing:.02em;margin-bottom:6px}.meta-value{display:block;font-size:.95em;font-weight:700;color:#1a1a1a}.blog-layout{display:block}.blog-layout.with-toc{display:flex;align-items:flex-start;gap:40px}.with-toc .blog-details{flex:1;min-width:0;order:1}.toc-sidebar{width:340px;flex-shrink:0;position:sticky;top:20px;background-color:#f5f5f5;border-radius:6px;padding:16px;order:2}.toc-header{font-weight:700;font-size:1.05em;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid #dcdcdc}.toc-toggle{display:none;width:100%;align-items:center;justify-content:space-between;background:none;border:none;font-weight:700;font-size:1.05em;padding:0;cursor:pointer}.toc-toggle-icon{width:10px;height:10px;border-right:2px solid #1a1a1a;border-bottom:2px solid #1a1a1a;transform:rotate(45deg);transition:transform .2s ease}.toc-toggle-icon.open{transform:rotate(-135deg)}.toc-list{display:flex;flex-direction:column;gap:14px;max-height:600px;overflow-y:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:#c9c9c9 transparent}.toc-list::-webkit-scrollbar{display:block;width:6px}.toc-list::-webkit-scrollbar-track{background-color:transparent}.toc-list::-webkit-scrollbar-thumb{display:block;background-color:#c9c9c9;border-radius:3px}.toc-link{color:#6f6f6f;text-decoration:none;font-size:.92em;line-height:1.4em}.toc-link:hover{color:#1a1a1a}.toc-link.active{color:#1a1a1a;font-weight:700}.toc-link.toc-top{font-weight:700;color:#1a1a1a}.tags-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}.tag-chip{background-color:#f5f5f5;border:1px solid #ececec;border-radius:999px;padding:6px 14px;font-size:.82em;color:#4a4a4a}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}.table-wrapper{width:100%;overflow-x:auto;margin:16px 0;border-radius:8px;border:1px solid #ececec}table{border-collapse:collapse;width:100%}th,td{border:1px solid #ececec;padding:10px 14px;text-align:left}table:not(.table-no-heading) tr:first-child td{background-color:#eee;font-weight:700;text-transform:uppercase;font-size:.82em}table:not(.table-no-heading) tr:not(:first-child):nth-child(2n) td{background-color:#fafafa}table.table-no-heading tr:nth-child(odd) td{background-color:#fafafa}.table-wrapper img{max-width:100%;height:auto;display:block;border-radius:4px}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:16px 0}.image-container img{width:100%;display:block;border-radius:8px;object-fit:cover}.image-container:not(.hero-image) img{aspect-ratio:16 / 9}.image-container.hero-image{margin:0 0 24px}.image-container.hero-image img{aspect-ratio:21 / 9;border-radius:12px}.image-caption{display:block;text-align:center;font-size:.85em;color:#8a8a8a;margin-top:8px}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}h2,h3,h4,h5,h6,.inner-text.heading-paragraph{font-weight:700;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid #ececec}.list-style{margin:16px 0;padding-left:22px;list-style-position:outside}.list-style li{text-align:left;line-height:1.6em;padding-left:6px}.list-style li:not(:last-child){margin-bottom:10px}.list-style li::marker{color:#1a1a1a;font-weight:700}@media only screen and (max-width: 900px){.blog-container{width:100%}.blog-layout.with-toc{flex-direction:column}.toc-sidebar{width:100%;position:static;box-sizing:border-box;order:0}.with-toc .blog-details{order:1}.toc-header{display:none}.toc-toggle{display:flex}.toc-list{display:none;margin-top:12px}.toc-list.open{display:flex}.meta-bar{flex-wrap:wrap}.meta-item{flex-basis:calc(50% - 6px)}}@media only screen and (max-width: 500px){.blog-details{width:100%}}\n"] }]
|
|
13839
|
+
args: [{ selector: 'simpo-view-blog', standalone: true, imports: [CommonModule, DatePipe, RecentBlogPostSectionComponent], template: "<section class=\"main-section\">\n <div class=\"blog-container\">\n <h1 class=\"blog-title\" *ngIf=\"responseData?.postTitle\">\n {{ responseData.postTitle }}\n </h1>\n\n <div class=\"meta-bar\">\n <div class=\"meta-item\">\n <span class=\"meta-label\">Publication Date</span>\n <span class=\"meta-value\">{{\n responseData?.publishedDate ||\n responseData?.blogScheduledDate ||\n responseData?.createdTimeStamp | date: 'd MMMM y'\n }}</span>\n </div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Author</span>\n <span class=\"meta-value\">{{\n responseData?.author?.content || '\u2014'\n }}</span>\n </div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Read Time</span>\n <span class=\"meta-value\"\n >{{ responseData?.readTime || '\u2014' }} min read</span\n >\n </div>\n <div class=\"meta-item\">\n <span class=\"meta-label\">Views</span>\n <span class=\"meta-value\">{{ responseData?.totalVisits || 0 }}+</span>\n </div>\n </div>\n\n <div class=\"tags-row\" *ngIf=\"tags.length\">\n <span class=\"tag-chip\" *ngFor=\"let tag of tags\">{{ tag | titlecase }}</span>\n </div>\n\n <div class=\"blog-layout\" [class.with-toc]=\"tocItems.length > 1\">\n <aside class=\"toc-sidebar\" *ngIf=\"tocItems.length > 1\">\n <button\n type=\"button\"\n class=\"toc-toggle\"\n (click)=\"tocOpen = !tocOpen\"\n [attr.aria-expanded]=\"tocOpen\">\n <span>Table Of Content</span>\n <span class=\"toc-toggle-icon\" [class.open]=\"tocOpen\"></span>\n </button>\n <div class=\"toc-header\">Table Of Content</div>\n <nav class=\"toc-list\" [class.open]=\"tocOpen\">\n <a\n *ngFor=\"let toc of tocItems\"\n class=\"toc-link\"\n [class.toc-top]=\"toc.level <= 2\"\n [style.paddingLeft.px]=\"(toc.level - 2) * 14\"\n [class.active]=\"activeTocId === toc.id\"\n [href]=\"'#block-' + toc.id\"\n (click)=\"scrollToBlock($event, toc.id)\">\n {{ toc.text }}\n </a>\n </nav>\n </aside>\n\n <div class=\"blog-details\">\n <ng-container *ngFor=\"let item of responseData?.blocks\">\n <div\n *ngIf=\"item.type == 'header' && hasVisibleText(item.data?.text)\"\n [id]=\"'block-' + item.id\"\n [class.toc-anchor]=\"isTocAnchor(item.id)\">\n <h1 *ngIf=\"item.data.level == 1\" [innerHTML]=\"item.data.text\"></h1>\n <h2 *ngIf=\"item.data.level == 2\" [innerHTML]=\"item.data.text\"></h2>\n <h3 *ngIf=\"item.data.level == 3\" [innerHTML]=\"item.data.text\"></h3>\n <h4 *ngIf=\"item.data.level == 4\" [innerHTML]=\"item.data.text\"></h4>\n <h5 *ngIf=\"item.data.level == 5\" [innerHTML]=\"item.data.text\"></h5>\n <h6 *ngIf=\"item.data.level == 6\" [innerHTML]=\"item.data.text\"></h6>\n </div>\n <div\n *ngIf=\"item.type == 'paragraph' && hasVisibleText(item.data?.text)\"\n [id]=\"'block-' + item.id\"\n [class.toc-anchor]=\"isTocAnchor(item.id)\">\n <p\n class=\"inner-text\"\n [class.heading-paragraph]=\"isTocAnchor(item.id)\"\n [innerHTML]=\"item.data.text\"></p>\n </div>\n <div *ngIf=\"item.type == 'list'\">\n <div *ngIf=\"item.data.style == 'ordered'\">\n <ol class=\"list-style\">\n <ng-container *ngFor=\"let list of item.data.items\">\n <li [innerHTML]=\"list\"></li>\n </ng-container>\n </ol>\n </div>\n <div *ngIf=\"item.data.style == 'unordered'\">\n <ul class=\"list-style\">\n <ng-container *ngFor=\"let list of item.data.items\">\n <li [innerHTML]=\"list\"></li>\n </ng-container>\n </ul>\n </div>\n </div>\n <div *ngIf=\"item.type == 'delimiter'\" class=\"ce-delimiter\"></div>\n <div\n *ngIf=\"item.type == 'image'\"\n class=\"image-container\"\n [class.hero-image]=\"item.id === heroImageBlockId\">\n <img loading=\"lazy\" [src]=\"item.data.file.url\" alt=\"\" />\n <span class=\"image-caption\" *ngIf=\"item.data?.caption\">{{\n item.data.caption\n }}</span>\n </div>\n <div *ngIf=\"item.type == 'table'\">\n <div class=\"table-wrapper\">\n <table\n [class.table-no-heading]=\"item.data.withHeadings === false\">\n <ng-container *ngFor=\"let data of item.data.content\">\n <tr>\n <ng-container *ngFor=\"let item of data\">\n <td [innerHTML]=\"item\"></td>\n </ng-container>\n </tr>\n </ng-container>\n </table>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n\n <simpo-recent-blog-post-section\n [popular]=\"true\"\n [businessId]=\"responseData?.businessId\"\n [excludeBlogId]=\"responseData?.id\"\n [edit]=\"false\">\n </simpo-recent-blog-post-section>\n </div>\n</section>\n", styles: [":host{display:block;width:100%}*,*:before,*:after{box-sizing:border-box}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main-section{padding:2% 5%;background-color:#fff}.blog-container{width:85%;margin:0 auto}.blog-title{font-size:2em;font-weight:700;line-height:1.25em;margin:0 0 20px}.meta-bar{display:flex;gap:12px;margin-bottom:28px}.meta-item{flex:1;background-color:#f5f5f5;border-radius:6px;padding:12px 10px;text-align:center}.meta-label{display:block;font-size:.75em;color:#8a8a8a;letter-spacing:.02em;margin-bottom:6px}.meta-value{display:block;font-size:.95em;font-weight:700;color:#1a1a1a}.blog-layout{display:block}.blog-layout.with-toc{display:flex;align-items:flex-start;gap:40px}.with-toc .blog-details{flex:1;min-width:0;order:1}.toc-sidebar{width:340px;flex-shrink:0;position:sticky;top:20px;background-color:#f5f5f5;border-radius:6px;padding:16px;order:2}.toc-header{font-weight:700;font-size:1.05em;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid #dcdcdc}.toc-toggle{display:none;width:100%;align-items:center;justify-content:space-between;background:none;border:none;font-weight:700;font-size:1.05em;padding:0;cursor:pointer}.toc-toggle-icon{width:10px;height:10px;border-right:2px solid #1a1a1a;border-bottom:2px solid #1a1a1a;transform:rotate(45deg);transition:transform .2s ease}.toc-toggle-icon.open{transform:rotate(-135deg)}.toc-list{display:flex;flex-direction:column;gap:14px;max-height:600px;overflow-y:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:#c9c9c9 transparent}.toc-list::-webkit-scrollbar{display:block;width:6px}.toc-list::-webkit-scrollbar-track{background-color:transparent}.toc-list::-webkit-scrollbar-thumb{display:block;background-color:#c9c9c9;border-radius:3px}.toc-link{color:#6f6f6f;text-decoration:none;font-size:.92em;line-height:1.4em;outline:none}.toc-link:hover{color:#1a1a1a}.toc-link.active{color:#1a1a1a;font-weight:700}.toc-link.toc-top{font-weight:700;color:#1a1a1a}.tags-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}.tag-chip{background-color:#f5f5f5;border:1px solid #ececec;border-radius:999px;padding:6px 14px;font-size:.82em;color:#4a4a4a}.delimiter{display:flex;justify-content:center}.ce-delimiter:before{display:inline-block;content:\"***\";font-size:30px;line-height:65px;height:30px;letter-spacing:.2em}p{line-height:1.6em}.back-text{@include body16r();margin-left:9px;margin-top:1px;cursor:pointer}.table-wrapper{width:100%;overflow-x:auto;margin:16px 0;border-radius:8px;border:1px solid #ececec}table{border-collapse:collapse;width:100%}th,td{border:1px solid #ececec;padding:10px 14px;text-align:left}table:not(.table-no-heading) tr:first-child td{background-color:#eee;font-weight:700;text-transform:uppercase;font-size:.82em}table:not(.table-no-heading) tr:not(:first-child):nth-child(2n) td{background-color:#fafafa}table.table-no-heading tr:nth-child(odd) td{background-color:#fafafa}.table-wrapper img{max-width:100%;height:auto;display:block;border-radius:4px}.header{margin-top:8px;margin-bottom:14px;padding-left:20px}.header img,.configuration-tab img{cursor:pointer}.blogs-totalsection{background:#eee;position:absolute;top:55px;height:calc(100vh - 55px);width:81.7%;z-index:10;overflow-y:scroll;padding:14px}.blog-title{line-height:35px}.image-container{width:100%;margin:16px 0}.image-container img{width:100%;display:block;border-radius:8px;object-fit:cover}.image-container:not(.hero-image) img{aspect-ratio:16 / 9}.image-container.hero-image{margin:0 0 24px}.image-container.hero-image img{aspect-ratio:21 / 9;border-radius:12px}.image-caption{display:block;text-align:center;font-size:.85em;color:#8a8a8a;margin-top:8px}h1,h2,h3,h4,h5,h6{padding:.6em 0 3px}.h1,.h2,.h3,h1,h2,h3{margin-top:0}h2,h3,h4,h5,h6,.inner-text.heading-paragraph{font-weight:700;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid #ececec}.list-style{margin:16px 0;padding-left:22px;list-style-position:outside}.list-style li{text-align:left;line-height:1.6em;padding-left:6px}.list-style li:not(:last-child){margin-bottom:10px}.list-style li::marker{color:#1a1a1a;font-weight:700}@media only screen and (max-width: 900px){.blog-container{width:100%}.blog-layout.with-toc{flex-direction:column}.toc-sidebar{width:100%;position:static;box-sizing:border-box;order:0}.with-toc .blog-details{order:1}.toc-header{display:none}.toc-toggle{display:flex}.toc-list{display:none;margin-top:12px}.toc-list.open{display:flex}.meta-bar{flex-wrap:wrap}.meta-item{flex-basis:calc(50% - 6px)}}@media only screen and (max-width: 500px){.blog-details{width:100%}}\n"] }]
|
|
13838
13840
|
}], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i0.ElementRef }, { type: undefined, decorators: [{
|
|
13839
13841
|
type: Inject,
|
|
13840
13842
|
args: [PLATFORM_ID]
|
|
@@ -21112,7 +21114,7 @@ class ProductListComponent extends BaseSection {
|
|
|
21112
21114
|
return brightness > threshold ? '#000000' : '#ffffff';
|
|
21113
21115
|
}
|
|
21114
21116
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, deps: [{ token: PLATFORM_ID }, { token: EventsService }, { token: RestService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: StorageServiceService }, { token: i8$1.MatBottomSheet }, { token: i3$2.MatDialog }, { token: CartService }, { token: i6$1.MessageService }, { token: i0.Renderer2 }, { token: AnalyticsService }, { token: BookingProductCartService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21115
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize()", "window:scroll": "onWindowScroll($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "listScrollContainer", first: true, predicate: ["listScrollContainer"], descendants: true }, { propertyName: "filterScroll", first: true, predicate: ["filterScroll"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div> -->\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\r\n [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n\r\n <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n <p-speedDial [model]=\"items\" direction=\"up\"\r\n [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\r\n </div> -->\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\">\r\n <div class=\"filter body-large\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n CLEAR ALL\r\n </div>\r\n </div>\r\n <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\r\n style=\"width: 77.5%; margin-right: 1%;\">\r\n <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\r\n <ng-container *ngFor=\"let filter of filteredChips\">\r\n <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\r\n </select>\r\n </div> -->\r\n <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\r\n <span class=\"sort-label\">Sort By:</span>\r\n <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\r\n <span class=\"toggle-icon\" [class.open]=\"isOpen\">▾</span> <!-- Down arrow, rotates open -->\r\n\r\n <div class=\"options\" *ngIf=\"isOpen\">\r\n <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\r\n (click)=\"selectOption(filter, $event)\">\r\n {{ filter.name }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\r\n <ng-container *ngFor=\"let filter of filteredChips\">\r\n <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"main-product-section\">\r\n <div class=\"filter-side\">\r\n <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n </div>\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\" (scroll)=\"handleProductListScroll()\"\r\n #listScrollContainer>\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\r\n [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\r\n [index]=\"i\"></simpo-small-product-listing>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Product list is empty\r\n </div>\r\n <div class=\"description d-flex justify-content-center mt-4\">\r\n Looks like no item is present with filter. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n </div>\r\n\r\n <div class=\"bottom-filter\">\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n <mat-icon>sort</mat-icon>\r\n <span>Sort by</span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>Filter</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\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 </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\r\n [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <div class=\"fav-icon-wrapper\">\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\r\n </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\r\n </mat-icon>\r\n <span class=\"fav-tooltip\">\r\n {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #Tags let-product=\"data\">\r\n <div class=\"product-tag-badge\" *ngIf=\"product?.tags?.length\">\r\n <span *ngFor=\"let tag of product.tags; let i = index\" class=\"product-tag-label\"\r\n [class.tag-active]=\"i === (tagIndexMap[product.itemId] ?? 0)\" [style.background]=\"styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(styles?.background?.accentColor)\">\r\n {{ tag }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #FilterSection>\r\n <section>\r\n <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"categoriesCollapsed = !categoriesCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Shop by Categories</b></h6>\r\n <mat-icon>{{ categoriesCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!categoriesCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\r\n (click)=\"applyFilter(category, 'FILTER')\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"category.status\" />\r\n <div class=\"trim-text\">{{category.option | titlecase}}</div>\r\n </div>\r\n <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"toggle-text\">\r\n {{ showAllCategories ? 'Show Less' : 'Show More' }}\r\n <span class=\"dropdown-icon\">\r\n <ng-container *ngIf=\"!showAllCategories\">\r\n <mat-icon>expand_more</mat-icon>\r\n </ng-container>\r\n <ng-container *ngIf=\"showAllCategories\">\r\n <mat-icon>expand_less</mat-icon>\r\n </ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"collectionsCollapsed = !collectionsCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Shop by Collections</b></h6>\r\n <mat-icon>{{ collectionsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!collectionsCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\r\n (click)=\"applyFilter(collection, 'FILTER')\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"collection.status\" />\r\n <div class=\"trim-text\">{{collection.option | titlecase}}</div>\r\n </div>\r\n <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"toggle-text\">\r\n {{ showAllCollections ? 'Show Less' : 'Show More' }}\r\n <span class=\"dropdown-icon\">\r\n <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\r\n <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"ratingsCollapsed = !ratingsCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Ratings</b></h6>\r\n <mat-icon>{{ ratingsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!ratingsCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let rating of ratingOptions\" (click)=\"onRatingChange(rating)\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"rating.selected\" />\r\n <div class=\"trim-text\">{{ rating.label }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"priceCollapsed = !priceCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Shop by price</b></h6>\r\n <mat-icon>{{ priceCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!priceCollapsed\">\r\n <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\r\n <div class=\"trim-text\">{{ range.label }}</div>\r\n </label>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"productTypeCollapsed = !productTypeCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Product Type</b></h6>\r\n <mat-icon>{{ productTypeCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!productTypeCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"shopForCollapsed = !shopForCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Shop for</b></h6>\r\n <mat-icon>{{ shopForCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!shopForCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of shopForData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"materialCollapsed = !materialCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Material</b></h6>\r\n <mat-icon>{{ materialCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!materialCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"metalCollapsed = !metalCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Metal</b></h6>\r\n <mat-icon>{{ metalCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!metalCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"ringStyleCollapsed = !ringStyleCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Ring Style</b></h6>\r\n <mat-icon>{{ ringStyleCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!ringStyleCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n <section style=\"padding: 10px\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n <span>Sort by</span>\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <mat-radio-group class=\"d-flex flex-column\" [(ngModel)]=\"sortBy\">\r\n <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\r\n [value]=\"sortingType.value\">{{sortingType.name}}</mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n <ng-template #theme1style1>\r\n <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\r\n class=\"default-image position-relative\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n </div>\r\n\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\r\n class=\"default-image position-relative\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\r\n (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mt-2 w-100\">\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 <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large text-left d-flex align-items-center g-10\">\r\n <div class=\"fs-16\">\r\n <span [innerHTML]='currency'></span>\r\n {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n </div>\r\n\r\n <div class=\"fs-16 text-start\">\r\n <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n {{product?.price?.value | number:'1.2-2'}}\r\n </span>\r\n </div>\r\n <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.sellingPrice | number:'1.2-2'}}\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"product-name heading-large w-100 text-left trim-text\"\r\n [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n <div class=\"material-info\"\r\n *ngIf=\"isMaterialBasedPricing && (product?.materials?.length || product?.baseWeight)\">\r\n <span *ngIf=\"product?.materials?.[0]?.purity\">{{ product.materials[0].purity }}</span>\r\n <span *ngIf=\"product?.materials?.[0]?.purity && product?.baseWeight\"> \u00B7 </span>\r\n <span *ngIf=\"product?.baseWeight\">{{ product.baseWeight }}g</span>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\r\n class=\"add-to-cart-btn\">\r\n <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\r\n simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\"\r\n (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n <div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n <div class=\"try-button-section\"\r\n *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\r\n <div class=\"try-at-home\">\r\n <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n HOME</button>\r\n </div>\r\n <div class=\"video-call-image\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-8 d-flex flex-column gap-3\">\r\n <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n <div class=\"fs-16 text-start\">\r\n <span [innerHTML]='currency'></span>\r\n {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n </div>\r\n <div class=\"d-flex w-45\">\r\n <div\r\n *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\r\n class=\"add-to-cart-btn w-100\">\r\n <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\r\n simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\"\r\n (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n <div>\r\n <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n <div class=\"try-button-section w-100\"\r\n *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\r\n <div class=\"try-at-home\">\r\n <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n HOME</button>\r\n </div>\r\n <div class=\"video-call-image\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 position-relative\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\r\n (click)=\"proceedToProductDesc(product)\">\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:fit-content;max-width:fit-content;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%;border-right:1px solid lightgrey}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.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;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.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}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.filter-top-section{border-right:1px solid lightgrey;width:20%;padding:1rem .5em 1rem 0rem;border-bottom:1px solid lightgrey}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px!important;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);border-radius:10px!important;box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price{font-size:14px!important}.add-to-cart-btn button{font-size:14px!important;padding:5px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:7rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.w-h-110{width:110px;height:110px}.w-45{width:45%}.br-8{border-radius:8px}.w-35{width:35%!important}.product-tag-badge{position:absolute;top:8px;left:8px;z-index:2;pointer-events:none}.product-tag-label{position:absolute;top:0;left:0;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:5px 10px;border-radius:4px;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}.product-tag-label.tag-active{opacity:1;transform:translateY(0)}.material-info{font-size:11px;color:#888;margin-top:2px;letter-spacing:.3px}\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.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "ngmodule", type: SpeedDialModule }, { 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: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
21117
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductListComponent, isStandalone: true, selector: "simpo-product-list", inputs: { responseData: "responseData", data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "getScreenSize()", "window:scroll": "onWindowScroll($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "listScrollContainer", first: true, predicate: ["listScrollContainer"], descendants: true }, { propertyName: "filterScroll", first: true, predicate: ["filterScroll"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div> -->\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\r\n [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n\r\n <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n <p-speedDial [model]=\"items\" direction=\"up\"\r\n [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\r\n </div> -->\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\">\r\n <div class=\"filter body-large\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n CLEAR ALL\r\n </div>\r\n </div>\r\n <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\r\n style=\"width: 77.5%; margin-right: 1%;\">\r\n <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\r\n <ng-container *ngFor=\"let filter of filteredChips\">\r\n <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\r\n </select>\r\n </div> -->\r\n <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\r\n <span class=\"sort-label\">Sort By:</span>\r\n <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\r\n <span class=\"toggle-icon\" [class.open]=\"isOpen\">▾</span> <!-- Down arrow, rotates open -->\r\n\r\n <div class=\"options\" *ngIf=\"isOpen\">\r\n <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\r\n (click)=\"selectOption(filter, $event)\">\r\n {{ filter.name }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\r\n <ng-container *ngFor=\"let filter of filteredChips\">\r\n <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"main-product-section\">\r\n <div class=\"filter-side\">\r\n <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n </div>\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\" (scroll)=\"handleProductListScroll()\"\r\n #listScrollContainer>\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\r\n [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\r\n [index]=\"i\"></simpo-small-product-listing>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Product list is empty\r\n </div>\r\n <div class=\"description d-flex justify-content-center mt-4\">\r\n Looks like no item is present with filter. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n </div>\r\n\r\n <div class=\"bottom-filter\">\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n <mat-icon>sort</mat-icon>\r\n <span>Sort by</span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>Filter</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\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 </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\r\n [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <div class=\"fav-icon-wrapper\">\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\r\n </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\r\n </mat-icon>\r\n <span class=\"fav-tooltip\">\r\n {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #Tags let-product=\"data\">\r\n <div class=\"product-tag-badge\" *ngIf=\"product?.tags?.length\">\r\n <span *ngFor=\"let tag of product.tags; let i = index\" class=\"product-tag-label\"\r\n [class.tag-active]=\"i === (tagIndexMap[product.itemId] ?? 0)\" [style.background]=\"styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(styles?.background?.accentColor)\">\r\n {{ tag }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #FilterSection>\r\n <section>\r\n <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"categoriesCollapsed = !categoriesCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Shop by Categories</b></h6>\r\n <mat-icon>{{ categoriesCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!categoriesCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\r\n (click)=\"applyFilter(category, 'FILTER')\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"category.status\" />\r\n <div class=\"trim-text\">{{category.option | titlecase}}</div>\r\n </div>\r\n <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"toggle-text\">\r\n {{ showAllCategories ? 'Show Less' : 'Show More' }}\r\n <span class=\"dropdown-icon\">\r\n <ng-container *ngIf=\"!showAllCategories\">\r\n <mat-icon>expand_more</mat-icon>\r\n </ng-container>\r\n <ng-container *ngIf=\"showAllCategories\">\r\n <mat-icon>expand_less</mat-icon>\r\n </ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"collectionsCollapsed = !collectionsCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Shop by Collections</b></h6>\r\n <mat-icon>{{ collectionsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!collectionsCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\r\n (click)=\"applyFilter(collection, 'FILTER')\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"collection.status\" />\r\n <div class=\"trim-text\">{{collection.option | titlecase}}</div>\r\n </div>\r\n <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"toggle-text\">\r\n {{ showAllCollections ? 'Show Less' : 'Show More' }}\r\n <span class=\"dropdown-icon\">\r\n <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\r\n <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"ratingsCollapsed = !ratingsCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Ratings</b></h6>\r\n <mat-icon>{{ ratingsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!ratingsCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let rating of ratingOptions\" (click)=\"onRatingChange(rating)\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"rating.selected\" />\r\n <div class=\"trim-text\">{{ rating.label }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"priceCollapsed = !priceCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Shop by price</b></h6>\r\n <mat-icon>{{ priceCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!priceCollapsed\">\r\n <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\r\n <div class=\"trim-text\">{{ range.label }}</div>\r\n </label>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"productTypeCollapsed = !productTypeCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Product Type</b></h6>\r\n <mat-icon>{{ productTypeCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!productTypeCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"shopForCollapsed = !shopForCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Shop for</b></h6>\r\n <mat-icon>{{ shopForCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!shopForCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of shopForData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"materialCollapsed = !materialCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Material</b></h6>\r\n <mat-icon>{{ materialCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!materialCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"metalCollapsed = !metalCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Metal</b></h6>\r\n <mat-icon>{{ metalCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!metalCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"ringStyleCollapsed = !ringStyleCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Ring Style</b></h6>\r\n <mat-icon>{{ ringStyleCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!ringStyleCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n <section style=\"padding: 10px\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n <span>Sort by</span>\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <mat-radio-group class=\"d-flex flex-column\" [(ngModel)]=\"sortBy\">\r\n <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\r\n [value]=\"sortingType.value\">{{sortingType.name}}</mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n <ng-template #theme1style1>\r\n <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\r\n class=\"default-image position-relative\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n </div>\r\n\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\r\n class=\"default-image position-relative\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\r\n (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mt-2 w-100\">\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 <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large text-left d-flex align-items-center g-10\">\r\n <div class=\"fs-16\">\r\n <span [innerHTML]='currency'></span>\r\n {{product?.price?.sellingPrice | number:'1.0-0'}}\r\n </div>\r\n\r\n <div class=\"fs-16 text-start\">\r\n <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n {{product?.price?.value | number:'1.0-0'}}\r\n </span>\r\n </div>\r\n <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.sellingPrice | number:'1.0-0'}}\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"product-name heading-large w-100 text-left trim-text\"\r\n [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n <div class=\"material-info\"\r\n *ngIf=\"isMaterialBasedPricing && (product?.materials?.length || product?.baseWeight)\">\r\n <span *ngIf=\"product?.materials?.[0]?.purity\">{{ product.materials[0].purity }}</span>\r\n <span *ngIf=\"product?.materials?.[0]?.purity && product?.baseWeight\"> \u00B7 </span>\r\n <span *ngIf=\"product?.baseWeight\">{{ product.baseWeight }}g</span>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\r\n class=\"add-to-cart-btn\">\r\n <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\r\n simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\"\r\n (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n <div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n <div class=\"try-button-section\"\r\n *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\r\n <div class=\"try-at-home\">\r\n <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n HOME</button>\r\n </div>\r\n <div class=\"video-call-image\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-8 d-flex flex-column gap-3\">\r\n <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n <div class=\"fs-16 text-start\">\r\n <span [innerHTML]='currency'></span>\r\n {{product?.price?.sellingPrice | number:'1.0-0'}}\r\n </div>\r\n <div class=\"d-flex w-45\">\r\n <div\r\n *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\r\n class=\"add-to-cart-btn w-100\">\r\n <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\r\n simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\"\r\n (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n <div>\r\n <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n <div class=\"try-button-section w-100\"\r\n *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\r\n <div class=\"try-at-home\">\r\n <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n HOME</button>\r\n </div>\r\n <div class=\"video-call-image\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 position-relative\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\r\n (click)=\"proceedToProductDesc(product)\">\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:fit-content;max-width:fit-content;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%;border-right:1px solid lightgrey}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.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;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.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}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.filter-top-section{border-right:1px solid lightgrey;width:20%;padding:1rem .5em 1rem 0rem;border-bottom:1px solid lightgrey}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px!important;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);border-radius:10px!important;box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price{font-size:14px!important}.add-to-cart-btn button{font-size:14px!important;padding:5px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:7rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.w-h-110{width:110px;height:110px}.w-45{width:45%}.br-8{border-radius:8px}.w-35{width:35%!important}.product-tag-badge{position:absolute;top:8px;left:8px;z-index:2;pointer-events:none}.product-tag-label{position:absolute;top:0;left:0;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:5px 10px;border-radius:4px;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}.product-tag-label.tag-active{opacity:1;transform:translateY(0)}.material-info{font-size:11px;color:#888;margin-top:2px;letter-spacing:.3px}\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.DecimalPipe, name: "number" }, { kind: "pipe", type: i3.TitleCasePipe, name: "titlecase" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i9.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "ngmodule", type: SpeedDialModule }, { 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: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i7$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i7$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: CardSkeletonLoaderComponent, selector: "simpo-card-skeleton-loader", inputs: ["count", "showTitles"] }, { kind: "component", type: SmallProductListingComponent, selector: "simpo-small-product-listing", inputs: ["product", "data", "isScrollable", "isCategoryProductList", "customClass", "index"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
21116
21118
|
}
|
|
21117
21119
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductListComponent, decorators: [{
|
|
21118
21120
|
type: Component,
|
|
@@ -21139,7 +21141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
21139
21141
|
MatChipsModule,
|
|
21140
21142
|
ButtonEditorDirective,
|
|
21141
21143
|
SpacingHorizontalDirective,
|
|
21142
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div> -->\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\r\n [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n\r\n <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n <p-speedDial [model]=\"items\" direction=\"up\"\r\n [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\r\n </div> -->\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\">\r\n <div class=\"filter body-large\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n CLEAR ALL\r\n </div>\r\n </div>\r\n <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\r\n style=\"width: 77.5%; margin-right: 1%;\">\r\n <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\r\n <ng-container *ngFor=\"let filter of filteredChips\">\r\n <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\r\n </select>\r\n </div> -->\r\n <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\r\n <span class=\"sort-label\">Sort By:</span>\r\n <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\r\n <span class=\"toggle-icon\" [class.open]=\"isOpen\">▾</span> <!-- Down arrow, rotates open -->\r\n\r\n <div class=\"options\" *ngIf=\"isOpen\">\r\n <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\r\n (click)=\"selectOption(filter, $event)\">\r\n {{ filter.name }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\r\n <ng-container *ngFor=\"let filter of filteredChips\">\r\n <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"main-product-section\">\r\n <div class=\"filter-side\">\r\n <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n </div>\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\" (scroll)=\"handleProductListScroll()\"\r\n #listScrollContainer>\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\r\n [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\r\n [index]=\"i\"></simpo-small-product-listing>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Product list is empty\r\n </div>\r\n <div class=\"description d-flex justify-content-center mt-4\">\r\n Looks like no item is present with filter. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n </div>\r\n\r\n <div class=\"bottom-filter\">\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n <mat-icon>sort</mat-icon>\r\n <span>Sort by</span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>Filter</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\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 </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\r\n [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <div class=\"fav-icon-wrapper\">\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\r\n </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\r\n </mat-icon>\r\n <span class=\"fav-tooltip\">\r\n {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #Tags let-product=\"data\">\r\n <div class=\"product-tag-badge\" *ngIf=\"product?.tags?.length\">\r\n <span *ngFor=\"let tag of product.tags; let i = index\" class=\"product-tag-label\"\r\n [class.tag-active]=\"i === (tagIndexMap[product.itemId] ?? 0)\" [style.background]=\"styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(styles?.background?.accentColor)\">\r\n {{ tag }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #FilterSection>\r\n <section>\r\n <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"categoriesCollapsed = !categoriesCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Shop by Categories</b></h6>\r\n <mat-icon>{{ categoriesCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!categoriesCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\r\n (click)=\"applyFilter(category, 'FILTER')\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"category.status\" />\r\n <div class=\"trim-text\">{{category.option | titlecase}}</div>\r\n </div>\r\n <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"toggle-text\">\r\n {{ showAllCategories ? 'Show Less' : 'Show More' }}\r\n <span class=\"dropdown-icon\">\r\n <ng-container *ngIf=\"!showAllCategories\">\r\n <mat-icon>expand_more</mat-icon>\r\n </ng-container>\r\n <ng-container *ngIf=\"showAllCategories\">\r\n <mat-icon>expand_less</mat-icon>\r\n </ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"collectionsCollapsed = !collectionsCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Shop by Collections</b></h6>\r\n <mat-icon>{{ collectionsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!collectionsCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\r\n (click)=\"applyFilter(collection, 'FILTER')\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"collection.status\" />\r\n <div class=\"trim-text\">{{collection.option | titlecase}}</div>\r\n </div>\r\n <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"toggle-text\">\r\n {{ showAllCollections ? 'Show Less' : 'Show More' }}\r\n <span class=\"dropdown-icon\">\r\n <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\r\n <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"ratingsCollapsed = !ratingsCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Ratings</b></h6>\r\n <mat-icon>{{ ratingsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!ratingsCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let rating of ratingOptions\" (click)=\"onRatingChange(rating)\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"rating.selected\" />\r\n <div class=\"trim-text\">{{ rating.label }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"priceCollapsed = !priceCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Shop by price</b></h6>\r\n <mat-icon>{{ priceCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!priceCollapsed\">\r\n <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\r\n <div class=\"trim-text\">{{ range.label }}</div>\r\n </label>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"productTypeCollapsed = !productTypeCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Product Type</b></h6>\r\n <mat-icon>{{ productTypeCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!productTypeCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"shopForCollapsed = !shopForCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Shop for</b></h6>\r\n <mat-icon>{{ shopForCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!shopForCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of shopForData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"materialCollapsed = !materialCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Material</b></h6>\r\n <mat-icon>{{ materialCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!materialCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"metalCollapsed = !metalCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Metal</b></h6>\r\n <mat-icon>{{ metalCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!metalCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"ringStyleCollapsed = !ringStyleCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Ring Style</b></h6>\r\n <mat-icon>{{ ringStyleCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!ringStyleCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n <section style=\"padding: 10px\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n <span>Sort by</span>\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <mat-radio-group class=\"d-flex flex-column\" [(ngModel)]=\"sortBy\">\r\n <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\r\n [value]=\"sortingType.value\">{{sortingType.name}}</mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n <ng-template #theme1style1>\r\n <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\r\n class=\"default-image position-relative\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n </div>\r\n\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\r\n class=\"default-image position-relative\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\r\n (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mt-2 w-100\">\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 <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large text-left d-flex align-items-center g-10\">\r\n <div class=\"fs-16\">\r\n <span [innerHTML]='currency'></span>\r\n {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n </div>\r\n\r\n <div class=\"fs-16 text-start\">\r\n <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n {{product?.price?.value | number:'1.2-2'}}\r\n </span>\r\n </div>\r\n <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.sellingPrice | number:'1.2-2'}}\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"product-name heading-large w-100 text-left trim-text\"\r\n [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n <div class=\"material-info\"\r\n *ngIf=\"isMaterialBasedPricing && (product?.materials?.length || product?.baseWeight)\">\r\n <span *ngIf=\"product?.materials?.[0]?.purity\">{{ product.materials[0].purity }}</span>\r\n <span *ngIf=\"product?.materials?.[0]?.purity && product?.baseWeight\"> \u00B7 </span>\r\n <span *ngIf=\"product?.baseWeight\">{{ product.baseWeight }}g</span>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\r\n class=\"add-to-cart-btn\">\r\n <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\r\n simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\"\r\n (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n <div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n <div class=\"try-button-section\"\r\n *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\r\n <div class=\"try-at-home\">\r\n <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n HOME</button>\r\n </div>\r\n <div class=\"video-call-image\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-8 d-flex flex-column gap-3\">\r\n <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n <div class=\"fs-16 text-start\">\r\n <span [innerHTML]='currency'></span>\r\n {{product?.price?.sellingPrice | number:'1.2-2'}}\r\n </div>\r\n <div class=\"d-flex w-45\">\r\n <div\r\n *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\r\n class=\"add-to-cart-btn w-100\">\r\n <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\r\n simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\"\r\n (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n <div>\r\n <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n <div class=\"try-button-section w-100\"\r\n *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\r\n <div class=\"try-at-home\">\r\n <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n HOME</button>\r\n </div>\r\n <div class=\"video-call-image\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 position-relative\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\r\n (click)=\"proceedToProductDesc(product)\">\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:fit-content;max-width:fit-content;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%;border-right:1px solid lightgrey}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.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;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.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}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.filter-top-section{border-right:1px solid lightgrey;width:20%;padding:1rem .5em 1rem 0rem;border-bottom:1px solid lightgrey}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px!important;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);border-radius:10px!important;box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price{font-size:14px!important}.add-to-cart-btn button{font-size:14px!important;padding:5px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:7rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.w-h-110{width:110px;height:110px}.w-45{width:45%}.br-8{border-radius:8px}.w-35{width:35%!important}.product-tag-badge{position:absolute;top:8px;left:8px;z-index:2;pointer-events:none}.product-tag-label{position:absolute;top:0;left:0;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:5px 10px;border-radius:4px;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}.product-tag-label.tag-active{opacity:1;transform:translateY(0)}.material-info{font-size:11px;color:#888;margin-top:2px;letter-spacing:.3px}\n"] }]
|
|
21144
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Call Schedule\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\" key=\"Video Scheduling\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<!-- <div class=\"input-group\" *ngIf=\"isMobile\" [ngClass]=\"{'input-group-sticky': scrollingValue > 20}\">\r\n <mat-icon class=\"f-20 d-flex align-item-center justify-content-center\">search</mat-icon>\r\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product..\" aria-label=\"Search Product\"\r\n [(ngModel)]=\"searchText\" (ngModelChange)=\"searchProduct()\">\r\n</div> -->\r\n\r\n<ng-container *ngIf=\"!isLoading\">\r\n <section [id]=\"data?.id\" class=\"container-fluid total-container\" [simpoLayout]=\"styles?.layout\" simpoHover\r\n (hovering)=\"showEditTabs($event)\" [simpoBackground]=\"styles?.background\"\r\n [style.paddingTop.px]=\"isMobile ? '0 !important' : ''\" [attr.style]=\"customClass\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n\r\n <!-- <div style=\"position: relative;\" class=\"speeddial-linear\" *ngIf=\"isMobile\">\r\n <p-speedDial [model]=\"items\" direction=\"up\"\r\n [buttonStyle]=\"{'border-radius': '50%', 'height': '30px'}\"></p-speedDial>\r\n </div> -->\r\n\r\n <div class=\"d-flex justify-content-between align-items-center w-100 onlyDesktop\">\r\n <div class=\"filter-top-section d-flex justify-content-between align-items-baseline\">\r\n <div class=\"filter body-large\">\r\n Filters\r\n </div>\r\n <div class=\"clear\" (click)=\"clearFilter()\" [style.color]=\"styles?.background?.accentColor\">\r\n CLEAR ALL\r\n </div>\r\n </div>\r\n <div itemid=\"top-section\" class=\"d-flex align-items-center justify-content-between\"\r\n style=\"width: 77.5%; margin-right: 1%;\">\r\n <div class=\"d-flex gap-15\" style=\"width: 75%; display:flex; flex-wrap:wrap\">\r\n <ng-container *ngFor=\"let filter of filteredChips\">\r\n <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <!-- <div class=\"d-flex align-items-center\" style=\"gap: 10px;\">\r\n <div class=\"fs-6 fw-normal mr-3\">Sort by</div>\r\n <select [(ngModel)]=\"sortBy\" (change)=\"applyFilter($event, 'SORT')\" style=\"color: black;\">\r\n <option [value]=\"filter.value\" *ngFor=\"let filter of filteringArray\">{{ filter.name }}</option>\r\n </select>\r\n </div> -->\r\n <div class=\"custom-sort-dropdown\" tabindex=\"0\" (blur)=\"closeDropdown()\" (click)=\"toggleDropdown()\">\r\n <span class=\"sort-label\">Sort By:</span>\r\n <span class=\"selected-value\">{{ getSelectedName() || 'Featured' }}</span>\r\n <span class=\"toggle-icon\" [class.open]=\"isOpen\">▾</span> <!-- Down arrow, rotates open -->\r\n\r\n <div class=\"options\" *ngIf=\"isOpen\">\r\n <div *ngFor=\"let filter of filteringArray\" class=\"option\" [class.selected]=\"filter.value === sortBy\"\r\n (click)=\"selectOption(filter, $event)\">\r\n {{ filter.name }}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"isMobile\" class=\"d-flex w-100 onlyMobile gap-15 flex-wrap\">\r\n <ng-container *ngFor=\"let filter of filteredChips\">\r\n <div class=\"d-flex justify-content-between align-item-center w-90 chip\">\r\n <span>{{filter.name}}</span>\r\n <span style=\"cursor: pointer; width:20px; height: 20px;\">\r\n <mat-icon style=\"font-size: 20px;\" (click)=\"removeFilter(filter)\">close</mat-icon>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"main-product-section\">\r\n <div class=\"filter-side\">\r\n <ng-container *ngTemplateOutlet=\"FilterSection\"></ng-container>\r\n </div>\r\n <div [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" class=\"right-side\" (scroll)=\"handleProductListScroll()\"\r\n #listScrollContainer>\r\n <ng-container *ngIf=\"!apiLoading\">\r\n <div class=\"product-parent\" *ngIf=\"responseData && responseData.length > 0\">\r\n <div *ngFor=\"let product of responseData; let i = index\" class=\"product\"\r\n [style.width]=\"applyProductWidth() ? getProductWidth() : ''\" style=\"cursor:pointer; position: relative;\">\r\n <ng-container *ngIf=\"styles?.theme == theme.Theme1\">\r\n <ng-container *ngTemplateOutlet=\"ProductDesc; context: {data: product, index: i}\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"styles?.theme != theme.Theme1\">\r\n <simpo-small-product-listing [product]=\"product\" [data]=\"data\" [isScrollable]=\"screenWidth > 475\"\r\n [index]=\"i\"></simpo-small-product-listing>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <simpo-card-skeleton-loader *ngIf=\"isListLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n <section class=\"empty-cart\" *ngIf=\"!isListLoading && responseData?.length == 0\">\r\n <div>\r\n <div class=\"cart-image\">\r\n <img loading=\"lazy\" style=\"height: 150px; width: 150px;\"\r\n src=\"https://prod-simpo.s3.ap-south-1.amazonaws.com/prod-images/107213c1716543334040empty-cart.png\"\r\n alt=\"\">\r\n </div>\r\n <div class=\"cart-text\">\r\n <div class=\"heading-medium d-flex justify-content-center\">\r\n Product list is empty\r\n </div>\r\n <div class=\"description d-flex justify-content-center mt-4\">\r\n Looks like no item is present with filter. Go ahead & explore top categories.\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n </ng-container>\r\n <simpo-card-skeleton-loader *ngIf=\"apiLoading\" [count]=\"getElementRow()\"></simpo-card-skeleton-loader>\r\n </div>\r\n\r\n <div class=\"bottom-filter\">\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openSorting(SortingSection)\">\r\n <mat-icon>sort</mat-icon>\r\n <span>Sort by</span>\r\n </div>\r\n <div class=\"divider\"></div>\r\n <div class=\"d-flex filter-text\" style=\"gap: 10px\" (click)=\"openFilter(FilterSection)\">\r\n <mat-icon>filter_list</mat-icon>\r\n <span>Filter</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\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 </section>\r\n</ng-container>\r\n\r\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\"\r\n [theme]=\"{ width: '100%', height: '40vh', 'border-radius': '10px', 'position': 'relative', 'right': '5px' }\"></ngx-skeleton-loader>\r\n\r\n<ng-template #FavouriteTags let-product=\"data\">\r\n <div class=\"fav-icon-wrapper\">\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\r\n </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\r\n </mat-icon>\r\n <span class=\"fav-tooltip\">\r\n {{ product.whislist ? 'Remove from wishlist' : 'Add to wishlist' }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n\r\n<ng-template #Tags let-product=\"data\">\r\n <div class=\"product-tag-badge\" *ngIf=\"product?.tags?.length\">\r\n <span *ngFor=\"let tag of product.tags; let i = index\" class=\"product-tag-label\"\r\n [class.tag-active]=\"i === (tagIndexMap[product.itemId] ?? 0)\" [style.background]=\"styles?.background?.accentColor\"\r\n [style.color]=\"getTextColor(styles?.background?.accentColor)\">\r\n {{ tag }}\r\n </span>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #FilterSection>\r\n <section>\r\n <div class=\"categories-section\" *ngIf=\"categories?.length\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"categoriesCollapsed = !categoriesCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Shop by Categories</b></h6>\r\n <mat-icon>{{ categoriesCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!categoriesCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let category of displayedCategories\"\r\n (click)=\"applyFilter(category, 'FILTER')\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"category.status\" />\r\n <div class=\"trim-text\">{{category.option | titlecase}}</div>\r\n </div>\r\n <div *ngIf=\"categories.length > 4\" class=\"toggle-categories\" (click)=\"toggleCategories()\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"toggle-text\">\r\n {{ showAllCategories ? 'Show Less' : 'Show More' }}\r\n <span class=\"dropdown-icon\">\r\n <ng-container *ngIf=\"!showAllCategories\">\r\n <mat-icon>expand_more</mat-icon>\r\n </ng-container>\r\n <ng-container *ngIf=\"showAllCategories\">\r\n <mat-icon>expand_less</mat-icon>\r\n </ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"collections?.length\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"collectionsCollapsed = !collectionsCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Shop by Collections</b></h6>\r\n <mat-icon>{{ collectionsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!collectionsCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let collection of displayedCollections\"\r\n (click)=\"applyFilter(collection, 'FILTER')\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"collection.status\" />\r\n <div class=\"trim-text\">{{collection.option | titlecase}}</div>\r\n </div>\r\n <div *ngIf=\"collections.length > 4\" class=\"toggle-categories\" (click)=\"toggleCollections()\"\r\n [style.color]=\"styles?.background?.accentColor\">\r\n <span class=\"toggle-text\">\r\n {{ showAllCollections ? 'Show Less' : 'Show More' }}\r\n <span class=\"dropdown-icon\">\r\n <ng-container *ngIf=\"!showAllCollections\"><mat-icon>expand_more</mat-icon></ng-container>\r\n <ng-container *ngIf=\"showAllCollections\"><mat-icon>expand_less</mat-icon></ng-container>\r\n </span>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"ratingsCollapsed = !ratingsCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Ratings</b></h6>\r\n <mat-icon>{{ ratingsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!ratingsCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let rating of ratingOptions\" (click)=\"onRatingChange(rating)\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"rating.selected\" />\r\n <div class=\"trim-text\">{{ rating.label }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"priceCollapsed = !priceCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Shop by price</b></h6>\r\n <mat-icon>{{ priceCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!priceCollapsed\">\r\n <label class=\"category-options\" *ngFor=\"let range of priceRanges;let i = index\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [(ngModel)]=\"range.selected\" (change)=\"onPriceRangeChange(i)\" />\r\n <div class=\"trim-text\">{{ range.label }}</div>\r\n </label>\r\n </ng-container>\r\n </div>\r\n\r\n\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"productTypeCollapsed = !productTypeCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Product Type</b></h6>\r\n <mat-icon>{{ productTypeCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!productTypeCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of productTypesData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleProductSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"shopForCollapsed = !shopForCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Shop for</b></h6>\r\n <mat-icon>{{ shopForCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!shopForCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of shopForData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleShopSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"materialCollapsed = !materialCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Material</b></h6>\r\n <mat-icon>{{ materialCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!materialCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of materialSizeData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleMaterialSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"metalCollapsed = !metalCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Metal</b></h6>\r\n <mat-icon>{{ metalCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!metalCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of metalSizeData\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleMetalSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <div class=\"categories-section\" *ngIf=\"toShowInJewellery\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-items-center\"\r\n (click)=\"ringStyleCollapsed = !ringStyleCollapsed\" style=\"cursor:pointer\">\r\n <h6><b>Ring Style</b></h6>\r\n <mat-icon>{{ ringStyleCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\r\n </div>\r\n <ng-container *ngIf=\"!ringStyleCollapsed\">\r\n <div class=\"category-options\" *ngFor=\"let size of ringSizes\">\r\n <input type=\"checkbox\" class=\"check-color\" [style.--color]=\"styles?.background?.accentColor\"\r\n [checked]=\"size.status\" (change)=\"toggleSize(size)\" />\r\n <div class=\"trim-text\">{{ size.size }}</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #SortingSection>\r\n <section style=\"padding: 10px\">\r\n <div class=\"categories heading-small d-flex justify-content-between align-item-center \" style=\"padding: 0px;\">\r\n <span>Sort by</span>\r\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\r\n </div>\r\n <mat-radio-group class=\"d-flex flex-column\" [(ngModel)]=\"sortBy\">\r\n <mat-radio-button *ngFor=\"let sortingType of filteringArray\" (click)=\"selectOption(sortingType, $event)\"\r\n [value]=\"sortingType.value\">{{sortingType.name}}</mat-radio-button>\r\n </mat-radio-group>\r\n </section>\r\n</ng-template>\r\n\r\n<ng-template #ProductDesc let-product=\"data\" let-index=\"index\">\r\n <ng-template #theme1style1>\r\n <div class=\"product-card position-relative h-100\" [ngClass]=\"{'hover-effect': styles?.theme == theme.Theme1}\">\r\n <div *ngIf=\"!(product.itemImages?.length && product.itemImages?.[0]?.imgUrl)\"\r\n class=\"default-image position-relative\">\r\n <img loading=\"lazy\" src=\"https://i.postimg.cc/hPS2JpV0/no-image-available.jpg\" alt=\"\"\r\n (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n </div>\r\n\r\n <div *ngIf=\"product.itemImages?.length && product.itemImages?.[0]?.imgUrl\"\r\n class=\"default-image position-relative\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"getProductImages(product)\" alt=\"\" class=\"product-img\" [class.fade-out]=\"imageIndex == index\"\r\n (click)=\"proceedToProductDesc(product)\" [simpoBackground]=\"styles?.background\">\r\n <div class=\"carousel-buttons\" *ngIf=\"product.itemImages?.length > 1\">\r\n <div><mat-icon (click)=\"changeImage(product, 'PREV', index)\">keyboard_arrow_left</mat-icon></div>\r\n <div><mat-icon (click)=\"changeImage(product, 'NEXT', index)\">keyboard_arrow_right</mat-icon></div>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"FavouriteTags; context: {data: product}\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"Tags; context: {data: product}\"></ng-container>\r\n </div>\r\n\r\n <div class=\"mt-2 w-100\">\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 <div class=\"d-flex align-item-center justify-content-between\" [style.display]=\"true ? 'block!important' : ''\">\r\n <div class=\"price body-large text-left d-flex align-items-center g-10\">\r\n <div class=\"fs-16\">\r\n <span [innerHTML]='currency'></span>\r\n {{product?.price?.sellingPrice | number:'1.0-0'}}\r\n </div>\r\n\r\n <div class=\"fs-16 text-start\">\r\n <span *ngIf=\"product?.price?.value - product?.price?.discountedPrice > 2\" class=\"discount-price\">\r\n {{product?.price?.value | number:'1.0-0'}}\r\n </span>\r\n </div>\r\n <!-- <div class=\"price discount-price\" *ngIf=\"product?.price?.discountedPrice < product?.price?.sellingPrice\">\r\n <span [innerHTML]='currency'></span>\r\n {{product.price.sellingPrice | number:'1.0-0'}}\r\n </div> -->\r\n </div>\r\n\r\n <div class=\"product-name heading-large w-100 text-left trim-text\"\r\n [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n\r\n <div class=\"material-info\"\r\n *ngIf=\"isMaterialBasedPricing && (product?.materials?.length || product?.baseWeight)\">\r\n <span *ngIf=\"product?.materials?.[0]?.purity\">{{ product.materials[0].purity }}</span>\r\n <span *ngIf=\"product?.materials?.[0]?.purity && product?.baseWeight\"> \u00B7 </span>\r\n <span *ngIf=\"product?.baseWeight\">{{ product.baseWeight }}g</span>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\r\n class=\"add-to-cart-btn\">\r\n <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\r\n simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n <div class=\"quantity full-width-quantity\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\"\r\n (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n <div>\r\n <button disabled class=\"out-of-stock\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n <div class=\"try-button-section\"\r\n *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\r\n <div class=\"try-at-home\">\r\n <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n HOME</button>\r\n </div>\r\n <div class=\"video-call-image\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-container *ngIf=\"screenWidth < 475 && styles?.mobileColumn === 1; else theme1style1\">\r\n <div class=\"row w-100\">\r\n <div class=\"col-8 d-flex flex-column gap-3\">\r\n <div class=\"text-left\" [style.color]=\"styles?.background?.accentColor\">{{ product.name }}</div>\r\n <div class=\"fs-16 text-start\">\r\n <span [innerHTML]='currency'></span>\r\n {{product?.price?.sellingPrice | number:'1.0-0'}}\r\n </div>\r\n <div class=\"d-flex w-45\">\r\n <div\r\n *ngIf=\"content?.display?.showButton && !appointmentSettings?.homeVisitProductsEnabled && product.itemInventory?.openingStock > 0\"\r\n class=\"add-to-cart-btn w-100\">\r\n <button class=\"send-btn d-flex align-items-center justify-content-center p-2\" [buttonData]=\"button?.content\"\r\n simpoButtonDirective [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\"\r\n *ngIf=\"(!product.quantity && !isItemOutOfStock(product)) && IsEcommerce\"\r\n (click)=\"addItemToCart($event, product, 'ADD')\">Add to Cart</button>\r\n <button *ngIf=\"!IsEcommerce\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\"\r\n [id]=\"data?.id+getButtonId(1)\" (click)=\"raiseLead()\">Notify Me</button>\r\n <div class=\"quantity full-width-quantity br-8\" [style.borderColor]=\"getButtonStyle(1)?.background\"\r\n [style.width]=\"true ? '100%' : ''\" *ngIf=\"product.quantity && !isItemOutOfStock(product)\">\r\n <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\"\r\n (click)=\"addItemToCart($event, product, 'SUBSTRACT')\">-</span>\r\n <span style=\"width: 70%;\">{{product.quantity}}</span>\r\n <span class=\"change-quantity w-35 br-8\" [style.background]=\"getButtonStyle(1)?.background\"\r\n [style.color]=\"getButtonStyle(1)?.textColor\" (click)=\"addItemToCart($event, product, 'ADD')\">+</span>\r\n </div>\r\n </div>\r\n <div>\r\n <button disabled class=\"out-of-stock w-100\" *ngIf=\"isItemOutOfStock(product)\">Out Of Stock</button>\r\n </div>\r\n <div class=\"try-button-section w-100\"\r\n *ngIf=\"content?.display?.showButton && appointmentSettings?.homeVisitProductsEnabled && product?.itemInventory?.openingStock > 0\">\r\n <div class=\"try-at-home\">\r\n <button class=\"send-btn p-2\" [buttonData]=\"button?.content\" simpoButtonDirective [sectionId]=\"data?.id\"\r\n (click)=\"addToTrialCart(product)\" [color]=\"data?.styles?.background?.accentColor\"\r\n [backgroundInfo]=\"data?.styles?.background\" [appButtonEditor]=\"edit ?? false\"\r\n [buttonStyle]=\"getButtonStyle(1)\" [buttonId]=\"getButtonId(1)\" [id]=\"data?.id+getButtonId(1)\">TRY AT\r\n HOME</button>\r\n </div>\r\n <div class=\"video-call-image\">\r\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/578606c1753450810262video_Call.svg\"\r\n alt=\"video\" (click)=\"addVideoCallCurrent(product)\" />\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4 h-100 position-relative\">\r\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n [src]=\"getProductImages(product)\" alt=\"\" class=\"w-h-110\" [class.fade-out]=\"imageIndex == index\"\r\n (click)=\"proceedToProductDesc(product)\">\r\n </div>\r\n </div>\r\n\r\n\r\n\r\n </ng-container>\r\n\r\n\r\n\r\n\r\n\r\n</ng-template>\r\n\r\n\r\n\r\n", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}input[type=checkbox]{accent-color:var(--color)}.total-container{position:relative}.discount-price{color:#d3d3d3;text-decoration:line-through}.custom-sort-dropdown{display:inline-flex;justify-content:flex-end;flex-grow:1;align-items:center;gap:6px;padding:6px 12px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:600;color:#000;cursor:pointer;-webkit-user-select:none;user-select:none;border-radius:6px;position:relative;background-color:#fff;width:fit-content;min-width:fit-content;max-width:fit-content;outline:none;border:none}.sort-label{color:#555;white-space:nowrap}.selected-value{flex-shrink:0;white-space:nowrap;color:#000}.toggle-icon{font-size:20px;transition:transform .3s ease;-webkit-user-select:none;user-select:none}.toggle-icon.open{transform:rotate(180deg)}.options{position:absolute;top:100%;left:0;right:0;margin-top:4px;background-color:#fff;border:none;border-radius:0 0 6px 6px;box-shadow:0 4px 6px #0000001a;max-height:180px;overflow-y:auto;z-index:100;font-weight:400;text-align:left!important}.option{padding:8px 12px;cursor:pointer;white-space:nowrap;transition:background-color .2s ease}.option:hover{background-color:#fff;color:#000}.option.selected{background-color:#fff;color:#000;font-weight:600}.video-call-container{align-items:center}@media screen and (min-width: 1024px){.add-to-cart-btn{display:none}.add-to-cart-btn button{height:35px;font-size:16px!important}.product-card .add-to-cart-btn,.product-card{display:none}.product-card:hover .add-to-cart-btn,.product-card:hover{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important}.product-card .try-button-section{display:none}.product-card:hover .try-button-section{display:flex;z-index:100!important;padding:10px;left:0;position:absolute;width:100%;background:#fff;border:none;border-radius:0 0 10px 10px/0px 0px 10px 10px!important;box-shadow:0 16px 32px #b6b2b233}.product-card .fav-icon{display:none}.product-card:hover .fav-icon{display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100!important}}::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled){background-color:#fff!important}.fav-icon{position:absolute;z-index:100;padding:5px;right:10px;top:10px;height:fit-content;width:fit-content;background-color:#ffffff78;border-radius:50%}.out-of-stock{background-color:#d3d3d333;color:#000;border-radius:5px;border:none}.f-20{font-size:20px}.selling-price{text-decoration:line-through;font-size:14px!important;margin-right:8px;color:#d3d3d3}.fav-tooltip{visibility:hidden;opacity:0;background:#222;color:#fff;font-size:10px;padding:4px 10px;border-radius:5px;position:absolute;top:40px;right:30px;white-space:nowrap;z-index:200;transition:opacity .2s;pointer-events:none;box-shadow:0 2px 8px #00000026}.fav-icon-wrapper:hover .fav-tooltip{visibility:visible;opacity:1}.discounted-price{margin-top:-3px;font-size:14px!important}.filter-side{width:20%;position:sticky;top:0;overflow-y:auto;height:100%;border-right:1px solid lightgrey}.filter{font-size:22px;font-weight:600;line-height:26px;color:#000}.price-ranges{display:flex;flex-direction:column;gap:8px;padding-left:8px;max-width:250px}.send-btn:hover{transform:translateY(-1px);box-shadow:0 4px 8px #8b5cf64d}.price-range-item{font-size:14px;color:#333;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px}.price-range-item input[type=checkbox]{width:16px;height:16px}.categories-section{padding:.8rem 0rem;border-bottom:1px solid #D8D8D8}.categories-section:last-child{padding:.8rem 0rem;border-bottom:none}.clear{color:#e60101;font-size:14px;cursor:pointer;font-weight:600}.toggle-categories{margin-top:8px;cursor:pointer;font-weight:500;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none;width:100%}.empty-cart{display:flex;align-items:center;justify-content:center;text-align:center;height:75vh}.toggle-text .dropdown-icon{margin-left:6px;font-size:1em;margin-top:5px}.toggle-text{display:flex;align-items:center}.categories{display:flex;padding:1rem 0rem;padding-bottom:0;color:#000;font-size:18px!important;font-weight:500}.category-options{display:flex;align-items:center;cursor:pointer;padding:.75rem 0rem;gap:11px;font-weight:400!important}.category-options div{font-size:14px}.button-section{width:26%;margin:2rem 1.5rem}.button-section button{position:relative;border:none;padding:5px;width:100px!important;font-weight:600;left:-10px;border-radius:4px;white-space:nowrap;overflow:hidden}.chip{padding:5px 15px;border-radius:20px;gap:5px;width:max-content;margin:3px 0;transition:.3s opacity ease;border:1px solid}.chip:hover{opacity:.8}.price-button-section{display:flex;align-items:center;flex-direction:column-reverse}.price-range{color:#93959e;font-size:15px;white-space:nowrap}.right-side{width:80%;padding-bottom:50px;height:100vh;overflow-y:auto;flex:1 1 0;min-width:0}.bottom-filter{display:none}.onlyMobile{display:none!important}.quantity{display:flex;justify-content:space-between;align-items:center;border:1.5px solid lightgray;border-radius:3px;padding:5px;font-weight:600;width:95px}.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;cursor:pointer}.varient-list .selected-varient{border:1px solid transparent}:is() .speeddial-linear .p-speeddial-direction-up{position:relative;bottom:0%;right:0}select{width:200px;font-size:16px;padding:10px;border:1px solid lightgray;border-radius:3px;cursor:pointer}input[type=checkbox]{height:16px;width:16px}.input-group-sticky{width:100%;height:57px}.input-group{position:sticky;top:0;width:95%;z-index:100;padding:5px;outline:none;border:none;border-radius:5px;height:7vh;display:flex;align-items:center;background-color:#fff;border:1.5px solid #8080801c;box-shadow:0 0 0 1px #edececd6;margin:15px auto}.input-group .fa-search{color:gray;background-color:transparent;width:10%;display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;top:1px}.input-group input{height:100%;width:80%;background-color:transparent;border:none;outline:none;font-size:16px;padding-bottom:6px;box-shadow:none}.back-to-home{background-color:#9b9a9a1c;padding:5px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:fixed;right:3px;top:50%;cursor:pointer}.back-to-home .mat-icon{font-size:16px;height:16px;width:16px}.try-button-section{display:flex;justify-content:space-between;align-items:center}.try-button-section .try-at-home{width:78%}.try-button-section .try-at-home button{border:1px solid #DE57E5;border-radius:5px;font-size:14px!important;padding:5px 0!important}.try-button-section .video-call-image{width:20%;height:32px}.try-button-section .video-call-image img{width:100%;height:100%}.box-shadow{box-shadow:#0000003d 0 3px 4px;border-radius:10px!important}.discount-price{color:#d3d3d3;text-decoration:line-through;font-size:16px}.g-10{gap:10px}.mtb-5{margin-top:5px;margin-bottom:5px}.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}.gap-15{gap:15px}.flex-wrap{flex-wrap:wrap}.carousel-buttons{display:flex;position:absolute;bottom:0;left:10px;gap:5px;transform:translateY(-50%);pointer-events:none}.carousel-buttons div{background:#fff;display:flex;align-items:center;border-radius:100%;justify-content:center;pointer-events:auto}.main-product-section{height:100vh;display:flex;position:relative}.filter-side{max-width:20%;width:100%;flex:0 0 20%}.modal-content{height:100%;border:none;border-radius:0!important}.modal-content{border-radius:18px!important}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9;border-radius:0!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;position:absolute;bottom:20px;left:10px;width:95%!important}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.tag-icon{position:absolute!important;top:10px;left:10px;background:#e9bb18;text-transform:uppercase;padding:5px 10px;border:none;border-radius:8px;font-size:10px;color:#000}.filter-top-section{border-right:1px solid lightgrey;width:20%;padding:1rem .5em 1rem 0rem;border-bottom:1px solid lightgrey}.product-parent{width:100%;display:flex;flex-wrap:wrap;padding:10px;z-index:1}.product-parent .product{height:auto;transform:none;z-index:1;background-color:#fff}.product-parent .product .product-card{height:100%;padding:10px;display:flex;flex-direction:column;justify-content:flex-start;transition:all .3s ease-in-out}.product-parent .product .product-name{color:#222;font-size:14px!important;line-height:26px;margin-bottom:5px;text-align:left!important;width:220px;font-weight:500;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all .3s ease-in-out}.product-parent .product .product-img{border-radius:10px;width:100%;height:180px;z-index:1;border:.5px solid #eee}.product-parent .product .default-image img{width:100%;height:180px;border-radius:10px}.product-parent .product:hover{height:auto!important;transform:scale(1.05);border-radius:10px!important;box-shadow:0 16px 32px #b6b2b299;z-index:100!important}@media screen and (max-width: 475px){.container-fluid{padding-left:5px!important;padding-right:5px!important;padding-top:0!important}.product-name{font-size:14px}.product-parent{gap:10px}.product{padding:10px!important;margin-top:0!important;height:auto!important;transform:none!important;z-index:1!important;box-shadow:0 8px 16px #0003!important}.product .product-card{padding:0!important}.out-of-stock{font-size:12px!important}.discounted-price{font-size:14px!important}.add-to-cart-btn button{font-size:14px!important;padding:5px!important}.call-details{width:100%}.filter-text{gap:10px;font-size:16px;align-items:center;font-weight:500;cursor:pointer}.mat-slider{width:304px!important}.price-range{font-size:16px}.chip{min-width:fit-content!important}.onlyMobile{display:flex!important;row-gap:0px}.onlyMobile mat-icon{pointer-events:auto!important;z-index:1000}.category-options{padding-left:8px;padding-right:0}.categories{padding-left:0}.button-section{margin-left:15px}.button-section button{width:120px!important;padding:10px!important}.bottom-filter{position:fixed!important;display:block;z-index:100000001;width:100%;margin-left:-5px;position:absolute;bottom:-5px;display:flex;border-top:1px solid #80808045;justify-content:space-evenly;align-items:center;height:64px;background:#fff;box-shadow:#0000001a 0 4px 12px}.divider{height:60%;width:.5px;border:1px solid #d3d3d378}.onlyDesktop{display:none!important}.product-img{height:100%}.default-image img{width:100%;height:100%;box-shadow:#0000003d 0 3px 8px}.filter-side{display:none}.right-side{width:100%;margin-left:0!important;height:95%!important;padding-bottom:0!important}.main-product-section{height:auto;display:flex;position:relative;padding-bottom:7rem}}.fs-16{font-size:16px!important}.mobile-filter-chip{display:flex;align-items:center;gap:15px;border:1px solid;border-radius:30px;padding:5px 15px;height:35px}.mobile-filter-chip mat-icon{font-size:20px;display:flex;align-items:center;justify-content:center}.w-h-110{width:110px;height:110px}.w-45{width:45%}.br-8{border-radius:8px}.w-35{width:35%!important}.product-tag-badge{position:absolute;top:8px;left:8px;z-index:2;pointer-events:none}.product-tag-label{position:absolute;top:0;left:0;font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:5px 10px;border-radius:4px;white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}.product-tag-label.tag-active{opacity:1;transform:translateY(0)}.material-info{font-size:11px;color:#888;margin-top:2px;letter-spacing:.3px}\n"] }]
|
|
21143
21145
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
21144
21146
|
type: Inject,
|
|
21145
21147
|
args: [PLATFORM_ID]
|
|
@@ -23461,6 +23463,18 @@ class VerifyComponent extends BaseSection {
|
|
|
23461
23463
|
const orderId = localStorage.getItem("orderId");
|
|
23462
23464
|
const appointmentPaymentId = localStorage.getItem("appointmentPaymentId");
|
|
23463
23465
|
console.log('calling verify payment');
|
|
23466
|
+
// Stripe redirects back with ?redirect_status=succeeded|processing|failed. When Stripe
|
|
23467
|
+
// already reports a failure there is nothing to poll, so show the failed screen directly.
|
|
23468
|
+
const stripeRedirectStatus = new URLSearchParams(window.location.search).get('redirect_status');
|
|
23469
|
+
if (stripeRedirectStatus === 'failed') {
|
|
23470
|
+
localStorage.removeItem("orderId");
|
|
23471
|
+
localStorage.removeItem("paymentFor");
|
|
23472
|
+
this.paymentStatus = 'FAILED';
|
|
23473
|
+
setTimeout(() => {
|
|
23474
|
+
this.router.navigate(['/']);
|
|
23475
|
+
}, 3000);
|
|
23476
|
+
return;
|
|
23477
|
+
}
|
|
23464
23478
|
if (passBookOrderId) {
|
|
23465
23479
|
this.checkPassbookPaymentStatus();
|
|
23466
23480
|
}
|
|
@@ -23519,7 +23533,9 @@ class VerifyComponent extends BaseSection {
|
|
|
23519
23533
|
// })
|
|
23520
23534
|
}
|
|
23521
23535
|
else {
|
|
23522
|
-
|
|
23536
|
+
// Stripe confirms the order asynchronously (webhook), so give the backend a moment
|
|
23537
|
+
// between polls instead of firing all retries back-to-back.
|
|
23538
|
+
setTimeout(() => this.checkPaymentStatus(), 1500);
|
|
23523
23539
|
}
|
|
23524
23540
|
});
|
|
23525
23541
|
}
|