simpo-component-library 3.6.470 → 3.6.472
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/directive/translate-onhover.directive.mjs +1 -5
- package/esm2022/lib/ecommerce/sections/passbook-transactions/passbook-transactions.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/scheme-details/scheme-details.component.mjs +3 -3
- package/esm2022/lib/ecommerce/sections/user-profile/user-profile.component.mjs +3 -3
- package/esm2022/lib/elements/editor-service.service.mjs +1 -1
- package/esm2022/lib/sections/banner-section/banner-section.component.mjs +2 -2
- package/esm2022/lib/sections/choose-us-section/choose-us-section.component.mjs +12 -4
- package/esm2022/lib/sections/contact-us/contact-us.component.mjs +4 -4
- package/esm2022/lib/sections/contact-us/contact-us.modal.mjs +1 -1
- package/esm2022/lib/sections/header-section/header-section.component.mjs +3 -3
- package/esm2022/lib/sections/image-carousel-section/image-carousel-section.component.mjs +3 -3
- package/esm2022/lib/sections/service-section/service-section.component.mjs +22 -4
- package/esm2022/lib/sections/service-section/service-section.model.mjs +1 -1
- package/esm2022/lib/sections/testimonial-section/testimonial-section.component.mjs +107 -22
- package/esm2022/lib/sections/testimonial-section/testimonial-section.model.mjs +1 -1
- package/esm2022/lib/sections/text-section/text-section.component.mjs +22 -4
- package/esm2022/lib/sections/text-section/text-section.model.mjs +1 -1
- package/fesm2022/simpo-component-library.mjs +169 -46
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/sections/choose-us-section/choose-us-section.component.d.ts +2 -0
- package/lib/sections/contact-us/contact-us.modal.d.ts +2 -1
- package/lib/sections/service-section/service-section.component.d.ts +6 -1
- package/lib/sections/service-section/service-section.model.d.ts +2 -1
- package/lib/sections/testimonial-section/testimonial-section.component.d.ts +15 -2
- package/lib/sections/testimonial-section/testimonial-section.model.d.ts +4 -1
- package/lib/sections/text-section/text-section.component.d.ts +6 -1
- package/lib/sections/text-section/text-section.model.d.ts +2 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.472.tgz +0 -0
- package/simpo-component-library-3.6.470.tgz +0 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i4 from '@angular/common';
|
|
2
2
|
import { CommonModule, isPlatformBrowser, NgStyle, NgFor, NgIf } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Component, Input, EventEmitter, Injectable, Directive, HostListener, InjectionToken, Inject, inject, PLATFORM_ID, ViewChild, ElementRef, Renderer2, forwardRef, Output, Pipe, Optional, NgModule } from '@angular/core';
|
|
4
|
+
import { Component, Input, EventEmitter, Injectable, Directive, HostListener, InjectionToken, Inject, inject, PLATFORM_ID, ViewChild, ElementRef, Renderer2, forwardRef, Output, Pipe, Optional, NgModule, ViewChildren } from '@angular/core';
|
|
5
5
|
import { MatGridListModule } from '@angular/material/grid-list';
|
|
6
6
|
import * as i2 from '@angular/material/button';
|
|
7
7
|
import { MatButtonModule } from '@angular/material/button';
|
|
@@ -2518,12 +2518,10 @@ class TranslateOnhoverDirective {
|
|
|
2518
2518
|
this.el.nativeElement.style.setProperty("transition", "transform 0.3s ease-in-out");
|
|
2519
2519
|
this.el.nativeElement.addEventListener('mouseover', () => {
|
|
2520
2520
|
this.el.nativeElement.style.position = 'relative';
|
|
2521
|
-
this.el.nativeElement.style.zIndex = '101';
|
|
2522
2521
|
this.el.nativeElement.style.transform = 'translateY(-20px)';
|
|
2523
2522
|
});
|
|
2524
2523
|
this.el.nativeElement.addEventListener('mouseout', () => {
|
|
2525
2524
|
this.el.nativeElement.style.position = 'relative';
|
|
2526
|
-
this.el.nativeElement.style.zIndex = '100';
|
|
2527
2525
|
this.el.nativeElement.style.transform = 'translateY(0)';
|
|
2528
2526
|
});
|
|
2529
2527
|
}
|
|
@@ -2531,8 +2529,6 @@ class TranslateOnhoverDirective {
|
|
|
2531
2529
|
this.el.nativeElement.style.setProperty("transition", "none");
|
|
2532
2530
|
this.el.nativeElement.addEventListener('mouseover', () => {
|
|
2533
2531
|
this.el.nativeElement.style.position = 'relative';
|
|
2534
|
-
// this.el.nativeElement.style.zIndex = '100'
|
|
2535
|
-
// this.el.nativeElement.style.transform = 'translateY(0px)';
|
|
2536
2532
|
});
|
|
2537
2533
|
}
|
|
2538
2534
|
}
|
|
@@ -4727,6 +4723,7 @@ class TextSectionComponent extends BaseSection {
|
|
|
4727
4723
|
this._dialog = _dialog;
|
|
4728
4724
|
this._eventService = _eventService;
|
|
4729
4725
|
this._mainContainer = null;
|
|
4726
|
+
this.screenWidth = "";
|
|
4730
4727
|
}
|
|
4731
4728
|
get stylesLayout() {
|
|
4732
4729
|
return { ...this.data?.styles?.layout };
|
|
@@ -4735,6 +4732,18 @@ class TextSectionComponent extends BaseSection {
|
|
|
4735
4732
|
this.content = this.data?.content;
|
|
4736
4733
|
this.styles = this.data?.styles;
|
|
4737
4734
|
this.deleteSelected = this.delete;
|
|
4735
|
+
this.getScreenSize();
|
|
4736
|
+
}
|
|
4737
|
+
get point() {
|
|
4738
|
+
return { ...this.content?.tag?.position };
|
|
4739
|
+
}
|
|
4740
|
+
onDragEnded(event) {
|
|
4741
|
+
const transform = event.source.getFreeDragPosition();
|
|
4742
|
+
this.content.tag.position.x = transform.x ?? 0;
|
|
4743
|
+
this.content.tag.position.y = transform.y ?? 0;
|
|
4744
|
+
}
|
|
4745
|
+
getScreenSize() {
|
|
4746
|
+
this.screenWidth = window.innerWidth;
|
|
4738
4747
|
}
|
|
4739
4748
|
editSection() {
|
|
4740
4749
|
if (window.innerWidth <= 475)
|
|
@@ -4745,7 +4754,7 @@ class TextSectionComponent extends BaseSection {
|
|
|
4745
4754
|
}, 100);
|
|
4746
4755
|
}
|
|
4747
4756
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextSectionComponent, deps: [{ token: i1$1.MatDialog }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4748
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextSectionComponent, isStandalone: true, selector: "simpo-text-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"
|
|
4757
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextSectionComponent, isStandalone: true, selector: "simpo-text-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"main-section\"\r\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag\r\n [cdkDragFreeDragPosition]=\"point\" (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\"\r\n [cdkDragDisabled]=\"!edit\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div class=\"body-section w-100\">\r\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element> -->\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\"\r\n class=\"w-100 overflow-scroll\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-2 d-md-flex mt-15 w-100 flex-wrap\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [color]=\"styles?.background?.accentColor\" [sectionId]=\"data?.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <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</div>", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.overflow-scroll{overflow-x:scroll}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { 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: "ngmodule", type: MatDialogModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type:
|
|
4749
4758
|
//directive
|
|
4750
4759
|
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
|
|
4751
4760
|
}
|
|
@@ -4760,6 +4769,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4760
4769
|
SimpoButtonComponent,
|
|
4761
4770
|
TextEditorComponent,
|
|
4762
4771
|
SpacingHorizontalDirective,
|
|
4772
|
+
CdkDrag,
|
|
4763
4773
|
//directive
|
|
4764
4774
|
AnimationDirective,
|
|
4765
4775
|
BackgroundDirective,
|
|
@@ -4767,7 +4777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4767
4777
|
ContentFitDirective,
|
|
4768
4778
|
HoverDirective,
|
|
4769
4779
|
OverlayDirective,
|
|
4770
|
-
], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\"
|
|
4780
|
+
], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"main-section\"\r\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag\r\n [cdkDragFreeDragPosition]=\"point\" (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\"\r\n [cdkDragDisabled]=\"!edit\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div class=\"body-section w-100\">\r\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element> -->\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\"\r\n class=\"w-100 overflow-scroll\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-2 d-md-flex mt-15 w-100 flex-wrap\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [color]=\"styles?.background?.accentColor\" [sectionId]=\"data?.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <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</div>", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.overflow-scroll{overflow-x:scroll}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}\n"] }]
|
|
4771
4781
|
}], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: EventsService }], propDecorators: { data: [{
|
|
4772
4782
|
type: Input
|
|
4773
4783
|
}], index: [{
|
|
@@ -4783,6 +4793,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4783
4793
|
}], _mainContainer: [{
|
|
4784
4794
|
type: ViewChild,
|
|
4785
4795
|
args: ['mainContainer']
|
|
4796
|
+
}], getScreenSize: [{
|
|
4797
|
+
type: HostListener,
|
|
4798
|
+
args: ["window: resize", ["$event"]]
|
|
4786
4799
|
}] } });
|
|
4787
4800
|
|
|
4788
4801
|
class simpoConetenAlignmentDirective {
|
|
@@ -5156,7 +5169,7 @@ class BannerSectionComponent extends BaseSection {
|
|
|
5156
5169
|
return `linear-gradient(${direction} ,${this.styles?.background?.accentColor},${this.styles?.background?.secondaryAccentColor})`;
|
|
5157
5170
|
}
|
|
5158
5171
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5159
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\" [simpoMergeHeader]=\"styles?.merge\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\" (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'wrap-reverse' : styles?.positionLayout?.value == 'bottom'}\">\r\n <!-- overflow-hidden -->\r\n <!-- [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\" -->\r\n <!-- [simpoMergeHeader]=\"styles?.merge\" -->\r\n <!-- [backgroundInfo]=\"styles?.background?.image\" -->\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': (isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')) || !content?.image?.showImage}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?. image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <!-- 'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-12':!isBorderlessImage || !content?.image?.showImage, -->\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'box p-3': content?.display?.showCard , 'col-lg-6' : content?.image?.showImage && !isBorderlessImage }\"\r\n [style.background]=\"content?.display?.showCard ? getColor() : 'transparent'\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n alt=\"something\" />\r\n <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></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</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:700;font-size:12px!important}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.wrap-reverse{flex-wrap:wrap-reverse!important}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type:
|
|
5172
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\" [simpoMergeHeader]=\"styles?.merge\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\" (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'wrap-reverse' : styles?.positionLayout?.value == 'bottom'}\">\r\n <!-- overflow-hidden -->\r\n <!-- [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\" -->\r\n <!-- [simpoMergeHeader]=\"styles?.merge\" -->\r\n <!-- [backgroundInfo]=\"styles?.background?.image\" -->\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': (isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')) || !content?.image?.showImage}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?. image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <!-- 'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-12':!isBorderlessImage || !content?.image?.showImage, -->\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'box p-3': content?.display?.showCard , 'col-lg-6' : content?.image?.showImage && !isBorderlessImage }\"\r\n [style.background]=\"content?.display?.showCard ? getColor() : 'transparent'\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n alt=\"something\" />\r\n <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></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</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.wrap-reverse{flex-wrap:wrap-reverse!important}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type:
|
|
5160
5173
|
// SimpoHoverBorderDirective,
|
|
5161
5174
|
//directive
|
|
5162
5175
|
SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: MergeHeaderDirective, selector: "[simpoMergeHeader]", inputs: ["simpoMergeHeader", "backgroundInfo"] }] }); }
|
|
@@ -5190,7 +5203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5190
5203
|
SpacingAroundDirective,
|
|
5191
5204
|
ImageEditorDirective,
|
|
5192
5205
|
MergeHeaderDirective
|
|
5193
|
-
], template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\" [simpoMergeHeader]=\"styles?.merge\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\" (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'wrap-reverse' : styles?.positionLayout?.value == 'bottom'}\">\r\n <!-- overflow-hidden -->\r\n <!-- [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\" -->\r\n <!-- [simpoMergeHeader]=\"styles?.merge\" -->\r\n <!-- [backgroundInfo]=\"styles?.background?.image\" -->\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': (isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')) || !content?.image?.showImage}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?. image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <!-- 'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-12':!isBorderlessImage || !content?.image?.showImage, -->\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'box p-3': content?.display?.showCard , 'col-lg-6' : content?.image?.showImage && !isBorderlessImage }\"\r\n [style.background]=\"content?.display?.showCard ? getColor() : 'transparent'\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n alt=\"something\" />\r\n <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></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</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:
|
|
5206
|
+
], template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\" [simpoMergeHeader]=\"styles?.merge\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\" (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'wrap-reverse' : styles?.positionLayout?.value == 'bottom'}\">\r\n <!-- overflow-hidden -->\r\n <!-- [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\" -->\r\n <!-- [simpoMergeHeader]=\"styles?.merge\" -->\r\n <!-- [backgroundInfo]=\"styles?.background?.image\" -->\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': (isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')) || !content?.image?.showImage}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?. image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <!-- 'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-12':!isBorderlessImage || !content?.image?.showImage, -->\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'box p-3': content?.display?.showCard , 'col-lg-6' : content?.image?.showImage && !isBorderlessImage }\"\r\n [style.background]=\"content?.display?.showCard ? getColor() : 'transparent'\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n alt=\"something\" />\r\n <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></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</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.wrap-reverse{flex-wrap:wrap-reverse!important}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"] }]
|
|
5194
5207
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
5195
5208
|
type: Input
|
|
5196
5209
|
}], index: [{
|
|
@@ -5737,7 +5750,7 @@ class ImageCarouselSectionComponent extends BaseSection {
|
|
|
5737
5750
|
}, 100);
|
|
5738
5751
|
}
|
|
5739
5752
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageCarouselSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5740
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageCarouselSectionComponent, isStandalone: true, selector: "simpo-image-carousel-section", inputs: { data: "data", index: "index", customClass: "customClass", nextComponentColor: "nextComponentColor", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\n <div *ngFor=\"let text of data?.content?.inputText\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\"\n [ngClass]=\"{'px-0 py-0': style?.fullWidth, 'image-screen': style?.layout?.fit === 'screen' && style?.fullWidth, 'img-screen-notext': style?.layout?.fit === 'screen' && style?.fullWidth && text.value === ''}\"\n [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoSpacing]=\"spacingLayout\">\n <div class=\"row mlr-0 w-100\" *ngIf=\"data?.content?.inputText?.length\" [id]=\"data?.id\"\n [simpoAnimation]=\"style?.animation\">\n <div *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"edit || text.value\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n\n <div id=\"carouselExampleCaptions\" class=\"carousel slide\" [simpoLayout]=\"style?.layout\"\n [ngClass]=\"{'mb-0 px-0 py-0': style?.fullWidth, 'mb-md-1 mb-sm-0 mb-lg-1': !style?.fullWidth}\">\n <div class=\"carousel-inner\">\n <!-- data-bs-ride=\"carousel\" -->\n <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\"\n [class.active]=\"i === 0\">\n <div class=\"row m-0\">\n <div class=\"col d-flex p-0\" *ngIf=\"screenWidth >= 475\">\n <!-- <img loading=\"lazy\" class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n <img loading=\"lazy\"\n [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n class=\"d-block position-relative blur\"\n style=\"object-fit: cover !important;width: 100%;max-width: 20%; left: -20px\"\n [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\" loading=\"lazy\"\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n <img loading=\"lazy\"\n [ngClass]=\"{'full-width-image': style?.fullWidth, 'not-full-width': !style?.fullWidth, 'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\"\n [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\"\n [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n <!-- <img loading=\"lazy\" class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n <img loading=\"lazy\"\n [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n class=\"d-block position-relative blur\"\n style=\"object-fit: cover !important;width: 100%; max-width: 20%;right: -20px;\"\n [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\" loading=\"lazy\"\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"col d-flex p-0\" *ngIf=\"screenWidth < 475\">\n <img loading=\"lazy\" class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\"\n [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\"\n [simpoObjectPosition]=\"img?.image?.position\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\n [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n </div>\n </div>\n </div>\n </div>\n <a class=\"carousel-control-prev\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"prev\">\n <span class=\"carousel-control-prev-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_left</mat-icon>\n </span>\n <span class=\"sr-only\">Previous</span>\n\n </a>\n <a class=\"carousel-control-next\" data-bs-target=\"#carouselExampleCaptions\" role=\"button\" data-bs-slide=\"next\">\n <span class=\"carousel-control-next-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_right</mat-icon>\n </span>\n <span class=\"sr-only\">Next</span>\n\n </a>\n </div>\n </div>\n </div>\n\n </div>\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.full-width-image{width:100%;height:70vh}.previous-icon{background:#fff;border-radius:50%}.not-full-width{width:60%}.icon{color:#000!important;font-size:40px!important}.image-height-content{height:70vh}.image-height-screen{height:calc(90vh + -0px);min-height:0px!important}.image-screen{height:calc(110vh + -0px);min-height:0px!important}.img-screen-notext{height:calc(90vh + -0px);min-height:0px!important}.btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.blur{filter:blur(5px)}@media only screen and (max-width: 475px){.previous-icon{width:100%;height:45px!important}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}.caratlane-indicator{display:flex;align-items:center;justify-content:center;background:#1e1f21b3;border-radius:18px;min-width:50px;height:32px;padding:0 16px;font-size:1rem;font-weight:600;color:#fff;margin:18px auto 0;box-shadow:0 2px 8px #151d481a;letter-spacing:1px}.caratlane-indicator .current{font-weight:700;font-size:1rem;color:#fff}.caratlane-indicator .divider,.caratlane-indicator .total{font-weight:500;color:#fff;opacity:.9;margin-left:2px}.caratlane-indicator{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#0009;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;z-index:10;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-width:45px;text-align:center}@media (max-width: 768px){.caratlane-indicator{bottom:15px;padding:6px 12px;font-size:12px}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
5753
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageCarouselSectionComponent, isStandalone: true, selector: "simpo-image-carousel-section", inputs: { data: "data", index: "index", customClass: "customClass", nextComponentColor: "nextComponentColor", edit: "edit", delete: "delete" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<section class=\"container-fluid\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\n <div *ngFor=\"let text of data?.content?.inputText\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\"\n [ngClass]=\"{'px-0': style?.fullWidth, 'image-screen': style?.layout?.fit === 'screen' && style?.fullWidth, 'img-screen-notext': style?.layout?.fit === 'screen' && style?.fullWidth && text.value === ''}\"\n [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoSpacing]=\"spacingLayout\">\n <div class=\"row mlr-0 w-100\" *ngIf=\"data?.content?.inputText?.length\" [id]=\"data?.id\"\n [simpoAnimation]=\"style?.animation\">\n <div *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"edit || text.value\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n\n <div [id]=\"'carouselExampleCaptions'+data?.id\" class=\"carousel slide\" [simpoLayout]=\"style?.layout\"\n [ngClass]=\"{'mb-0 px-0 py-0': style?.fullWidth, 'mb-md-1 mb-sm-0 mb-lg-1': !style?.fullWidth}\">\n <div class=\"carousel-inner\" data-bs-ride=\"carousel\">\n <!-- data-bs-ride=\"carousel\" -->\n <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\"\n [class.active]=\"i === 0\">\n <div class=\"row m-0\">\n <div class=\"col d-flex p-0\" *ngIf=\"screenWidth >= 475\">\n <!-- <img loading=\"lazy\" class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n <img loading=\"lazy\"\n [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n class=\"d-block position-relative blur\"\n style=\"object-fit: cover !important;width: 100%;max-width: 20%; left: -20px\"\n [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\" loading=\"lazy\"\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n <img loading=\"lazy\"\n [ngClass]=\"{'full-width-image': style?.fullWidth, 'not-full-width': !style?.fullWidth, 'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\"\n [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\"\n [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n <!-- <img loading=\"lazy\" class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n <img loading=\"lazy\"\n [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n class=\"d-block position-relative blur\"\n style=\"object-fit: cover !important;width: 100%; max-width: 20%;right: -20px;\"\n [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\" loading=\"lazy\"\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"col d-flex p-0\" *ngIf=\"screenWidth < 475\">\n <img loading=\"lazy\" class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\"\n [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\"\n [simpoObjectPosition]=\"img?.image?.position\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\n [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n </div>\n </div>\n </div>\n </div>\n <a class=\"carousel-control-prev\" [attr.data-bs-target]=\"'#carouselExampleCaptions'+data?.id\" role=\"button\" data-bs-slide=\"prev\">\n <span class=\"carousel-control-prev-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_left</mat-icon>\n </span>\n <span class=\"sr-only\">Previous</span>\n\n </a>\n <a class=\"carousel-control-next\" [attr.data-bs-target]=\"'#carouselExampleCaptions'+data?.id\" role=\"button\" data-bs-slide=\"next\">\n <span class=\"carousel-control-next-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_right</mat-icon>\n </span>\n <span class=\"sr-only\">Next</span>\n\n </a>\n </div>\n </div>\n </div>\n\n </div>\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.full-width-image{width:100%;height:70vh}.previous-icon{background:#fff;border-radius:50%}.not-full-width{width:60%}.icon{color:#000!important;font-size:40px!important}.image-height-content{height:70vh}.image-height-screen{height:calc(90vh + -0px);min-height:0px!important}.image-screen{height:calc(110vh + -0px);min-height:0px!important}.img-screen-notext{height:calc(90vh + -0px);min-height:0px!important}.btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.blur{filter:blur(5px)}@media only screen and (max-width: 475px){.previous-icon{width:100%;height:45px!important}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}.caratlane-indicator{display:flex;align-items:center;justify-content:center;background:#1e1f21b3;border-radius:18px;min-width:50px;height:32px;padding:0 16px;font-size:1rem;font-weight:600;color:#fff;margin:18px auto 0;box-shadow:0 2px 8px #151d481a;letter-spacing:1px}.caratlane-indicator .current{font-weight:700;font-size:1rem;color:#fff}.caratlane-indicator .divider,.caratlane-indicator .total{font-weight:500;color:#fff;opacity:.9;margin-left:2px}.caratlane-indicator{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#0009;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;z-index:10;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-width:45px;text-align:center}@media (max-width: 768px){.caratlane-indicator{bottom:15px;padding:6px 12px;font-size:12px}}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
5741
5754
|
//directive
|
|
5742
5755
|
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: SpacingDirective, selector: "[simpoSpacing]", inputs: ["simpoSpacing"] }] }); }
|
|
5743
5756
|
}
|
|
@@ -5763,7 +5776,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
5763
5776
|
ImageEditorDirective,
|
|
5764
5777
|
SpacingAroundDirective,
|
|
5765
5778
|
SpacingDirective,
|
|
5766
|
-
], template: "<section class=\"container-fluid\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\n <div *ngFor=\"let text of data?.content?.inputText\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\"\n [ngClass]=\"{'px-0
|
|
5779
|
+
], template: "<section class=\"container-fluid\" [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\n <div *ngFor=\"let text of data?.content?.inputText\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\"\n [ngClass]=\"{'px-0': style?.fullWidth, 'image-screen': style?.layout?.fit === 'screen' && style?.fullWidth, 'img-screen-notext': style?.layout?.fit === 'screen' && style?.fullWidth && text.value === ''}\"\n [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [simpoBorder]=\"style?.border\" [simpoSpacing]=\"spacingLayout\">\n <div class=\"row mlr-0 w-100\" *ngIf=\"data?.content?.inputText?.length\" [id]=\"data?.id\"\n [simpoAnimation]=\"style?.animation\">\n <div *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" *ngIf=\"edit || text.value\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n\n <div [id]=\"'carouselExampleCaptions'+data?.id\" class=\"carousel slide\" [simpoLayout]=\"style?.layout\"\n [ngClass]=\"{'mb-0 px-0 py-0': style?.fullWidth, 'mb-md-1 mb-sm-0 mb-lg-1': !style?.fullWidth}\">\n <div class=\"carousel-inner\" data-bs-ride=\"carousel\">\n <!-- data-bs-ride=\"carousel\" -->\n <div class=\"carousel-item\" *ngFor=\"let img of content?.listItem?.data; let i = index\"\n [class.active]=\"i === 0\">\n <div class=\"row m-0\">\n <div class=\"col d-flex p-0\" *ngIf=\"screenWidth >= 475\">\n <!-- <img loading=\"lazy\" class=\"d-block position-relative\" style=\"width: 20%; left: -20px\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n <img loading=\"lazy\"\n [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n class=\"d-block position-relative blur\"\n style=\"object-fit: cover !important;width: 100%;max-width: 20%; left: -20px\"\n [src]=\"getPrevImage(i)?.url\" [alt]=\"getPrevImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n [id]=\"data?.id\" [simpoObjectPosition]=\"getPrevImage(i)?.position\" loading=\"lazy\"\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n <img loading=\"lazy\"\n [ngClass]=\"{'full-width-image': style?.fullWidth, 'not-full-width': !style?.fullWidth, 'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n [simpoImageDirective]=\"style?.image\" class=\"d-block image-height-80vh\"\n [class]=\"data?.id+img.image.id\" [src]=\"img.image.url\" [alt]=\"img.image.altText\"\n [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n <!-- <img loading=\"lazy\" class=\"d-block position-relative\" style=\"width: 20%; right: -20px;\" [src]=\"img.image.url\" [alt]=\"img.image.altText\" [simpoCorner]=\"style?.corners\" [id]=\"data?.id\" [simpoObjectPosition]=\"img?.image?.position\"> -->\n <img loading=\"lazy\"\n [ngClass]=\"{'image-height-content': style?.layout?.fit === 'content', 'image-height-screen': style?.layout?.fit === 'screen'}\"\n *ngIf=\"!style?.fullWidth\" [simpoImageDirective]=\"style?.image\"\n class=\"d-block position-relative blur\"\n style=\"object-fit: cover !important;width: 100%; max-width: 20%;right: -20px;\"\n [src]=\"getNextImage(i)?.url\" [alt]=\"getNextImage(i)?.altText\" [simpoCorner]=\"style?.corners\"\n [id]=\"data?.id\" [simpoObjectPosition]=\"getNextImage(i)?.position\" loading=\"lazy\"\n [appImageEditor]=\"edit || false\" [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"col d-flex p-0\" *ngIf=\"screenWidth < 475\">\n <img loading=\"lazy\" class=\"d-block w-100 image-height-40vh\" [class]=\"data?.id+img.image.id\"\n [src]=\"img.image.url\" [alt]=\"img.image.altText\" [id]=\"data?.id\"\n [simpoObjectPosition]=\"img?.image?.position\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\n [imageData]=\"img?.image\" [sectionId]=\"data?.id\">\n </div>\n </div>\n </div>\n </div>\n <a class=\"carousel-control-prev\" [attr.data-bs-target]=\"'#carouselExampleCaptions'+data?.id\" role=\"button\" data-bs-slide=\"prev\">\n <span class=\"carousel-control-prev-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_left</mat-icon>\n </span>\n <span class=\"sr-only\">Previous</span>\n\n </a>\n <a class=\"carousel-control-next\" [attr.data-bs-target]=\"'#carouselExampleCaptions'+data?.id\" role=\"button\" data-bs-slide=\"next\">\n <span class=\"carousel-control-next-icon previous-icon d-flex align-items-center justify-content-center\" aria-hidden=\"true\">\n <mat-icon class=\"icon d-flex align-items-center justify-content-center\">keyboard_arrow_right</mat-icon>\n </span>\n <span class=\"sr-only\">Next</span>\n\n </a>\n </div>\n </div>\n </div>\n\n </div>\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>\n", styles: [".mb-1{margin-bottom:1.5rem!important}.previous-icon{width:65px;height:65px}.image-height-40vh{height:40vh}.full-width-image{width:100%;height:70vh}.previous-icon{background:#fff;border-radius:50%}.not-full-width{width:60%}.icon{color:#000!important;font-size:40px!important}.image-height-content{height:70vh}.image-height-screen{height:calc(90vh + -0px);min-height:0px!important}.image-screen{height:calc(110vh + -0px);min-height:0px!important}.img-screen-notext{height:calc(90vh + -0px);min-height:0px!important}.btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.blur{filter:blur(5px)}@media only screen and (max-width: 475px){.previous-icon{width:100%;height:45px!important}.image-height-40vh{padding:0}}.mlr-0{margin-left:0;margin-right:0}li{list-style:none}.caratlane-indicator{display:flex;align-items:center;justify-content:center;background:#1e1f21b3;border-radius:18px;min-width:50px;height:32px;padding:0 16px;font-size:1rem;font-weight:600;color:#fff;margin:18px auto 0;box-shadow:0 2px 8px #151d481a;letter-spacing:1px}.caratlane-indicator .current{font-weight:700;font-size:1rem;color:#fff}.caratlane-indicator .divider,.caratlane-indicator .total{font-weight:500;color:#fff;opacity:.9;margin-left:2px}.caratlane-indicator{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:#0009;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;z-index:10;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);min-width:45px;text-align:center}@media (max-width: 768px){.caratlane-indicator{bottom:15px;padding:6px 12px;font-size:12px}}\n"] }]
|
|
5767
5780
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
5768
5781
|
type: Input
|
|
5769
5782
|
}], index: [{
|
|
@@ -6004,12 +6017,14 @@ class ServiceSectionComponent extends BaseSection {
|
|
|
6004
6017
|
this._eventService = _eventService;
|
|
6005
6018
|
this._mainContainer = null;
|
|
6006
6019
|
this.TextPosition = TextPosition;
|
|
6020
|
+
this.screenWidth = "";
|
|
6007
6021
|
}
|
|
6008
6022
|
ngOnInit() {
|
|
6009
6023
|
this.content = this.data?.content;
|
|
6010
6024
|
this.style = this.data?.styles;
|
|
6011
6025
|
this.button = this.data?.action.buttons[0];
|
|
6012
6026
|
this.deleteSelected = this.delete;
|
|
6027
|
+
this.getScreenSize();
|
|
6013
6028
|
}
|
|
6014
6029
|
get headingSpace() {
|
|
6015
6030
|
return this.style?.layout.headingSpacing;
|
|
@@ -6017,6 +6032,17 @@ class ServiceSectionComponent extends BaseSection {
|
|
|
6017
6032
|
get stylesLayout() {
|
|
6018
6033
|
return { ...this.style?.layout };
|
|
6019
6034
|
}
|
|
6035
|
+
get point() {
|
|
6036
|
+
return { ...this.content?.tag?.position };
|
|
6037
|
+
}
|
|
6038
|
+
onDragEnded(event) {
|
|
6039
|
+
const transform = event.source.getFreeDragPosition();
|
|
6040
|
+
this.content.tag.position.x = transform.x ?? 0;
|
|
6041
|
+
this.content.tag.position.y = transform.y ?? 0;
|
|
6042
|
+
}
|
|
6043
|
+
getScreenSize() {
|
|
6044
|
+
this.screenWidth = window.innerWidth;
|
|
6045
|
+
}
|
|
6020
6046
|
editSection() {
|
|
6021
6047
|
if (window.innerWidth <= 475)
|
|
6022
6048
|
return;
|
|
@@ -6026,7 +6052,7 @@ class ServiceSectionComponent extends BaseSection {
|
|
|
6026
6052
|
}, 100);
|
|
6027
6053
|
}
|
|
6028
6054
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ServiceSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6029
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div [spacingAround]=\"stylesLayout\">\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n [simpoLayout]=\"style?.layout\">\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\n <div [simpoContentTitleSpace]=\"headingSpace\"\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n *ngFor=\"let service of content?.listItem?.data\">\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\n </ng-container>\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\n </ng-container>\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\n [simpoContainerAlignment]=\"stylesLayout\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}.button-display{display:flex;flex-wrap:wrap;gap:10px}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}@media screen and (max-width: 475px){.cards{padding:5px 8px 10px!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { 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: "directive", type:
|
|
6055
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div [spacingAround]=\"stylesLayout\">\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\">\n {{ content?.tag?.label }}\n </div>\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n [simpoLayout]=\"style?.layout\">\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\n <div [simpoContentTitleSpace]=\"headingSpace\"\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"row w-100 justify-content-center\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n *ngFor=\"let service of content?.listItem?.data\">\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\n </ng-container>\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\n </ng-container>\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\n [simpoContainerAlignment]=\"stylesLayout\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}@media screen and (max-width: 475px){.cards{padding:5px 8px 10px!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { 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: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type:
|
|
6030
6056
|
//directive
|
|
6031
6057
|
ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }] }); }
|
|
6032
6058
|
}
|
|
@@ -6038,6 +6064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6038
6064
|
ContentFitDirective,
|
|
6039
6065
|
TextEditorComponent,
|
|
6040
6066
|
SimpoComponentModule,
|
|
6067
|
+
CdkDrag,
|
|
6041
6068
|
//directive
|
|
6042
6069
|
ContentTitleDirective,
|
|
6043
6070
|
AnimationDirective,
|
|
@@ -6060,7 +6087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6060
6087
|
SpacingHorizontalDirective,
|
|
6061
6088
|
SpacingAroundDirective,
|
|
6062
6089
|
SimpoContainerAligment
|
|
6063
|
-
], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div [spacingAround]=\"stylesLayout\">\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n [simpoLayout]=\"style?.layout\">\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\n <div [simpoContentTitleSpace]=\"headingSpace\"\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n *ngFor=\"let service of content?.listItem?.data\">\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\n </ng-container>\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\n </ng-container>\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\n [simpoContainerAlignment]=\"stylesLayout\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}.button-display{display:flex;flex-wrap:wrap;gap:10px}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}@media screen and (max-width: 475px){.cards{padding:5px 8px 10px!important}}\n"] }]
|
|
6090
|
+
], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\n [attr.style]=\"customClass\">\n <div [spacingAround]=\"stylesLayout\">\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\">\n {{ content?.tag?.label }}\n </div>\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\n [simpoLayout]=\"style?.layout\">\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\n <div [simpoContentTitleSpace]=\"headingSpace\"\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <div class=\"row w-100 justify-content-center\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\n *ngFor=\"let service of content?.listItem?.data\">\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\n </ng-container>\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\n </ng-container>\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\n </ng-container>\n </div>\n </div>\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\n [simpoContainerAlignment]=\"stylesLayout\">\n <div *ngFor=\"let button of data?.action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}@media screen and (max-width: 475px){.cards{padding:5px 8px 10px!important}}\n"] }]
|
|
6064
6091
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
6065
6092
|
type: Input
|
|
6066
6093
|
}], index: [{
|
|
@@ -6076,6 +6103,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6076
6103
|
}], _mainContainer: [{
|
|
6077
6104
|
type: ViewChild,
|
|
6078
6105
|
args: ['mainContainer']
|
|
6106
|
+
}], getScreenSize: [{
|
|
6107
|
+
type: HostListener,
|
|
6108
|
+
args: ["window: resize", ["$event"]]
|
|
6079
6109
|
}] } });
|
|
6080
6110
|
|
|
6081
6111
|
class TeamMemberSectionComponent extends BaseSection {
|
|
@@ -6153,30 +6183,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6153
6183
|
}] } });
|
|
6154
6184
|
|
|
6155
6185
|
class TestimonialSectionComponent extends BaseSection {
|
|
6156
|
-
constructor(_eventService) {
|
|
6186
|
+
constructor(_eventService, renderer) {
|
|
6157
6187
|
super();
|
|
6158
6188
|
this._eventService = _eventService;
|
|
6189
|
+
this.renderer = renderer;
|
|
6159
6190
|
this._mainContainer = null;
|
|
6191
|
+
this.screenWidth = "";
|
|
6192
|
+
this.resizeTimeout = 0;
|
|
6193
|
+
// Optional: bind to template if you prefer [style.height.px]="carouselHeight"
|
|
6194
|
+
this.carouselHeightPx = null;
|
|
6160
6195
|
}
|
|
6161
6196
|
ngOnInit() {
|
|
6162
6197
|
this.content = this.data?.content;
|
|
6163
6198
|
this.style = this.data?.styles;
|
|
6164
6199
|
this.deleteSelected = this.delete;
|
|
6200
|
+
this.getScreenSize();
|
|
6165
6201
|
}
|
|
6166
6202
|
ngAfterViewInit() {
|
|
6167
|
-
setTimeout(() =>
|
|
6168
|
-
|
|
6169
|
-
|
|
6170
|
-
items
|
|
6171
|
-
|
|
6172
|
-
|
|
6173
|
-
maxHeight = height;
|
|
6174
|
-
}
|
|
6175
|
-
});
|
|
6176
|
-
items.forEach((item) => {
|
|
6177
|
-
item.style.minHeight = `${maxHeight}px`;
|
|
6178
|
-
});
|
|
6179
|
-
}, 0);
|
|
6203
|
+
setTimeout(() => this.updateCarouselHeight(), 50);
|
|
6204
|
+
// If the content list can change dynamically, subscribe to QueryList changes
|
|
6205
|
+
this.carouselItems.changes.subscribe(() => {
|
|
6206
|
+
// re-calc once carousel items list changes
|
|
6207
|
+
setTimeout(() => this.updateCarouselHeight(), 50);
|
|
6208
|
+
});
|
|
6180
6209
|
}
|
|
6181
6210
|
get headingSpace() {
|
|
6182
6211
|
return this.style?.layout.headingSpacing;
|
|
@@ -6187,6 +6216,23 @@ class TestimonialSectionComponent extends BaseSection {
|
|
|
6187
6216
|
get stylesLayout() {
|
|
6188
6217
|
return { ...this.style?.layout };
|
|
6189
6218
|
}
|
|
6219
|
+
getColor(hex, amount = 0.8) {
|
|
6220
|
+
hex = hex.replace(/^#/, '');
|
|
6221
|
+
let r = parseInt(hex.substring(0, 2), 16);
|
|
6222
|
+
let g = parseInt(hex.substring(2, 4), 16);
|
|
6223
|
+
let b = parseInt(hex.substring(4, 6), 16);
|
|
6224
|
+
r = Math.round(r + (255 - r) * amount);
|
|
6225
|
+
g = Math.round(g + (255 - g) * amount);
|
|
6226
|
+
b = Math.round(b + (255 - b) * amount);
|
|
6227
|
+
const toHex = (n) => n.toString(16).padStart(2, '0');
|
|
6228
|
+
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
|
|
6229
|
+
}
|
|
6230
|
+
getScreenSize() {
|
|
6231
|
+
this.screenWidth = window.innerWidth;
|
|
6232
|
+
}
|
|
6233
|
+
getLength() {
|
|
6234
|
+
return this.content?.listItem?.data?.length ?? 0;
|
|
6235
|
+
}
|
|
6190
6236
|
editSection() {
|
|
6191
6237
|
if (window.innerWidth <= 475)
|
|
6192
6238
|
return;
|
|
@@ -6195,10 +6241,67 @@ class TestimonialSectionComponent extends BaseSection {
|
|
|
6195
6241
|
this._eventService.editSection.emit({ data: this.data });
|
|
6196
6242
|
}, 100);
|
|
6197
6243
|
}
|
|
6198
|
-
|
|
6199
|
-
|
|
6244
|
+
onWindowResize() {
|
|
6245
|
+
// debounce
|
|
6246
|
+
if (this.resizeTimeout) {
|
|
6247
|
+
clearTimeout(this.resizeTimeout);
|
|
6248
|
+
}
|
|
6249
|
+
this.resizeTimeout = setTimeout(() => this.updateCarouselHeight(), 120);
|
|
6250
|
+
}
|
|
6251
|
+
updateCarouselHeight() {
|
|
6252
|
+
if (!this.carouselItems || this.carouselItems.length === 0)
|
|
6253
|
+
return;
|
|
6254
|
+
const items = this.carouselItems.toArray().map(q => q.nativeElement);
|
|
6255
|
+
// Wait for all images inside items to load
|
|
6256
|
+
const imagePromises = [];
|
|
6257
|
+
items.forEach(item => {
|
|
6258
|
+
const imgs = Array.from(item.querySelectorAll('img'));
|
|
6259
|
+
imgs.forEach(img => {
|
|
6260
|
+
if (img.complete) {
|
|
6261
|
+
// already loaded
|
|
6262
|
+
return;
|
|
6263
|
+
}
|
|
6264
|
+
imagePromises.push(new Promise(resolve => {
|
|
6265
|
+
img.addEventListener('load', () => resolve());
|
|
6266
|
+
img.addEventListener('error', () => resolve()); // resolve anyway
|
|
6267
|
+
}));
|
|
6268
|
+
});
|
|
6269
|
+
});
|
|
6270
|
+
Promise.all(imagePromises).then(() => {
|
|
6271
|
+
// give layout a tiny time to settle
|
|
6272
|
+
setTimeout(() => {
|
|
6273
|
+
let maxH = 0;
|
|
6274
|
+
items.forEach(item => {
|
|
6275
|
+
// use offsetHeight to include padding/border
|
|
6276
|
+
const h = item.offsetHeight;
|
|
6277
|
+
if (h > maxH)
|
|
6278
|
+
maxH = h;
|
|
6279
|
+
});
|
|
6280
|
+
// safety: small minimum
|
|
6281
|
+
if (maxH < 100)
|
|
6282
|
+
maxH = 100;
|
|
6283
|
+
// set height on carousel-inner (or use binding to carouselHeightPx)
|
|
6284
|
+
this.carouselHeightPx = maxH;
|
|
6285
|
+
if (this.carouselInner && this.carouselInner.nativeElement) {
|
|
6286
|
+
this.renderer.setStyle(this.carouselInner.nativeElement, 'height', `${maxH}px`);
|
|
6287
|
+
// optional: set min-height on each item too so content doesn't jump mid-transition
|
|
6288
|
+
items.forEach(it => this.renderer.setStyle(it, 'min-height', `${maxH}px`));
|
|
6289
|
+
}
|
|
6290
|
+
}, 50);
|
|
6291
|
+
});
|
|
6292
|
+
}
|
|
6293
|
+
ngOnDestroy() {
|
|
6294
|
+
if (this.contentChangesSub) {
|
|
6295
|
+
this.contentChangesSub.unsubscribe();
|
|
6296
|
+
}
|
|
6297
|
+
if (this.resizeTimeout) {
|
|
6298
|
+
clearTimeout(this.resizeTimeout);
|
|
6299
|
+
}
|
|
6300
|
+
}
|
|
6301
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestimonialSectionComponent, deps: [{ token: EventsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6302
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }, { propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [class.px-1]=\"screenWidth < 475\">\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n <div *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\">\n <ol class=\"carousel-indicators\">\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\n </ol>\n <div class=\"carousel-inner\" #carouselInner>\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\n [class.active]=\"i === 0\" data-bs-interval=\"10000\" #carouselItem>\n <div style=\"width: max-content; margin: auto; max-width: 90%;\" class=\"carousel-parent\"\n [class.card-form]=\"content?.display?.showCard\" [simpoCorner]=\"style?.corners\"\n [style.borderColor]=\"content?.display?.showCard ? style?.background?.accentColor : 'none'\"\n [style.background]=\"content?.display?.showCard ? getColor(style?.background?.accentColor) : 'transparent'\">\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\n <ng-container *ngIf=\"content?.display?.showImage\">\n <img loading=\"lazy\" [src]=\"testimonial?.image?.url\" class=\"mb-1\" loading=\"lazy\"\n [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\"\n [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\n </ng-container>\n <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\n <div class=\"d-flex\">\n <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\n data-bs-slide=\"prev\" *ngIf=\"getLength() > 1\">\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\n <span class=\"sr-only\">Previous</span>\n </a>\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\n data-bs-slide=\"next\" *ngIf=\"getLength() > 1\">\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\n <span class=\"sr-only\">Next</span>\n </a>\n </div>\n\n\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")}.carousel-item{height:100%;transition:transform .6s ease-in-out,opacity .6s ease-in-out}.previous-icon{position:absolute;height:45px}.card-form{border-width:2px;border-style:solid;padding:16px}.carousel-inner{overflow:visible!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.carousel-parent,.carousel-caption{width:100%!important}}li{list-style:none}.heading-medium{font-weight:400!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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: "directive", type:
|
|
6200
6303
|
//directive
|
|
6201
|
-
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContainerFitDirective, selector: "[simpoContainerLayout]", inputs: ["simpoContainerLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
6304
|
+
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContainerFitDirective, selector: "[simpoContainerLayout]", inputs: ["simpoContainerLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
|
6202
6305
|
}
|
|
6203
6306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestimonialSectionComponent, decorators: [{
|
|
6204
6307
|
type: Component,
|
|
@@ -6230,9 +6333,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6230
6333
|
SanitizeHtmlPipe,
|
|
6231
6334
|
TextEditorComponent,
|
|
6232
6335
|
ImageEditorDirective,
|
|
6233
|
-
SpacingHorizontalDirective
|
|
6234
|
-
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover
|
|
6235
|
-
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
6336
|
+
SpacingHorizontalDirective,
|
|
6337
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [class.px-1]=\"screenWidth < 475\">\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\n <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\n <div *ngFor=\"let text of data?.content?.inputText\">\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\">\n <ol class=\"carousel-indicators\">\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\n data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\n </ol>\n <div class=\"carousel-inner\" #carouselInner>\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\n [class.active]=\"i === 0\" data-bs-interval=\"10000\" #carouselItem>\n <div style=\"width: max-content; margin: auto; max-width: 90%;\" class=\"carousel-parent\"\n [class.card-form]=\"content?.display?.showCard\" [simpoCorner]=\"style?.corners\"\n [style.borderColor]=\"content?.display?.showCard ? style?.background?.accentColor : 'none'\"\n [style.background]=\"content?.display?.showCard ? getColor(style?.background?.accentColor) : 'transparent'\">\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\n <ng-container *ngIf=\"content?.display?.showImage\">\n <img loading=\"lazy\" [src]=\"testimonial?.image?.url\" class=\"mb-1\" loading=\"lazy\"\n [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\"\n [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\n </ng-container>\n <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\n <div class=\"d-flex\">\n <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\n data-bs-slide=\"prev\" *ngIf=\"getLength() > 1\">\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\n <span class=\"sr-only\">Previous</span>\n </a>\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\n data-bs-slide=\"next\" *ngIf=\"getLength() > 1\">\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\n <span class=\"sr-only\">Next</span>\n </a>\n </div>\n\n\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"style?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</section>", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")}.carousel-item{height:100%;transition:transform .6s ease-in-out,opacity .6s ease-in-out}.previous-icon{position:absolute;height:45px}.card-form{border-width:2px;border-style:solid;padding:16px}.carousel-inner{overflow:visible!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.carousel-parent,.carousel-caption{width:100%!important}}li{list-style:none}.heading-medium{font-weight:400!important}\n"] }]
|
|
6338
|
+
}], ctorParameters: () => [{ type: EventsService }, { type: i0.Renderer2 }], propDecorators: { data: [{
|
|
6236
6339
|
type: Input
|
|
6237
6340
|
}], index: [{
|
|
6238
6341
|
type: Input
|
|
@@ -6247,6 +6350,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
6247
6350
|
}], _mainContainer: [{
|
|
6248
6351
|
type: ViewChild,
|
|
6249
6352
|
args: ['mainContainer']
|
|
6353
|
+
}], carouselInner: [{
|
|
6354
|
+
type: ViewChild,
|
|
6355
|
+
args: ['carouselInner', { static: false }]
|
|
6356
|
+
}], carouselItems: [{
|
|
6357
|
+
type: ViewChildren,
|
|
6358
|
+
args: ['carouselItem']
|
|
6359
|
+
}], getScreenSize: [{
|
|
6360
|
+
type: HostListener,
|
|
6361
|
+
args: ["window: resize", ["$event"]]
|
|
6362
|
+
}], onWindowResize: [{
|
|
6363
|
+
type: HostListener,
|
|
6364
|
+
args: ['window:resize']
|
|
6250
6365
|
}] } });
|
|
6251
6366
|
|
|
6252
6367
|
class TextImageSectionComponent extends BaseSection {
|
|
@@ -9726,9 +9841,9 @@ class ContactUsComponent extends BaseSection {
|
|
|
9726
9841
|
return this.styles?.layout?.align === 'left' ? 'justify-content-start' : this.styles?.layout?.align === 'right' ? 'justify-content-end' : 'justify-content-center';
|
|
9727
9842
|
}
|
|
9728
9843
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContactUsComponent, deps: [{ token: EventsService }, { token: PLATFORM_ID }, { token: i2$1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9729
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "screenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"main-container\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [attr.style]=\"customClass\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div *ngIf=\"content?.image?.showImage === false\" class=\"col-xxl-8 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5 my-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly mt-3\" [class.gap-3]=\"screenWidth > 475\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 content-side\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap \" style=\"gap: 1rem;height: fit-content;\" [ngStyle]=\"getCardStyle()\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\"\r\n [bgColor]=\"styles?.contentBackground?.display ? styles?.contentBackground?.style == 'black' ? '#000000' : '#ffffff' : styles?.background?.color\"\r\n [sectionId]=\"data?.id\" *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"custom-btn d-flex w-100\" [simpoContainerAlignment]=\"stylesLayout\" [class]=\"getAlignment()\">\r\n <button class=\"send-btn\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\"\r\n (click)=\"buttonClick()\">{{button?.content?.label}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"gap-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\" [appImageEditor]=\"edit || false\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\"
|
|
9844
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ContactUsComponent, isStandalone: true, selector: "simpo-contact-us", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window:resize": "screenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"main-container\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [attr.style]=\"customClass\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div *ngIf=\"content?.image?.showImage === false\" class=\"col-xxl-8 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5 my-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly mt-3\" [class.gap-3]=\"screenWidth > 475\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 content-side\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap \" style=\"gap: 1rem;height: fit-content;\" [ngStyle]=\"getCardStyle()\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\"\r\n [bgColor]=\"styles?.contentBackground?.display ? styles?.contentBackground?.style == 'black' ? '#000000' : '#ffffff' : styles?.background?.color\"\r\n [sectionId]=\"data?.id\" *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"custom-btn d-flex w-100\" [simpoContainerAlignment]=\"stylesLayout\" [class]=\"getAlignment()\">\r\n <button class=\"send-btn\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\"\r\n (click)=\"buttonClick()\">{{button?.content?.label}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"gap-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\" [appImageEditor]=\"edit || false\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [simpoImageDirective]=\"styles?.image\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\"\r\n [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\" [ngStyle]=\"getCardStyle()\">\r\n <div class=\"d-flex flex-column content-side\">\r\n <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-start align-items-end\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n </ng-container>\r\n </div>\r\n <div class=\"custom-btn d-flex\" [simpoContainerAlignment]=\"stylesLayout\">\r\n <button class=\"send-btn p-2 gap-2\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\"\r\n [class.flex-row-reverse]=\"button?.content?.icon?.iconPosition === 'left'\" (click)=\"buttonClick()\">\r\n <div>{{button?.content?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.textColor,\r\n 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".send-btn{font-size:16px!important;font-weight:600;padding:.5rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;margin-top:1rem}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}.custom-btn{width:30%;white-space:nowrap}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column}.custom-btn{width:50%;white-space:nowrap}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}.gap-3{gap:3rem!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: InputFieldsComponent, selector: "simpo-input-fields", inputs: ["feild", "opacity", "bgColor", "sectionId"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type:
|
|
9730
9845
|
//directive
|
|
9731
|
-
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }] }); }
|
|
9846
|
+
AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "ngmodule", type: MatSnackBarModule }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }] }); }
|
|
9732
9847
|
}
|
|
9733
9848
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ContactUsComponent, decorators: [{
|
|
9734
9849
|
type: Component,
|
|
@@ -9765,7 +9880,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
9765
9880
|
SimpoContainerAligment,
|
|
9766
9881
|
ButtonEditorDirective,
|
|
9767
9882
|
ImageEditorDirective
|
|
9768
|
-
], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"main-container\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [attr.style]=\"customClass\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div *ngIf=\"content?.image?.showImage === false\" class=\"col-xxl-8 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5 my-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly mt-3\" [class.gap-3]=\"screenWidth > 475\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 content-side\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap \" style=\"gap: 1rem;height: fit-content;\" [ngStyle]=\"getCardStyle()\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\"\r\n [bgColor]=\"styles?.contentBackground?.display ? styles?.contentBackground?.style == 'black' ? '#000000' : '#ffffff' : styles?.background?.color\"\r\n [sectionId]=\"data?.id\" *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"custom-btn d-flex w-100\" [simpoContainerAlignment]=\"stylesLayout\" [class]=\"getAlignment()\">\r\n <button class=\"send-btn\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\"\r\n (click)=\"buttonClick()\">{{button?.content?.label}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"gap-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\" [appImageEditor]=\"edit || false\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\"
|
|
9883
|
+
], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div class=\"spacing-around\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"main-container\" [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" [attr.style]=\"customClass\"\r\n [spacingHorizontal]=\"stylesLayout\">\r\n <div *ngIf=\"content?.image?.showImage === false\" class=\"col-xxl-8 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"row g-5 my-0\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"col-12 d-flex justify-content-evenly mt-3\" [class.gap-3]=\"screenWidth > 475\" [id]=\"data?.id\"\r\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"d-flex flex-column col-5 content-side\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <div *ngFor=\"let item of content?.inputText\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"col-5 d-flex flex-wrap \" style=\"gap: 1rem;height: fit-content;\" [ngStyle]=\"getCardStyle()\"\r\n [class.col-lg-8]=\"!content?.image?.showImage && styles?.positionLayout?.value === 'top'\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\"\r\n [bgColor]=\"styles?.contentBackground?.display ? styles?.contentBackground?.style == 'black' ? '#000000' : '#ffffff' : styles?.background?.color\"\r\n [sectionId]=\"data?.id\" *ngIf=\"canShowContactField(feild)\"></simpo-input-fields>\r\n </ng-container>\r\n <div class=\"custom-btn d-flex w-100\" [simpoContainerAlignment]=\"stylesLayout\" [class]=\"getAlignment()\">\r\n <button class=\"send-btn\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\"\r\n (click)=\"buttonClick()\">{{button?.content?.label}}</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"content?.image?.showImage\" class=\"col-xxl-8 px-4 py-5 w-100\" [id]=\"data?.id\" #mainContainer\r\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\">\r\n <div class=\"gap-5 mobile-display\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'align-items-center text-center': styles?.positionLayout?.value === 'top'}\">\r\n <div class=\"col-10 col-sm-8 col-lg-6 mobile-image\" *ngIf=\"content?.image?.showImage\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [id]=\"data?.id\" [appImageEditor]=\"edit || false\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [simpoImageDirective]=\"styles?.image\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <div class=\"d-flex flex-column mobile-text\" style=\"width: 46%;\"\r\n [ngClass]=\"{'pt-5': styles?.positionLayout?.value === 'top'}\" [id]=\"data?.id\" [ngStyle]=\"getCardStyle()\">\r\n <div class=\"d-flex flex-column content-side\">\r\n <div *ngFor=\"let item of content?.inputText\" [innerHTML]=\"item.value | sanitizeHtml\"\r\n [ngClass]=\"item.label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\"></div>\r\n </div>\r\n <div class=\"d-flex flex-wrap justify-content-start align-items-end\" style=\"gap: 1rem;height: fit-content;\">\r\n <ng-container *ngFor=\"let feild of content?.contactField?.fields\">\r\n <simpo-input-fields [opacity]=\"styles?.inputOpacity\" [style.width.%]=\"getWidthByField(feild)\"\r\n [feild]=\"feild\" [bgColor]=\"styles?.background?.color\" [sectionId]=\"data?.id\"></simpo-input-fields>\r\n </ng-container>\r\n </div>\r\n <div class=\"custom-btn d-flex\" [simpoContainerAlignment]=\"stylesLayout\">\r\n <button class=\"send-btn p-2 gap-2\" [buttonData]=\"button?.content\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"button?.id ?? ''\"\r\n [class.flex-row-reverse]=\"button?.content?.icon?.iconPosition === 'left'\" (click)=\"buttonClick()\">\r\n <div>{{button?.content?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"button?.content?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.textColor,\r\n 'mask-image': 'url(' + button?.content?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".send-btn{font-size:16px!important;font-weight:600;padding:.5rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:max-content!important;margin-top:1rem}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.w-100{width:100%}.custom-btn{width:30%;white-space:nowrap}@media only screen and (max-width: 475px){.col-12{display:flex;flex-direction:column}.custom-btn{width:50%;white-space:nowrap}.pt-5{width:100%}.pt-5 div{font-size:24px}.col-5{width:100%}.send-btn{margin-left:0}.mobile-display{display:flex!important;flex-direction:column!important}.mobile-image{width:100%!important;padding:0!important}.mobile-text{width:100%!important;margin-top:3rem}.mobile-text .d-flex div{font-size:24px}}.gap-3{gap:3rem!important}\n"] }]
|
|
9769
9884
|
}], ctorParameters: () => [{ type: EventsService }, { type: Object, decorators: [{
|
|
9770
9885
|
type: Inject,
|
|
9771
9886
|
args: [PLATFORM_ID]
|
|
@@ -9949,15 +10064,20 @@ class ChooseUsSectionComponent extends BaseSection {
|
|
|
9949
10064
|
constructor(_eventService) {
|
|
9950
10065
|
super();
|
|
9951
10066
|
this._eventService = _eventService;
|
|
10067
|
+
this.screenWidth = "";
|
|
9952
10068
|
}
|
|
9953
10069
|
ngOnInit() {
|
|
9954
10070
|
this.deleteSelected = this.delete;
|
|
9955
10071
|
this.content = this.data?.content;
|
|
9956
10072
|
this.styles = this.data?.styles;
|
|
10073
|
+
this.getScreenSize();
|
|
9957
10074
|
}
|
|
9958
10075
|
get stylesLayout() {
|
|
9959
10076
|
return { ...this.styles?.layout };
|
|
9960
10077
|
}
|
|
10078
|
+
getScreenSize() {
|
|
10079
|
+
this.screenWidth = window.innerWidth;
|
|
10080
|
+
}
|
|
9961
10081
|
editSection() {
|
|
9962
10082
|
if (window.innerWidth <= 475)
|
|
9963
10083
|
return;
|
|
@@ -9967,7 +10087,7 @@ class ChooseUsSectionComponent extends BaseSection {
|
|
|
9967
10087
|
}, 100);
|
|
9968
10088
|
}
|
|
9969
10089
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChooseUsSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9970
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChooseUsSectionComponent, isStandalone: true, selector: "simpo-choose-us-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "
|
|
10090
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ChooseUsSectionComponent, isStandalone: true, selector: "simpo-choose-us-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\n <div class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [simpoBackground]=\"styles?.background\">\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoAnimation]=\"styles?.animation\">\n <div class=\"d-flex flex-column mt-0\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n [class.flex-sm-column]=\"screenWidth < 475\">\n <div class=\"d-flex flex-column gap-15 content-side\" [id]=\"data?.id\"\n [simpoContentAlignment]=\"styles?.contentAlignment\"\n [class.max-width]=\"styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left'\">\n <div *ngFor=\" let item of content?.inputText\">\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large heading' : 'body-large description'\">\n </div> -->\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n\n <div class=\"card-section d-flex\"\n [ngClass]=\"{'position-left': styles?.positionLayout?.value === 'left',\n 'position-right': styles?.positionLayout?.value === 'right', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-end': styles?.layout?.align === 'right'}\"\n [id]=\"data?.id\">\n <div class=\"cards\" *ngFor=\"let cards of content?.listItem?.data\">\n <div class=\"individual-cards\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'box': content?.display?.showCard }\">\n <div class=\"heading-large lh-2 mb-3\">\n <!-- <div [innerHtml]=\"cards.inputText[0].value | sanitizeHtml\"></div> -->\n <simpo-text-editor [(value)]=\"cards.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n\n <div class=\"body-large\">\n <!-- <div [innerHtml]=\"cards.inputText[1].value | sanitizeHtml\"></div> -->\n <simpo-text-editor [(value)]=\"cards.inputText[1].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.individual-cards{color:#000;border-radius:1rem;display:flex;justify-content:center;align-items:center;text-align:center;height:100%}.box{background:#fff}.card-section{gap:22px;margin-top:5rem;flex-wrap:wrap;width:100%;justify-content:space-between!important;margin-top:0}.cards{width:20%}.position-left,.position-right{width:50%;flex-wrap:wrap;margin-top:1rem!important}:is(.position-left,.position-right) .cards{width:43%}.gap-15{gap:15px}@media screen and (min-width: 475px){.max-width{max-width:50%}}.flex-sm-column{flex-direction:column!important}@media only screen and (max-width: 475px){.card-section{flex-direction:column}.cards{width:92%}.position-left,.position-right{width:100%;margin-top:2rem!important}:is(.position-left,.position-right) .cards{width:92%}}.mt-0{margin-top:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { 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: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { 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", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }] }); }
|
|
9971
10091
|
}
|
|
9972
10092
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChooseUsSectionComponent, decorators: [{
|
|
9973
10093
|
type: Component,
|
|
@@ -9988,7 +10108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
9988
10108
|
SpacingHorizontalDirective,
|
|
9989
10109
|
TextEditorComponent,
|
|
9990
10110
|
SpacingAroundDirective
|
|
9991
|
-
], template: "
|
|
10111
|
+
], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\">\n <div class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer [spacingHorizontal]=\"stylesLayout\"\n [simpoOverlay]=\"styles?.background\" [simpoBorder]=\"styles?.border\" [simpoBackground]=\"styles?.background\">\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\" [simpoAnimation]=\"styles?.animation\">\n <div class=\"d-flex flex-column mt-0\" [id]=\"data?.id\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n [class.flex-sm-column]=\"screenWidth < 475\">\n <div class=\"d-flex flex-column gap-15 content-side\" [id]=\"data?.id\"\n [simpoContentAlignment]=\"styles?.contentAlignment\"\n [class.max-width]=\"styles?.positionLayout?.value === 'right' || styles?.positionLayout?.value === 'left'\">\n <div *ngFor=\" let item of content?.inputText\">\n <!-- <div [innerHTML]=\"item.value | sanitizeHtml\" [ngClass]=\"item.label === 'Heading' ? 'heading-large heading' : 'body-large description'\">\n </div> -->\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n\n <div class=\"card-section d-flex\"\n [ngClass]=\"{'position-left': styles?.positionLayout?.value === 'left',\n 'position-right': styles?.positionLayout?.value === 'right', 'justify-content-start': styles?.layout?.align === 'left', 'justify-content-end': styles?.layout?.align === 'right'}\"\n [id]=\"data?.id\">\n <div class=\"cards\" *ngFor=\"let cards of content?.listItem?.data\">\n <div class=\"individual-cards\" [simpoCorner]=\"styles?.corners\"\n [ngClass]=\"{'box': content?.display?.showCard }\">\n <div class=\"heading-large lh-2 mb-3\">\n <!-- <div [innerHtml]=\"cards.inputText[0].value | sanitizeHtml\"></div> -->\n <simpo-text-editor [(value)]=\"cards.inputText[0].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n\n <div class=\"body-large\">\n <!-- <div [innerHtml]=\"cards.inputText[1].value | sanitizeHtml\"></div> -->\n <simpo-text-editor [(value)]=\"cards.inputText[1].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div *ngIf=\"showEditors\" [ngClass]=\"{'hover_effect': edit}\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.individual-cards{color:#000;border-radius:1rem;display:flex;justify-content:center;align-items:center;text-align:center;height:100%}.box{background:#fff}.card-section{gap:22px;margin-top:5rem;flex-wrap:wrap;width:100%;justify-content:space-between!important;margin-top:0}.cards{width:20%}.position-left,.position-right{width:50%;flex-wrap:wrap;margin-top:1rem!important}:is(.position-left,.position-right) .cards{width:43%}.gap-15{gap:15px}@media screen and (min-width: 475px){.max-width{max-width:50%}}.flex-sm-column{flex-direction:column!important}@media only screen and (max-width: 475px){.card-section{flex-direction:column}.cards{width:92%}.position-left,.position-right{width:100%;margin-top:2rem!important}:is(.position-left,.position-right) .cards{width:92%}}.mt-0{margin-top:0}\n"] }]
|
|
9992
10112
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
|
9993
10113
|
type: Input
|
|
9994
10114
|
}], index: [{
|
|
@@ -10001,6 +10121,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
10001
10121
|
type: Input
|
|
10002
10122
|
}], nextComponentColor: [{
|
|
10003
10123
|
type: Input
|
|
10124
|
+
}], getScreenSize: [{
|
|
10125
|
+
type: HostListener,
|
|
10126
|
+
args: ["window: resize", ["$event"]]
|
|
10004
10127
|
}] } });
|
|
10005
10128
|
|
|
10006
10129
|
class PricingS1Component extends BaseSection {
|
|
@@ -14639,7 +14762,7 @@ class HeaderSectionComponent {
|
|
|
14639
14762
|
this.router.navigate(['/login']);
|
|
14640
14763
|
}
|
|
14641
14764
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, deps: [{ token: EventsService }, { token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: RestService }, { token: EventsService }, { token: LOCAL_STORAGE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14642
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n [class.margin-bottom]=\"isHeaderSticky && isMobile && !isEcommerceWebsite\">\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n <ng-container *ngIf=\"style?.headline?.display\">\n <div>\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n </div>\n </ng-container>\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">search</mat-icon>\n </div> -->\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header2Template>\n <div class=\"header1\">\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header3Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header4Template>\n <div class=\"header1\">\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container> </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\n (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n <div class=\"d-flex gap-3\"\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | lowercase | titlecase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <div class=\"d-flex\">\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n <div *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\n <mat-icon>person_outline</mat-icon>\n Login\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn && !isMobile\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"icons\" (click)=\"goToHome()\">\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n <span [simpoColor]=\"simpoColor\">Home</span>\n </div>\n <div class=\"icons\" (click)=\"searchProducts()\">\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n <span [simpoColor]=\"simpoColor\">Shop</span>\n </div>\n <div class=\"icons\" (click)=\"goToWishlist()\">\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\n </div>\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n <span [simpoColor]=\"simpoColor\">Cart</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n </div> -->\n <div class=\"w-75 d-flex align-items-center\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n </div>\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n height=\"30\" version=\"1.1\">\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n </g>\n </svg>\n <div [style.color]=\"accentColor\">Schemes</div>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-center\">\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n Pincode\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n getPincode}}</div>\n\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n </div>\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getCartItemsCount}}</div>\n </div>\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n </div>\n <!-- (mouseleave)=\"showLogin = false\" -->\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n <!-- <div> -->\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n <!-- </div> -->\n </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | uppercase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n <div class=\"offcanvas-header\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\n </div>\n <div class=\"offcanvas-body\">\n <div class=\"pages\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"offcanvas-footer\">\n <div class=\"canvas-button\">\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #ecomProfileTemplate>\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n\n\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\n\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\n {{ele?.categoryName | titlecase}}\n </div>\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"data?.styles?.headline?.color\">\n Collections\n </div>\n </div>\n <!-- (mouseleave)=\"showList = false\" -->\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\n <div class=\"list-header mb-3\">By Price</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\n <div class=\"each-price cursor-pointer\"\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\n {{price | titlecase}}\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4 h-100 overflow-scroll\"\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\n <div class=\"list-header mb-3\">By Style</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\n |\n titlecase}}</div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\n <div class=\"list-header mb-3\">By Metal & Stone</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\n <div class=\"d-flex gap-2 align-items-center\">\n <div style=\"width: 15px;height: 20px;\">\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"each-price cursor-pointer\">{{collection.name\n |\n titlecase}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- (mouseleave)=\"showCollections = false\" -->\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\n <div class=\"collection row col-3 align-items-center\"\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\n <div class=\"col-imag col-4\">\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"col-8 text-overflow\">\n {{collection?.collectionName | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\n (click)=\"applyFilterToList(image, 'collections')\">\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\n <div class=\"text-center p-2 btm-col-name position-absolute\"\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n [spacingHorizontal]=\"stylesLayout\">\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\n </div>\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\n </div>\n </div>\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
|
|
14765
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeaderSectionComponent, isStandalone: true, selector: "simpo-header-section", inputs: { data: "data", nextComponent: "nextComponent", index: "index", customClass: "customClass", edit: "edit" }, host: { listeners: { "window:scroll": "onScroll($event)", "window:resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "childContainer", first: true, predicate: ["childContainer"], descendants: true }], ngImport: i0, template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n [class.margin-bottom]=\"isHeaderSticky && isMobile && !isEcommerceWebsite\">\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n <ng-container *ngIf=\"style?.headline?.display\">\n <div>\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n </div>\n </ng-container>\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">search</mat-icon>\n </div> -->\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header2Template>\n <div class=\"header1\">\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header3Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header4Template>\n <div class=\"header1\">\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container> </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\n (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n <div class=\"d-flex gap-3\"\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | lowercase | titlecase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <div class=\"d-flex\">\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n <div *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\n <mat-icon>person_outline</mat-icon>\n Login\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn && !isMobile\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"icons\" (click)=\"goToHome()\">\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n <span [simpoColor]=\"simpoColor\">Home</span>\n </div>\n <div class=\"icons\" (click)=\"searchProducts()\">\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n <span [simpoColor]=\"simpoColor\">Shop</span>\n </div>\n <div class=\"icons\" (click)=\"goToWishlist()\">\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\n </div>\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n <span [simpoColor]=\"simpoColor\">Cart</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n </div> -->\n <div class=\"w-75 d-flex align-items-center\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n </div>\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n height=\"30\" version=\"1.1\">\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n </g>\n </svg>\n <div [style.color]=\"accentColor\">Schemes</div>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-center\">\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n Pincode\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n getPincode}}</div>\n\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n </div>\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getCartItemsCount}}</div>\n </div>\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n </div>\n <!-- (mouseleave)=\"showLogin = false\" -->\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n <!-- <div> -->\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n <!-- </div> -->\n </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | uppercase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n <div class=\"offcanvas-header\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\n </div>\n <div class=\"offcanvas-body\">\n <div class=\"pages\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"offcanvas-footer\">\n <div class=\"canvas-button\">\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #ecomProfileTemplate>\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n\n\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\n\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\n {{ele?.categoryName | titlecase}}\n </div>\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"data?.styles?.headline?.color\">\n Collections\n </div>\n </div>\n <!-- (mouseleave)=\"showList = false\" -->\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\n <div class=\"list-header mb-3\">By Price</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\n <div class=\"each-price cursor-pointer\"\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\n {{price | titlecase}}\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4 h-100 overflow-scroll\"\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\n <div class=\"list-header mb-3\">By Style</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\n |\n titlecase}}</div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\n <div class=\"list-header mb-3\">By Metal & Stone</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\n <div class=\"d-flex gap-2 align-items-center\">\n <div style=\"width: 15px;height: 20px;\">\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"each-price cursor-pointer\">{{collection.name\n |\n titlecase}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- (mouseleave)=\"showCollections = false\" -->\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\n <div class=\"collection row col-3 align-items-center\"\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\n <div class=\"col-imag col-4\">\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"col-8 text-overflow\">\n {{collection?.collectionName | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\n (click)=\"applyFilterToList(image, 'collections')\">\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\n <div class=\"text-center p-2 btm-col-name position-absolute\"\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n [spacingHorizontal]=\"stylesLayout\">\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\n </div>\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\n </div>\n </div>\n</ng-template>\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NavbarButtonElementComponent, selector: "simpo-navbar-button-element", inputs: ["buttonData", "buttonStyle", "selectedStyle", "bgColor", "sectionId", "accentColor"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SimpoStickyDirective, selector: "[simpoSticky]", inputs: ["simpoSticky", "categoryHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: MovingTextComponent, selector: "simpo-moving-text", inputs: ["data", "edit", "delete", "customClass", "index"] }] }); }
|
|
14643
14766
|
}
|
|
14644
14767
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeaderSectionComponent, decorators: [{
|
|
14645
14768
|
type: Component,
|
|
@@ -14663,7 +14786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
14663
14786
|
SpacingHorizontalDirective,
|
|
14664
14787
|
MovingTextComponent,
|
|
14665
14788
|
ContentFitDirective,
|
|
14666
|
-
], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n [class.margin-bottom]=\"isHeaderSticky && isMobile && !isEcommerceWebsite\">\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n <ng-container *ngIf=\"style?.headline?.display\">\n <div>\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n </div>\n </ng-container>\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">search</mat-icon>\n </div> -->\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header2Template>\n <div class=\"header1\">\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header3Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header4Template>\n <div class=\"header1\">\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container> </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\n (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n <div class=\"d-flex gap-3\"\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | lowercase | titlecase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <div class=\"d-flex\">\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n <div *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\n <mat-icon>person_outline</mat-icon>\n Login\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn && !isMobile\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"icons\" (click)=\"goToHome()\">\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n <span [simpoColor]=\"simpoColor\">Home</span>\n </div>\n <div class=\"icons\" (click)=\"searchProducts()\">\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n <span [simpoColor]=\"simpoColor\">Shop</span>\n </div>\n <div class=\"icons\" (click)=\"goToWishlist()\">\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\n </div>\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n <span [simpoColor]=\"simpoColor\">Cart</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n </div> -->\n <div class=\"w-75 d-flex align-items-center\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n </div>\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"schemeAvailable\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n height=\"30\" version=\"1.1\">\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n </g>\n </svg>\n <div [style.color]=\"accentColor\">Schemes</div>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-center\">\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n Pincode\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n getPincode}}</div>\n\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n </div>\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getCartItemsCount}}</div>\n </div>\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n </div>\n <!-- (mouseleave)=\"showLogin = false\" -->\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n <!-- <div> -->\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n <!-- </div> -->\n </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | uppercase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n <div class=\"offcanvas-header\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\n </div>\n <div class=\"offcanvas-body\">\n <div class=\"pages\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"offcanvas-footer\">\n <div class=\"canvas-button\">\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #ecomProfileTemplate>\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n\n\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\n\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\n {{ele?.categoryName | titlecase}}\n </div>\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"data?.styles?.headline?.color\">\n Collections\n </div>\n </div>\n <!-- (mouseleave)=\"showList = false\" -->\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\n <div class=\"list-header mb-3\">By Price</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\n <div class=\"each-price cursor-pointer\"\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\n {{price | titlecase}}\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4 h-100 overflow-scroll\"\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\n <div class=\"list-header mb-3\">By Style</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\n |\n titlecase}}</div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\n <div class=\"list-header mb-3\">By Metal & Stone</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\n <div class=\"d-flex gap-2 align-items-center\">\n <div style=\"width: 15px;height: 20px;\">\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"each-price cursor-pointer\">{{collection.name\n |\n titlecase}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- (mouseleave)=\"showCollections = false\" -->\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\n <div class=\"collection row col-3 align-items-center\"\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\n <div class=\"col-imag col-4\">\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"col-8 text-overflow\">\n {{collection?.collectionName | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\n (click)=\"applyFilterToList(image, 'collections')\">\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\n <div class=\"text-center p-2 btm-col-name position-absolute\"\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n [spacingHorizontal]=\"stylesLayout\">\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\n </div>\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\n </div>\n </div>\n</ng-template>", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"] }]
|
|
14789
|
+
], template: "<section [id]=\"data?.id\" class=\"total-container w-100\" [class.z-index-10]=\"!isHeaderSticky && isComponentMerged\">\n <div class=\"w-100\" [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [ngClass]=\"{'box-shadow': isEcommerceWebsite}\"\n [class.margin-bottom]=\"isHeaderSticky && isMobile && !isEcommerceWebsite\">\n <div [simpoSticky]=\"isHeaderSticky\" [simpoBackground]=\"backgroundInfo\" class=\"w-100\" #childContainer\n [categoryHeader]=\"isEcommerceWebsite && categoryList?.length > 0 && !isMobile && !showCategoryMobileHeader()\"\n simpoHover [class.bg-transparent]=\"isComponentMerged && scrollValue == 0 && !isMobile\"\n (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n <!-- [class.background-position]=\"isComponentMerged && backgroundInfo?.showImage\" -->\n <ng-container *ngIf=\"style?.headline?.display\">\n <div>\n <simpo-moving-text [edit]=\"false\" [delete]=\"false\" [data]=\"data\"></simpo-moving-text>\n </div>\n </ng-container>\n <div *ngIf=\"style?.styling === 'Header1'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header1Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header2'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header2Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header3'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header3Template\"></ng-container>\n </div>\n <div *ngIf=\"style?.styling === 'Header4'\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"backgroundInfo\"\n [simpoLayout]=\"stylesLayout\" [isHeader]=\"true\" [id]=\"data?.id\">\n <ng-container *ngTemplateOutlet=\"header4Template\"></ng-container>\n </div>\n <!-- <div class=\"input-group mx-2 mb-2 w-98\" *ngIf=\"isMobile && isEcommerceWebsite\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + accentColor}\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : style?.background?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + style?.background?.accentColor + ' 0%' + ',' + style?.background?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">search</mat-icon>\n </div> -->\n <ng-container *ngIf=\"isEcommerceWebsite && !isMobile\">\n <ng-container *ngTemplateOutlet=\"categoriesHeader\"></ng-container>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile && showCategoryMobileHeader()\">\n <ng-container *ngTemplateOutlet=\"mobileCategoryHeader\"></ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngIf=\"isEcommerceWebsite && isMobile\">\n <ng-container *ngTemplateOutlet=\"mobileFooterTemplate\"></ng-container>\n </ng-container>\n</section>\n\n<ng-template #header1Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 95 : ''\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"isMobile\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header2Template>\n <div class=\"header1\">\n <div class=\"d-flex gap-15 align-center\" *ngIf=\"!isMobile\" [style.width.%]=\"isEcommerceWebsite ? 93 : ''\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header3Template>\n <div class=\"header1\">\n <div>\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n </div>\n </div>\n</ng-template>\n\n<ng-template #header4Template>\n <div class=\"header1\">\n <ng-container *ngIf=\"!isMobile\">\n <ng-container *ngTemplateOutlet=\"!isEcommerceWebsite ? buttonsTemplate : null\"></ng-container>\n <ng-container *ngTemplateOutlet=\"isEcommerceWebsite ? ecommerceButtonsTemplate : null\"></ng-container>\n <ng-container *ngIf=\"!isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </ng-container> </ng-container>\n <div class=\"d-flex gap-15 align-center\" data-bs-toggle=\"offcanvas\" data-bs-target=\"#offcanvasRight\"\n aria-controls=\"offcanvasRight\" *ngIf=\"isMobile\">\n <mat-icon [simpoColor]=\"simpoColor\">menu</mat-icon>\n <ng-container *ngIf=\"isEcommerceWebsite\">\n <ng-container *ngTemplateOutlet=\"ecomProfileTemplate\"></ng-container>\n </ng-container>\n </div>\n <div class=\"text-end\">\n <ng-container *ngTemplateOutlet=\"logoSectionTemplate\"></ng-container>\n </div>\n\n </div>\n</ng-template>\n\n<ng-template #logoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer\" *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\"\n (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" [width]=\"content?.logo?.size\" loading=\"lazy\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img loading=\"lazy\" [src]=\"content?.logo?.image?.url\" alt=\"logo\"\n [style.width.%]=\"screenWidth > 475 || (content?.logo?.size || 10) < 50 ? content?.logo?.size : ((content?.logo?.size || 10) - 10)\"\n loading=\"lazy\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #pageLinksTemplate>\n <div class=\"navbar-nav pageLinks\" [ngClass]=\"{'align-items-center' : !isMobile}\">\n <div class=\"d-flex gap-3\"\n [ngClass]=\"{'flex-column': isMobile, 'align-items-center' : !isMobile, 'mobile-page-list': isMobile}\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\" [accentColor]=\"accentColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n </div>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle category-btn\" type=\"button\"\n [simpoColor]=\"simpoColor\" id=\"link\" data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | lowercase | titlecase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n </div>\n\n\n</ng-template>\n\n<ng-template #buttonsTemplate>\n <div class=\"d-flex\">\n <div *ngIf=\"action?.display\" class=\"button-display mt-0\" [ngClass]=\"{'w-100 justify-space-around': isMobile}\">\n <div *ngFor=\"let button of action?.buttons\">\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [sectionId]=\"data?.id\"\n [edit]=\"edit\" [color]=\"data?.styles?.background?.accentColor\" [buttonId]=\"button.id\"\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\n </div>\n <div class=\"static_login_btn d-flex justify-content-between align-items-center cursor-pointer\"\n (click)=\"navigateLogin()\" *ngIf=\"passbookAppStatus && !loggedIn\" [style.borderColor]=\"backgroundInfo?.accentColor\">\n <mat-icon>person_outline</mat-icon>\n Login\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn && !isMobile\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n </div>\n <button class=\"mobileLoginButton\" *ngIf=\"isEcommerceWebsite && isMobile && !loggedIn\"\n [style.border]=\"'1px solid' + accentColor\" [style.color]=\"accentColor\" (click)=\"goToAccount('LOGIN')\">Login</button>\n</ng-template>\n\n<ng-template #mobileFooterTemplate>\n <div class=\"mobile-footer\" [simpoBackground]=\"backgroundInfo\">\n <div class=\"icons\" (click)=\"goToHome()\">\n <mat-icon [simpoColor]=\"simpoColor\">home</mat-icon>\n <span [simpoColor]=\"simpoColor\">Home</span>\n </div>\n <div class=\"icons\" (click)=\"searchProducts()\">\n <mat-icon [simpoColor]=\"simpoColor\">grid_on</mat-icon>\n <span [simpoColor]=\"simpoColor\">Shop</span>\n </div>\n <div class=\"icons\" (click)=\"goToWishlist()\">\n <mat-icon [simpoColor]=\"simpoColor\">favorite_border</mat-icon>\n <span [simpoColor]=\"simpoColor\">Wishlist</span>\n </div>\n <div class=\"icons position-relative\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"simpoColor\">shopping_cart</mat-icon>\n <span [simpoColor]=\"simpoColor\">Cart</span>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\">{{getCartItemsCount}}</div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #ecommerceButtonsTemplate>\n <div class=\"justify-content-between pr-0 d-flex position-relative gap-10 w-100\"\n [style.flexDirection]=\"style?.styling === 'Header2' || style?.styling === 'Header4' ? 'row-reverse' : ''\">\n <!-- <div class=\"search-icon\" (click)=\"showSearchBar = !showSearchBar\">\n <mat-icon [style.color]=\"accentColor\">search</mat-icon>\n </div> -->\n <div class=\"w-75 d-flex align-items-center\">\n <div class=\"input-group w-75 ml-2\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\"\n [style.color]=\"backgroundInfo?.accentColor\">\n <mat-icon class=\"h-100\"\n [ngStyle]=\"{'background' : backgroundInfo.background?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n </div>\n <div class=\"d-flex gap-3 align-items-center py-1 px-3 b-1 stores\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" (click)=\"goToSchemes()\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\" *ngIf=\"passbookAppStatus\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n xmlns:svgjs=\"http://svgjs.dev/svgjs\" id=\"Layer_2\" viewBox=\"0 0 60 60\" data-name=\"Layer 2\" width=\"30\"\n height=\"30\" version=\"1.1\">\n <g width=\"100%\" height=\"100%\" transform=\"matrix(1,0,0,1,0,0)\">\n <path d=\"m14.36 46.66.51-9.86-11.93-7.16-1.94 8.43z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m17.17 38.1s0-.02.02-.03c0 0 0-.02.02-.02.04-.05.1-.08.15-.11.02-.01.03-.03.05-.04l4.66-1.94h-.02s-1.87-1.21-1.87-1.21l-3.18 1.57-1.07.53-.43 8.32 1.58-6.9c.01-.06.05-.12.09-.17z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m19.14 34.08-6.27-4.04c-.19-.12-.28-.34-.23-.56l1.08-4.72-9.96 4.14 11.68 7.01z\"\n [attr.fill]=\"backgroundInfo?.accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m30.93 46.42-.5 9.79 32.57-18.67-1.21-6.4-23.16 11.46z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m16 47.65 13.38 8.58.49-9.86-11.93-7.17z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path\n d=\"m27.85 39.34s0 0-.01 0c0 0 0 0-.01 0-.08.04-.16.06-.24.06-.05 0-.1-.03-.15-.04-.04-.01-.08-.01-.11-.03l-4.16-2.67-4.37 1.82 11.68 7.01 30.4-15.05-10.71-3.88-22.28 12.78z\"\n [attr.fill]=\"accentColor\" fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\"\n stroke-opacity=\"1\" />\n <path d=\"m28.26 36.01-.1 1.93 32.58-18.69-1.22-6.39-30.86 15.28z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m27.61 28.09-11.93-7.16-1.94 8.43 13.36 8.58z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n <path d=\"m58.57 12.15-12.1-4.38-29.97 12.43 11.68 7z\" [attr.fill]=\"backgroundInfo?.accentColor\"\n fill-opacity=\"1\" data-original-color=\"#000000ff\" stroke=\"none\" stroke-opacity=\"1\" />\n </g>\n </svg>\n <div [style.color]=\"accentColor\">Schemes</div>\n </div>\n </div>\n <div class=\"d-flex gap-3 align-items-center\">\n <div class=\"stores d-flex align-items-center gap-2 py-2 px-3\" (click)=\"goToStores()\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" *ngIf=\"storeAvaiable\"\n [style.background]=\"getRGBA(backgroundInfo?.accentColor , 10)\">\n <mat-icon [style.color]=\"backgroundInfo?.accentColor\">store</mat-icon>\n <span [style.color]=\"backgroundInfo?.accentColor\">Stores</span>\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"!getPincode\">Enter\n Pincode\n </div>\n <div class=\"pin-text\" (mouseenter)=\"showPincodeInput = true;;showLogin = false\"\n [style.color]=\"backgroundInfo?.accentColor\" *ngIf=\"getPincode && getPincode.length == 6\">{{\"Delivering to: \" +\n getPincode}}</div>\n\n <!-- (mouseleave)=\"showPincodeInput = false\" -->\n <div class=\"pincode-container p-3\" *ngIf=\"showPincodeInput\" (mouseleave)=\"showPincodeInput = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your PIN Code unlocks\n </div>\n <div class=\"sub-text text-center f-14 pincode-text\">\n Fastest delivery date, Try-at-Home availability,\n Nearest store and In-store design!\n </div>\n <div class=\"input-group mt-2 br-5 d-flex align-items-center justify-content-between px-3\"\n [class.error-border]=\"pinError\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Pincode\" aria-label=\"Pincode\" [(ngModel)]=\"pincode\"\n class=\"w-75 p-0\">\n <div class=\"input-sub-text f-11 w-25 text-end cursor-pointer\" (click)=\"setPincode()\">SUBMIT</div>\n </div>\n <div class=\"text-start mt-2 f-11\" *ngIf=\"pinError\">\n Please enter a valid pincode\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToFav()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">favorite</mat-icon>\n </div>\n <div class=\"d-flex align-items-center position-relative\" style=\"gap: 5px; cursor: pointer;\" (click)=\"goToCart()\">\n <mat-icon [simpoColor]=\"backgroundInfo?.color\">shopping_cart</mat-icon>\n <div class=\"position-absolute cartItemCount\" *ngIf=\"getCartItemsCount\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')' , 'color' : setColor()}\">\n {{getCartItemsCount}}</div>\n </div>\n <div class=\"loginButton\" *ngIf=\"!loggedIn\" (mouseenter)=\"showLogin = true;showPincodeInput = false\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"35\" height=\"27\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path\n d=\"M12.12 12.78C12.05 12.77 11.96 12.77 11.88 12.78C10.12 12.72 8.71997 11.28 8.71997 9.50998C8.71997 7.69998 10.18 6.22998 12 6.22998C13.81 6.22998 15.28 7.69998 15.28 9.50998C15.27 11.28 13.88 12.72 12.12 12.78Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M18.74 19.38C16.96 21.01 14.6 22 12 22C9.40001 22 7.04001 21.01 5.26001 19.38C5.36001 18.44 5.96001 17.52 7.03001 16.8C9.77001 14.98 14.25 14.98 16.97 16.8C18.04 17.52 18.64 18.44 18.74 19.38Z\"\n fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <path\n d=\"M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z\"\n stroke=\"#292D32\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg> <!-- <span class=\"fw-normal fs-6\" [simpoColor]=\"accentColor\">Login</span> -->\n </div>\n <!-- (mouseleave)=\"showLogin = false\" -->\n <div class=\"info-container p-3\" *ngIf=\"showLogin\" (mouseleave)=\"showLogin = false\">\n <div class=\"text text-center mb-2 f-18 fw-bold\">\n Your Account\n </div>\n <div class=\"sub-text text-center f-14\">\n Access account & manage your orders.\n </div>\n <div class=\"btn-container w-100 d-flex justify-content-between mt-3 gap-3\">\n <div (click)=\"goToAccount('SIGNUP')\" class=\"w-50 text-center sign-btn border-0\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"style?.background?.color\">Sign Up</div>\n <div (click)=\"goToAccount('LOGIN')\" class=\"w-50 text-center sign-btn\"\n [style.borderColor]=\"backgroundInfo?.accentColor\" [style.color]=\"backgroundInfo?.accentColor\">Log In</div>\n </div>\n </div>\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n </div>\n <!-- <div> -->\n <!-- <button class=\"button\" (click)=\"goToAccount()\" simpoButtonDirective [id]=\"sectionId+buttonId\" [buttonStyle]=\"buttonStyle\" [color]=\"color\" [appButtonEditor]=\"edit ?? false\" [buttonData]=\"buttonContent\">{{buttonContent?.label}}</button> -->\n <!-- </div> -->\n </div>\n</ng-template>\n\n<ng-template #navbarLinksTemplate>\n <div class=\"navbar-collapse fs-6 position-relative d-flex\" style=\"margin-top: 5px; margin-left: 25px;\"\n [simpoColor]=\"simpoColor\" *ngIf=\"screenWidth > 768\">\n <ng-container *ngFor=\"let item of getNavbarButton\">\n <ng-container *ngIf=\"item.showHeader\">\n <simpo-navbar-button-element [buttonData]=\"item\" [selectedStyle]=\"style?.navigationStyle\"\n [buttonStyle]=\"style?.navbarButtonStyle\" [bgColor]=\"simpoColor\"\n [sectionId]=\"data?.id\"></simpo-navbar-button-element>\n </ng-container>\n </ng-container>\n\n <ng-container *ngFor=\"let link of getDropdownLinks; let idx = index\">\n <ng-container *ngIf=\"content?.ecomlinks?.[link]?.length \">\n <div class=\"position-relative\">\n <button mat-stroked-button class=\"mat-btn dropdown-toggle\" type=\"button\" [simpoColor]=\"simpoColor\" id=\"link\"\n data-bs-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n {{link | uppercase}}\n </button>\n <div class=\"dropdown-menu\" aria-labelledby=\"link\">\n <a class=\"dropdown-item\" *ngFor=\"let menu of getValues(content?.ecomlinks?.[link])\"\n (click)=\"applyFilter(menu, link)\">{{menu}}</a>\n </div>\n </div>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<div class=\"offcanvas offcanvas-end\" tabindex=\"-1\" id=\"offcanvasRight\" aria-labelledby=\"offcanvasRightLabel\"\n [ngClass]=\"{'offcanvas-end' : style?.styling === 'Header1' || style?.styling === 'Header3', 'offcanvas-start': style?.styling === 'Header2' || style?.styling === 'Header4'}\">\n <div class=\"offcanvas-header\">\n <ng-container *ngTemplateOutlet=\"mobileLogoSectionTemplate\"></ng-container>\n <!-- <button type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button> -->\n <mat-icon data-bs-dismiss=\"offcanvas\">close</mat-icon>\n </div>\n <div class=\"offcanvas-body\">\n <div class=\"pages\">\n <ng-container *ngTemplateOutlet=\"pageLinksTemplate\"></ng-container>\n </div>\n </div>\n <div class=\"offcanvas-footer\">\n <div class=\"canvas-button\">\n <ng-container *ngTemplateOutlet=\"buttonsTemplate\"></ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #ecomProfileTemplate>\n <mat-icon class=\"h-100 d-flex align-items-center justify-content-center br-50 fs-16 py-1\"\n (click)=\"showSearchBarMobile = !showSearchBarMobile\"\n [ngStyle]=\"{'background' : backgroundInfo?.accentBackgroundType == 'Solid' ? backgroundInfo?.accentColor : 'linear-gradient(to right,' + backgroundInfo?.accentColor + ' 0%' + ',' + backgroundInfo?.secondaryAccentColor +' 100%' + ')'}\"\n [style.color]=\"backgroundInfo?.color\">search</mat-icon>\n\n\n <input type=\"text\" class=\"form-control mob-form-control\" placeholder=\"Search Product\" aria-label=\"Search Product\"\n *ngIf=\"showSearchBarMobile\" [(ngModel)]=\"searchText\" (ngModelChange)=\"waitBeforeSearch()\"\n [ngStyle]=\"{'border' : '1px solid ' + backgroundInfo?.accentColor}\">\n\n <div class=\"d-flex align-items-center\" style=\"gap: 8px; cursor: pointer;\" (click)=\"goToAccount('PROFILE')\"\n *ngIf=\"loggedIn\">\n <img loading=\"lazy\" [src]=\"userGender | genderIcon\" style=\"height: 27px;\">\n </div>\n</ng-template>\n\n<ng-template #mobileLogoSectionTemplate>\n <div class=\"d-flex gap-3 align-center cursor-pointer h-100\"\n *ngIf=\"!content?.logo?.isImage || !content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <div *ngIf=\"content?.logo?.text?.isIcon && content?.logo?.text?.url\" class=\"h-100\">\n <img loading=\"lazy\" [src]=\"content?.logo?.text?.url\" alt=\"logo\" class=\"h-100\">\n </div>\n <div class=\"heading-small\" *ngIf=\"content?.logo?.text?.isText\" [simpoColor]=\"simpoColor\">\n <b [ngStyle]=\"{'font-family': content?.logo?.text?.fontFamily}\">{{content?.siteName?.value}}</b>\n </div>\n </div>\n <!-- <div class=\"d-flex gap-3 align-items-lg-center cursor-pointer\" *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"goToHome()\"> -->\n <img [src]=\"content?.logo?.image?.url\" alt=\"logo\" class=\"h-100\" loading=\"lazy\"\n *ngIf=\"content?.logo?.isImage && content?.logo?.image?.url\" (click)=\"!edit ? goToHome() : ''\">\n <!-- </div> -->\n</ng-template>\n\n<ng-template #categoriesHeader>\n <div class=\"categories-header d-flex gap-3 py-2 position-relative\" *ngIf=\"categoryList?.length > 0 && !isMobile\"\n [spacingHorizontal]=\"stylesLayout\" [style.background]=\"data?.styles?.headline?.color\">\n <div class=\"category cursor-pointer\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.--border-color]=\"data?.styles?.background?.accentColor\" [simpoColor]=\"data?.styles?.headline?.color\"\n (mouseenter)=\"showList = true;selectedCategory = ele;showCollections = false\">\n {{ele?.categoryName | titlecase}}\n </div>\n <div class=\"category cursor-pointer\" (mouseenter)=\"showCollections = true;showList = false\"\n *ngIf=\"collectionList?.collections?.length > 0\" [style.--border-color]=\"data?.styles?.background?.accentColor\"\n [simpoColor]=\"data?.styles?.headline?.color\">\n Collections\n </div>\n </div>\n <!-- (mouseleave)=\"showList = false\" -->\n <div *ngIf=\"showList\" class=\"list-category\" (mouseleave)=\"showList = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <div class=\"col-4 h-100\" *ngIf=\"selectedCategory?.byPrice\">\n <div class=\"list-header mb-3\">By Price</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let price of Object.keys(selectedCategory?.byPrice)\">\n <div class=\"each-price cursor-pointer\"\n (click)=\"applyFilterToList(selectedCategory?.byPrice[price], 'price')\">\n {{price | titlecase}}\n </div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4 h-100 overflow-scroll\"\n *ngIf=\"selectedCategory?.byStyle && selectedCategory?.byStyle?.length > 0\">\n <div class=\"list-header mb-3\">By Style</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of selectedCategory?.byStyle\">\n <div class=\"each-price cursor-pointer\" (click)=\"applyFilterToList(collection, 'collection')\">{{collection\n |\n titlecase}}</div>\n </ng-container>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"toShowInJewellery\">\n <div class=\"list-header mb-3\">By Metal & Stone</div>\n <div class=\"d-flex flex-column gap-3 list-item\">\n <ng-container *ngFor=\"let collection of byMetalAndStone\">\n <div class=\"d-flex gap-2 align-items-center\">\n <div style=\"width: 15px;height: 20px;\">\n <img [src]=\"collection.imageUrl\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"each-price cursor-pointer\">{{collection.name\n |\n titlecase}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"selectedCategory?.imageUrls?.length > 0\">\n <ng-container *ngFor=\"let image of selectedCategory?.imageUrls | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6\" *ngIf=\"image\">\n <img loading=\"lazy\" [src]=\"image\" class=\"h-100 w-100\" (click)=\"filterByCategory()\">\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <!-- (mouseleave)=\"showCollections = false\" -->\n <div class=\"list-category\" *ngIf=\"showCollections\" (mouseleave)=\"showCollections = false\">\n <div class=\"row w-100 h-100\">\n <div class=\"col-7 row\">\n <ng-container *ngFor=\"let collection of collectionList?.collections\">\n <div class=\"collection row col-3 align-items-center\"\n (click)=\"applyFilterToList(collection?.collectionName, 'collections')\">\n <div class=\"col-imag col-4\">\n <img [src]=\"collection?.imgUrl[0]\" alt=\"\" class=\"w-100\">\n </div>\n <div class=\"col-8 text-overflow\">\n {{collection?.collectionName | titlecase}}\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"col-5 h-100 row\" *ngIf=\"collectionList?.imageUrls\">\n <ng-container *ngFor=\"let image of Object.keys(collectionList?.imageUrls) | slice:0:2; let i = index\">\n <div class=\"image-container h-100 col-6 position-relative\" *ngIf=\"image\"\n (click)=\"applyFilterToList(image, 'collections')\">\n <img loading=\"lazy\" [src]=\"collectionList?.imageUrls[image]\" class=\"h-100 w-100\">\n <div class=\"text-center p-2 btm-col-name position-absolute\"\n [style.background]=\"data?.styles?.background?.accentColor\" [style.color]=\"setColor()\">{{image}}</div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #mobileCategoryHeader>\n <div class=\"categories-header d-flex gap-3 py-2 overflow-auto\" *ngIf=\"categoryList?.length > 0 && isMobile\"\n [spacingHorizontal]=\"stylesLayout\">\n <div class=\"category cursor-pointer d-flex flex-column gap-3\" *ngFor=\"let ele of categoryList;let i = index\"\n [style.color]=\"data?.styles?.background?.accentColor\" (click)=\"selectedCategory = ele; filterByCategory()\">\n <div class=\"cat-img d-flex justify-content-center align-items-center\">\n <img [src]=\"ele?.imageUrls[0]\" alt=\"\" class=\"h-10 br-12\">\n </div>\n <div class=\"text-center f-14\">{{ele?.categoryName | titlecase}}</div>\n </div>\n </div>\n</ng-template>\n", styles: [".header--scrolled{position:fixed!important;top:10px;left:50%;transform:translate(-50%);width:80%!important;border-radius:50px;box-shadow:0 3px 10px #00000026;z-index:1000001;transition:width .2s ease-in-out}*{font-family:var(--website-font-family)}.static_login_btn{background:transparent;border-radius:12px;border:2px solid;box-shadow:none;transform:unset;font-size:16px!important;padding:8px 20px;display:inline-flex;align-items:center;justify-content:center;width:100%!important;font-weight:700;font-family:var(--website-font-family);height:43px;gap:5px}.static_login_btn mat-icon{color:#000}mat-icon{font-family:Material Icons!important}.total-container{transition:width .2s ease-in-out}.categories-header{height:44px;gap:26px!important}.categories-header .category{display:flex;align-items:center;font-weight:400;font-size:1rem}.margin-bottom{margin-bottom:var(--margin-top)}@media only screen and (max-width : 475px){.left-logo-text{padding-top:10px}.mob-form-control{position:absolute;right:10px;width:95%;top:85px;border-radius:12px!important}.categories-header{height:unset!important;margin-top:var(--margin-top)}.w-98{width:98%}.paddingEcom{padding-top:5px!important;padding-bottom:5px!important}.right-btn{width:15%!important}.cartItemCount{top:-8px!important;right:-3px!important}.adjustePadding{padding:8px!important}.pageLinks{gap:15px;flex-direction:column!important}.category-btn{color:#000!important;justify-content:left}}.nav-link{text-decoration:none}.cartItemCount{padding:5px;border-radius:5px;color:#fff;top:15px;left:15px;height:15px;width:15px;display:flex;align-items:center;justify-content:center;font-size:9px}#navbarNavAltMarkup{position:fixed;top:0;width:100%;background-color:#0e3f58;height:calc(100vh + -0px);z-index:101}.dropdown-toggle{border-bottom:2px solid transparent;transition:border .5s ease;position:relative;top:-1px}.dropdown-toggle:hover{border-bottom:2px solid rgb(14,63,88)}.inner-height,.nab-bar-mobile{height:100%}.total-container{height:auto;position:relative;background-color:transparent!important}.menu-icon{display:flex;flex-direction:column;gap:0px;align-items:center;justify-content:space-evenly;max-width:55px}.menu-icon hr{border:1px solid;margin:0;width:100%}.pt-0{padding-top:0!important}.pb-0{padding-bottom:0!important}.button{font-size:14px!important;padding:1rem 2rem;display:inline-flex;align-items:center;justify-content:center;width:fit-content!important}.stores{border:1px solid;border-radius:12px;cursor:pointer;font-weight:600}.input-group{position:relative;outline:none;height:40px;display:flex;align-items:center;background-color:transparent;margin-right:25px;-webkit-transition:width .4s ease-in-out;transition:width .4s ease-in-out;border-radius:12px}.input-group mat-icon{width:6%;display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;border-radius:0 12px 12px 0}.input-group input{height:100%!important;width:80%;background-color:transparent;border:none;outline:none;font-size:14px;padding-bottom:6px;box-shadow:none}.mat-icon{color:#000}.dropdown-button{font-size:14px!important;width:fit-content!important}.mobile-footer{display:none}@media screen and (max-width: 475px){.mobile-footer{width:100vw;height:60px;box-shadow:#64646f33 -2px -16px 29px;position:fixed;bottom:0;z-index:10001;display:flex!important;justify-content:space-around;align-items:center}.mobile-footer .icons{margin-top:5px;display:flex;align-items:center;justify-content:center;flex-direction:column}.mobile-footer .mat-icon{font-size:22px}}.nab-bar-mobile{width:100%;padding:5px 10px;height:50px;box-sizing:border-box}.title-row{flex:1;display:flex;align-items:center}.navbar-content{background-color:#0e3f58;padding:10px;margin-top:0!important}.navbar-content .d-flex{margin-top:20px}.navbar-toggler,.close-box{background:transparent;border:none;cursor:pointer;margin-left:10px;width:50px!important}.mat-icon{color:#fff}.button-display{display:flex;gap:8px}.flex-column{flex-direction:column}.justify-space-around{justify-content:space-around}@media screen and (max-width: 475px){.nab-bar-mobile{height:60px}}.cursor-pointer{cursor:pointer}.search-icon{margin-right:20px;display:flex;align-items:center;cursor:pointer}.search-icon mat-icon{font-size:24px}.mat-btn{font-size:14px!important;background:none;display:flex;cursor:pointer;border:none}.mat-btn mat-icon{color:inherit}.dropdown-menu{right:0;left:auto}.header1{display:flex;justify-content:space-between;align-items:center}.gap-15{gap:15px}.gap-10{gap:10px}.ptb-1{padding-top:1rem;padding-bottom:1rem}.text-end{text-align:end}.loginButton{gap:5px;display:flex;align-items:center;color:#fff;border-radius:8px;cursor:pointer;width:40px}.loginButton span{font-weight:600!important}.align-center{align-items:center}.offcanvas{width:70%;z-index:1000000000}.offcanvas mat-icon{color:#000}.offcanvas-body{position:relative}.canvas-button{position:absolute;bottom:20px;left:12px;width:90%}.mobileLoginButton{width:100%;height:40px;border-radius:8px;margin-top:15px;outline:none;background:transparent}.pageLinks{display:flex;flex-direction:row}.category-btn{font-size:16px!important}.h-70{height:70px}.offcanvas-header{height:10vh}.offcanvas-body{height:70vh}.offcanvas-body .pages{height:80%;overflow:scroll}.offcanvas-footer{height:20vh}.h-100{height:100%!important}.box-shadow{box-shadow:-9px 5px 3px #99999929}.sticky-header{position:sticky;top:0;z-index:10000}.mobile-page-list{position:relative;left:10px}.category{position:relative}.category:hover{border-bottom:3px solid var(--border-color);transition:border-bottom .1s ease-in-out}.list-category{padding:15px 30px;color:#000;background-color:#fff!important;height:50vh;position:absolute;width:100%}.list-header{margin-bottom:1rem;font-size:16px;font-weight:600}.list-item{gap:1rem;font-size:14px}.background-position{background-position:center top!important}.image-container{cursor:pointer}.image-container img{border-radius:12px}.each-price:hover{font-weight:700}.col-imag img{border-radius:8px}.btm-col-name{width:93%;border-radius:0 0 12px 12px;bottom:0}.collection{height:max-content;cursor:pointer}.text-overflow{overflow:hidden;text-overflow:ellipsis;font-size:14px;font-weight:500}.col-5{width:44.666667%}.h-10{height:10vh}.fs-16{font-size:16px}.br-50{border-radius:50%}.col-7{width:56.333333%}.pincode-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:3%;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.form-control{border-radius:12px 0 0 12px}.pin-text{font-size:14px;font-weight:500;white-space:nowrap}.z-index-10{z-index:10!important}.bg-transparent{background-color:transparent!important;background-image:none!important}.error-border{border:2px solid #e53e3e!important}.f-11{font-size:11px}.br-5{border:1px solid rgba(0,0,0,.05)}.f-18{font-size:18px}.f-14{font-size:14px}.info-container{position:absolute;background:#fff;color:#000;height:max-content;width:20vw;right:-15px;top:130%;z-index:10;border-radius:0 0 30px 30px;transform-origin:top;box-shadow:0 2px 4px #c8c8c880;animation:unrollCarpet .5s ease-out forwards}.sign-btn{padding:10px;border-radius:12px;border:1px solid;cursor:pointer}.b-1{border:1px solid;border-radius:12px}@keyframes unrollCarpet{0%{transform:scaleY(0) rotateX(90deg);opacity:0}25%{transform:scaleY(.25) rotateX(67.5deg);opacity:.35}50%{transform:scaleY(.5) rotateX(45deg);opacity:.7}75%{transform:scaleY(.75) rotateX(22.5deg);opacity:.85}to{transform:scaleY(1) rotateX(0);opacity:1}}.pincode-text{font-size:11px;margin-bottom:15px}\n"] }]
|
|
14667
14790
|
}], ctorParameters: () => [{ type: EventsService }, { type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: RestService }, { type: EventsService }, { type: undefined, decorators: [{
|
|
14668
14791
|
type: Inject,
|
|
14669
14792
|
args: [LOCAL_STORAGE]
|
|
@@ -18620,11 +18743,11 @@ class SchemeDetailsComponent {
|
|
|
18620
18743
|
return window.innerWidth <= 475;
|
|
18621
18744
|
}
|
|
18622
18745
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, deps: [{ token: StorageServiceService }, { token: RestService }, { token: i1$1.MatDialog }, { token: EventsService }, { token: i2$2.Router }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18623
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailsComponent, isStandalone: true, selector: "simpo-scheme-details", inputs: { schemeDetails: "schemeDetails", data: "data", metalPrice: "metalPrice" }, outputs: { gotoSchemeOverview: "gotoSchemeOverview" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }, { propertyName: "slabListTemplate", first: true, predicate: ["showSlab"], descendants: true, static: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<div class=\"w-100 h-100\">\n <!-- Header -->\n <div class=\"header\">\n <div class=\"header_left d-flex justify-content-between align-items-center\">\n <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\n </div>\n <h1>Passbook Details</h1>\n </div>\n <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\n *ngIf=\"schemeDetails?.passBookStatus == 'ACTIVE'\">Raise Redeem Request</div>\n </div>\n\n <!-- Amount Card -->\n <div class=\"d-flex justify-content-between amount-card-section\">\n <div class=\"w-100\">\n <div class=\"amount-card\">\n <div class=\"top-dashboard\">\n <div class=\"amount-info\">\n <div class=\"coin-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n </div>\n <div class=\"amount-details\">\n <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : 'N/A'}}</h2>\n <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\n </div>\n </div>\n <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n <div class=\"coin-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n </div>\n <div class=\"amount-details\">\n <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\n <p>Accumulated Gold</p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"d-flex align-items-start justify-content-around scheme-section\">\n <div class=\"details_tab\">\n <div class=\"section-header\">\n <h3>Passbook Details</h3>\n <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\n schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\n </div>\n\n <div class=\"scheme-info\">\n <div class=\"scheme-name\">\n <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n 'N/A'}}</span>\n </div>\n <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\n 'N/A'}}\n Monthly</div>\n </div>\n\n <div class=\"dates-grid\">\n <div class=\"date-item\">\n <div class=\"date-icon\">\uD83D\uDCC5</div>\n <div class=\"date-info\">\n <span class=\"date-label\">Scheme started on</span>\n <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\n (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n </div>\n </div>\n <div class=\"date-item\">\n <div class=\"date-icon\">\uD83D\uDCC5</div>\n <div class=\"date-info\">\n <span class=\"date-label\">Maturity Date</span>\n <span class=\"date-value\">{{schemeDetails?.maturityDate ?\n (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\n </div>\n </div>\n <div class=\"completion-info\">\n <span class=\"completion-label\">Completed EMIs</span>\n <span class=\"completion-value\">{{schemeDetails.dueMonths ?\n (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\n 0}} out\n of {{schemeDetails?.schemePayments?.length}}</span>\n </div>\n </div>\n </div>\n <!-- <div class=\"enrollment-card\">\n <div class=\"enrollment-row\">\n <span class=\"enrollment-label\">Group Name</span>\n <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\n schemeDetails?.schemeName :'N/A' }}</span>\n </div>\n\n <div class=\"enrollment-row\">\n <span class=\"enrollment-label\">Group Code</span>\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\n schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\n </div>\n\n <div class=\"enrollment-row\">\n <span class=\"enrollment-label\">Maturity Date</span>\n <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\n : 'dd-MM-yyyy') : 'N/A'}}</span>\n </div>\n <div class=\"enrollment-row\">\n <span class=\"enrollment-label\">Enrollment Id</span>\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\n </div>\n </div> -->\n </div>\n </div>\n <!-- <div class=\"quick-actions\">\n <h3>Quick Actions</h3>\n <div class=\"actions d-flex flex-column justify-content-evenly\">\n <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\n </div>\n <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\n <div class=\"action-item d-flex align-items-center\">Download SOA</div>\n </div>\n\n <button class=\"enroll-btn\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\n New Scheme</button>\n </div> -->\n </div>\n\n <!-- Scheme Details Section -->\n <div class=\"scheme-details\">\n <div class=\"section d-flex-flex-column gap-2\">\n <div class=\"section-header\">\n <h2 class=\"section-title\">Installments</h2>\n </div>\n <div class=\"payment-list d-flex flex-column gap-2\">\n <ng-container *ngIf=\"paymentData.length;else noPayments\">\n <ng-container *ngFor=\"let payment of paymentData;let i = index\">\n <div class=\"payment-item\">\n <div class=\"payment-info\">\n <div class=\"payment-icon upcoming\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\n </div>\n <div class=\"payment-details\">\n <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\n <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\n 'N/A'}}</p>\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\n <!-- |\n Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\n </div>\n </div>\n <div class=\"payment-amount\">\n <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\n payment.dueAmount :\n 'N/A'}}</div>\n <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\n *ngIf=\"payment?.paymentStatus != 'DUE'\">\n Paid\n </div>\n <div class=\"payment-status pay-now-btn cursor-pointer\"\n *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\n <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\n <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #showCharges>\n <div class=\"payment-dialog\">\n <div class=\"dialog-header\">\n <h2>Payment Details</h2>\n <button class=\"close-btn\" mat-icon-button>\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"payment-content\">\n <div class=\"payment-row\">\n <span class=\"label\">Installment Amount:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Convenience Fee:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Payment Service Charges:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Gold Allocate:</span>\n <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</span>\n </div>\n\n <div class=\"payment-row total-row\">\n <span class=\"label total-label\">Total Amount:</span>\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n </div>\n </div>\n\n <div class=\"dialog-actions\">\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\n </div>\n </div>\n </ng-template>\n <ng-template #showSlab>\n <div class=\"main_section\">\n <div class=\"slab_header d-flex justify-content-between align-items-center\">\n Confirm Redeem Request\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n </div>\n <div class=\"main_body\">\n <div class=\"container\">\n <div class=\"card\">\n <div class=\"card-title\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n 'N/A'}}</div>\n <div class=\"info-row\">\n <span>Plan started on</span>\n <span class=\"value\">{{schemeDetails.createdTimestamp ?\n (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n </div>\n <div class=\"info-row\">\n <span>Monthly Amount Paid</span>\n <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\n schemeDetails?.installmentAmount : 'N/A'}}</span>\n </div>\n <div class=\"info-row\">\n <span>Total Amount Paid</span>\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\n schemeDetails?.totalPaidAmount : 'N/A' }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType !== 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n <span>Enrollment Fee</span>\n <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge}}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n <span>Accumulated gold</span>\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\n </div>\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n <span>Gold Deducted</span>\n <span class=\"value\">{{goldDeducted}} gms</span>\n </div>\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n <span>Accumulated gold after Deduction</span>\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal - (paidMonth < schemeDetails?.minRedemptionMonth ? goldDeducted : 0)}} gms</span>\n </div>\n <div class=\"info-row\">\n <span>Total Redeem Amount</span>\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\n </div>\n </div>\n\n <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\n <div class=\"card-title center\">Benefits You Will Get</div>\n <div class=\"info-row\">\n <span>Installments Paid:</span>\n <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\n (schemeDetails?.schemePayments?.length -\n schemeDetails?.dueMonths) : 'N/A'}}</span>\n </div>\n <div class=\"info-row\">\n <span>Benefit Slab:</span>\n <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\n :\n 'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\n months</span>\n </div>\n <div class=\"info-row\">\n <span>Benefit Percentage:</span>\n <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\n slabDetails[0].benefitPercentage : 'N/A'}}%</span>\n </div>\n <div class=\"info-row\">\n <span>Benefit Amount:</span>\n <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\n slabDetails[0]?.benefitAmount : 'N/A'}}</span>\n </div>\n </div>\n\n <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\n *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\n <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\n <mat-spinner></mat-spinner>\n Requesting..\n </button>\n </div>\n\n </div>\n </div>\n </ng-template>\n <ng-template #noPayments>\n <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\n <span>No Upcoming Payments</span>\n </div>\n </ng-template>\n </div>\n </div>\n <div class=\"tabs\">\n <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\n </div>\n <div class=\"transactions\">\n <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\n <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\n <div class=\"transaction-status paid\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\n </div>\n <div class=\"transaction-details\">\n <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\n </h4>\n <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\n 'N/A'}}\n </p>\n </div>\n <div class=\"transaction-amount\">\n {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\n </div>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.amount-info{justify-content:space-between}.top-dashboard{flex-direction:column}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap;font-size:.7rem!important}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
18746
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailsComponent, isStandalone: true, selector: "simpo-scheme-details", inputs: { schemeDetails: "schemeDetails", data: "data", metalPrice: "metalPrice" }, outputs: { gotoSchemeOverview: "gotoSchemeOverview" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }, { propertyName: "slabListTemplate", first: true, predicate: ["showSlab"], descendants: true, static: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<div class=\"w-100 h-100\">\n <!-- Header -->\n <div class=\"header\">\n <div class=\"header_left d-flex justify-content-between align-items-center\">\n <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\n </div>\n <h1>Passbook Details</h1>\n </div>\n <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\n *ngIf=\"schemeDetails?.passBookStatus == 'ACTIVE'\">Raise Redeem Request</div>\n </div>\n\n <!-- Amount Card -->\n <div class=\"d-flex justify-content-between amount-card-section\">\n <div class=\"w-100\">\n <div class=\"amount-card\">\n <div class=\"top-dashboard\">\n <div class=\"amount-info\">\n <div class=\"coin-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n </div>\n <div class=\"amount-details\">\n <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : '0'}}</h2>\n <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\n </div>\n </div>\n <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n <div class=\"coin-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n </div>\n <div class=\"amount-details\">\n <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\n <p>Accumulated Gold</p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"d-flex align-items-start justify-content-around scheme-section\">\n <div class=\"details_tab\">\n <div class=\"section-header\">\n <h3>Passbook Details</h3>\n <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\n schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\n </div>\n\n <div class=\"scheme-info\">\n <div class=\"scheme-name\">\n <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n 'N/A'}}</span>\n </div>\n <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\n 'N/A'}}\n Monthly</div>\n </div>\n\n <div class=\"dates-grid\">\n <div class=\"date-item\">\n <div class=\"date-icon\">\uD83D\uDCC5</div>\n <div class=\"date-info\">\n <span class=\"date-label\">Scheme started on</span>\n <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\n (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n </div>\n </div>\n <div class=\"date-item\">\n <div class=\"date-icon\">\uD83D\uDCC5</div>\n <div class=\"date-info\">\n <span class=\"date-label\">Maturity Date</span>\n <span class=\"date-value\">{{schemeDetails?.maturityDate ?\n (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\n </div>\n </div>\n <div class=\"completion-info\">\n <span class=\"completion-label\">Completed EMIs</span>\n <span class=\"completion-value\">{{schemeDetails.dueMonths ?\n (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\n 0}} out\n of {{schemeDetails?.schemePayments?.length}}</span>\n </div>\n </div>\n </div>\n <!-- <div class=\"enrollment-card\">\n <div class=\"enrollment-row\">\n <span class=\"enrollment-label\">Group Name</span>\n <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\n schemeDetails?.schemeName :'N/A' }}</span>\n </div>\n\n <div class=\"enrollment-row\">\n <span class=\"enrollment-label\">Group Code</span>\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\n schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\n </div>\n\n <div class=\"enrollment-row\">\n <span class=\"enrollment-label\">Maturity Date</span>\n <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\n : 'dd-MM-yyyy') : 'N/A'}}</span>\n </div>\n <div class=\"enrollment-row\">\n <span class=\"enrollment-label\">Enrollment Id</span>\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\n </div>\n </div> -->\n </div>\n </div>\n <!-- <div class=\"quick-actions\">\n <h3>Quick Actions</h3>\n <div class=\"actions d-flex flex-column justify-content-evenly\">\n <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\n </div>\n <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\n <div class=\"action-item d-flex align-items-center\">Download SOA</div>\n </div>\n\n <button class=\"enroll-btn\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\n New Scheme</button>\n </div> -->\n </div>\n\n <!-- Scheme Details Section -->\n <div class=\"scheme-details\">\n <div class=\"section d-flex-flex-column gap-2\">\n <div class=\"section-header\">\n <h2 class=\"section-title\">Installments</h2>\n </div>\n <div class=\"payment-list d-flex flex-column gap-2\">\n <ng-container *ngIf=\"paymentData.length;else noPayments\">\n <ng-container *ngFor=\"let payment of paymentData;let i = index\">\n <div class=\"payment-item\">\n <div class=\"payment-info\">\n <div class=\"payment-icon upcoming\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\n </div>\n <div class=\"payment-details\">\n <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\n <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\n 'N/A'}}</p>\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\n <!-- |\n Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\n </div>\n </div>\n <div class=\"payment-amount\">\n <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\n payment.dueAmount :\n 'N/A'}}</div>\n <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\n *ngIf=\"payment?.paymentStatus != 'DUE'\">\n Paid\n </div>\n <div class=\"payment-status pay-now-btn cursor-pointer\"\n *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\n <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\n <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #showCharges>\n <div class=\"payment-dialog\">\n <div class=\"dialog-header\">\n <h2>Payment Details</h2>\n <button class=\"close-btn\" mat-icon-button>\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"payment-content\">\n <div class=\"payment-row\">\n <span class=\"label\">Installment Amount:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Convenience Fee:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Payment Service Charges:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Gold Allocate:</span>\n <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</span>\n </div>\n\n <div class=\"payment-row total-row\">\n <span class=\"label total-label\">Total Amount:</span>\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n </div>\n </div>\n\n <div class=\"dialog-actions\">\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\n </div>\n </div>\n </ng-template>\n <ng-template #showSlab>\n <div class=\"main_section\">\n <div class=\"slab_header d-flex justify-content-between align-items-center\">\n Confirm Redeem Request\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n </div>\n <div class=\"main_body\">\n <div class=\"container\">\n <div class=\"card\">\n <div class=\"card-title\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n 'N/A'}}</div>\n <div class=\"info-row\">\n <span>Plan started on</span>\n <span class=\"value\">{{schemeDetails.createdTimestamp ?\n (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n </div>\n <div class=\"info-row\">\n <span>Monthly Amount Paid</span>\n <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\n schemeDetails?.installmentAmount : 'N/A'}}</span>\n </div>\n <div class=\"info-row\">\n <span>Total Amount Paid</span>\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\n schemeDetails?.totalPaidAmount : 'N/A' }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType !== 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n <span>Enrollment Fee</span>\n <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge}}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n <span>Accumulated gold</span>\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\n </div>\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n <span>Gold Deducted</span>\n <span class=\"value\">{{goldDeducted}} gms</span>\n </div>\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n <span>Accumulated gold after Deduction</span>\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal - (paidMonth < schemeDetails?.minRedemptionMonth ? goldDeducted : 0)}} gms</span>\n </div>\n <div class=\"info-row\">\n <span>Total Redeem Amount</span>\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\n </div>\n </div>\n\n <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\n <div class=\"card-title center\">Benefits You Will Get</div>\n <div class=\"info-row\">\n <span>Installments Paid:</span>\n <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\n (schemeDetails?.schemePayments?.length -\n schemeDetails?.dueMonths) : 'N/A'}}</span>\n </div>\n <div class=\"info-row\">\n <span>Benefit Slab:</span>\n <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\n :\n 'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\n months</span>\n </div>\n <div class=\"info-row\">\n <span>Benefit Percentage:</span>\n <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\n slabDetails[0].benefitPercentage : 'N/A'}}%</span>\n </div>\n <div class=\"info-row\">\n <span>Benefit Amount:</span>\n <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\n slabDetails[0]?.benefitAmount : 'N/A'}}</span>\n </div>\n </div>\n\n <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\n *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\n <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\n <mat-spinner></mat-spinner>\n Requesting..\n </button>\n </div>\n\n </div>\n </div>\n </ng-template>\n <ng-template #noPayments>\n <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\n <span>No Upcoming Payments</span>\n </div>\n </ng-template>\n </div>\n </div>\n <div class=\"tabs\">\n <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\n </div>\n <div class=\"transactions\">\n <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\n <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\n <div class=\"transaction-status paid\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\n </div>\n <div class=\"transaction-details\">\n <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\n </h4>\n <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\n 'N/A'}}\n </p>\n </div>\n <div class=\"transaction-amount\">\n {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\n </div>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.amount-info{justify-content:space-between}.top-dashboard{flex-direction:column}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap;font-size:.7rem!important}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
|
18624
18747
|
}
|
|
18625
18748
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, decorators: [{
|
|
18626
18749
|
type: Component,
|
|
18627
|
-
args: [{ selector: 'simpo-scheme-details', standalone: true, imports: [MatIcon, CommonModule, MatProgressSpinner, MatProgressSpinnerModule, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<div class=\"w-100 h-100\">\n <!-- Header -->\n <div class=\"header\">\n <div class=\"header_left d-flex justify-content-between align-items-center\">\n <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\n </div>\n <h1>Passbook Details</h1>\n </div>\n <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\n *ngIf=\"schemeDetails?.passBookStatus == 'ACTIVE'\">Raise Redeem Request</div>\n </div>\n\n <!-- Amount Card -->\n <div class=\"d-flex justify-content-between amount-card-section\">\n <div class=\"w-100\">\n <div class=\"amount-card\">\n <div class=\"top-dashboard\">\n <div class=\"amount-info\">\n <div class=\"coin-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n </div>\n <div class=\"amount-details\">\n <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : 'N/A'}}</h2>\n <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\n </div>\n </div>\n <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n <div class=\"coin-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n </div>\n <div class=\"amount-details\">\n <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\n <p>Accumulated Gold</p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"d-flex align-items-start justify-content-around scheme-section\">\n <div class=\"details_tab\">\n <div class=\"section-header\">\n <h3>Passbook Details</h3>\n <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\n schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\n </div>\n\n <div class=\"scheme-info\">\n <div class=\"scheme-name\">\n <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n 'N/A'}}</span>\n </div>\n <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\n 'N/A'}}\n Monthly</div>\n </div>\n\n <div class=\"dates-grid\">\n <div class=\"date-item\">\n <div class=\"date-icon\">\uD83D\uDCC5</div>\n <div class=\"date-info\">\n <span class=\"date-label\">Scheme started on</span>\n <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\n (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n </div>\n </div>\n <div class=\"date-item\">\n <div class=\"date-icon\">\uD83D\uDCC5</div>\n <div class=\"date-info\">\n <span class=\"date-label\">Maturity Date</span>\n <span class=\"date-value\">{{schemeDetails?.maturityDate ?\n (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\n </div>\n </div>\n <div class=\"completion-info\">\n <span class=\"completion-label\">Completed EMIs</span>\n <span class=\"completion-value\">{{schemeDetails.dueMonths ?\n (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\n 0}} out\n of {{schemeDetails?.schemePayments?.length}}</span>\n </div>\n </div>\n </div>\n <!-- <div class=\"enrollment-card\">\n <div class=\"enrollment-row\">\n <span class=\"enrollment-label\">Group Name</span>\n <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\n schemeDetails?.schemeName :'N/A' }}</span>\n </div>\n\n <div class=\"enrollment-row\">\n <span class=\"enrollment-label\">Group Code</span>\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\n schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\n </div>\n\n <div class=\"enrollment-row\">\n <span class=\"enrollment-label\">Maturity Date</span>\n <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\n : 'dd-MM-yyyy') : 'N/A'}}</span>\n </div>\n <div class=\"enrollment-row\">\n <span class=\"enrollment-label\">Enrollment Id</span>\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\n </div>\n </div> -->\n </div>\n </div>\n <!-- <div class=\"quick-actions\">\n <h3>Quick Actions</h3>\n <div class=\"actions d-flex flex-column justify-content-evenly\">\n <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\n </div>\n <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\n <div class=\"action-item d-flex align-items-center\">Download SOA</div>\n </div>\n\n <button class=\"enroll-btn\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\n New Scheme</button>\n </div> -->\n </div>\n\n <!-- Scheme Details Section -->\n <div class=\"scheme-details\">\n <div class=\"section d-flex-flex-column gap-2\">\n <div class=\"section-header\">\n <h2 class=\"section-title\">Installments</h2>\n </div>\n <div class=\"payment-list d-flex flex-column gap-2\">\n <ng-container *ngIf=\"paymentData.length;else noPayments\">\n <ng-container *ngFor=\"let payment of paymentData;let i = index\">\n <div class=\"payment-item\">\n <div class=\"payment-info\">\n <div class=\"payment-icon upcoming\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\n </div>\n <div class=\"payment-details\">\n <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\n <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\n 'N/A'}}</p>\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\n <!-- |\n Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\n </div>\n </div>\n <div class=\"payment-amount\">\n <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\n payment.dueAmount :\n 'N/A'}}</div>\n <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\n *ngIf=\"payment?.paymentStatus != 'DUE'\">\n Paid\n </div>\n <div class=\"payment-status pay-now-btn cursor-pointer\"\n *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\n <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\n <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #showCharges>\n <div class=\"payment-dialog\">\n <div class=\"dialog-header\">\n <h2>Payment Details</h2>\n <button class=\"close-btn\" mat-icon-button>\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"payment-content\">\n <div class=\"payment-row\">\n <span class=\"label\">Installment Amount:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Convenience Fee:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Payment Service Charges:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Gold Allocate:</span>\n <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</span>\n </div>\n\n <div class=\"payment-row total-row\">\n <span class=\"label total-label\">Total Amount:</span>\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n </div>\n </div>\n\n <div class=\"dialog-actions\">\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\n </div>\n </div>\n </ng-template>\n <ng-template #showSlab>\n <div class=\"main_section\">\n <div class=\"slab_header d-flex justify-content-between align-items-center\">\n Confirm Redeem Request\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n </div>\n <div class=\"main_body\">\n <div class=\"container\">\n <div class=\"card\">\n <div class=\"card-title\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n 'N/A'}}</div>\n <div class=\"info-row\">\n <span>Plan started on</span>\n <span class=\"value\">{{schemeDetails.createdTimestamp ?\n (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n </div>\n <div class=\"info-row\">\n <span>Monthly Amount Paid</span>\n <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\n schemeDetails?.installmentAmount : 'N/A'}}</span>\n </div>\n <div class=\"info-row\">\n <span>Total Amount Paid</span>\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\n schemeDetails?.totalPaidAmount : 'N/A' }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType !== 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n <span>Enrollment Fee</span>\n <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge}}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n <span>Accumulated gold</span>\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\n </div>\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n <span>Gold Deducted</span>\n <span class=\"value\">{{goldDeducted}} gms</span>\n </div>\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n <span>Accumulated gold after Deduction</span>\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal - (paidMonth < schemeDetails?.minRedemptionMonth ? goldDeducted : 0)}} gms</span>\n </div>\n <div class=\"info-row\">\n <span>Total Redeem Amount</span>\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\n </div>\n </div>\n\n <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\n <div class=\"card-title center\">Benefits You Will Get</div>\n <div class=\"info-row\">\n <span>Installments Paid:</span>\n <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\n (schemeDetails?.schemePayments?.length -\n schemeDetails?.dueMonths) : 'N/A'}}</span>\n </div>\n <div class=\"info-row\">\n <span>Benefit Slab:</span>\n <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\n :\n 'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\n months</span>\n </div>\n <div class=\"info-row\">\n <span>Benefit Percentage:</span>\n <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\n slabDetails[0].benefitPercentage : 'N/A'}}%</span>\n </div>\n <div class=\"info-row\">\n <span>Benefit Amount:</span>\n <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\n slabDetails[0]?.benefitAmount : 'N/A'}}</span>\n </div>\n </div>\n\n <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\n *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\n <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\n <mat-spinner></mat-spinner>\n Requesting..\n </button>\n </div>\n\n </div>\n </div>\n </ng-template>\n <ng-template #noPayments>\n <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\n <span>No Upcoming Payments</span>\n </div>\n </ng-template>\n </div>\n </div>\n <div class=\"tabs\">\n <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\n </div>\n <div class=\"transactions\">\n <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\n <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\n <div class=\"transaction-status paid\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\n </div>\n <div class=\"transaction-details\">\n <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\n </h4>\n <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\n 'N/A'}}\n </p>\n </div>\n <div class=\"transaction-amount\">\n {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\n </div>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.amount-info{justify-content:space-between}.top-dashboard{flex-direction:column}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap;font-size:.7rem!important}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"] }]
|
|
18750
|
+
args: [{ selector: 'simpo-scheme-details', standalone: true, imports: [MatIcon, CommonModule, MatProgressSpinner, MatProgressSpinnerModule, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<div class=\"w-100 h-100\">\n <!-- Header -->\n <div class=\"header\">\n <div class=\"header_left d-flex justify-content-between align-items-center\">\n <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\n </div>\n <h1>Passbook Details</h1>\n </div>\n <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\n *ngIf=\"schemeDetails?.passBookStatus == 'ACTIVE'\">Raise Redeem Request</div>\n </div>\n\n <!-- Amount Card -->\n <div class=\"d-flex justify-content-between amount-card-section\">\n <div class=\"w-100\">\n <div class=\"amount-card\">\n <div class=\"top-dashboard\">\n <div class=\"amount-info\">\n <div class=\"coin-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n </div>\n <div class=\"amount-details\">\n <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : '0'}}</h2>\n <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\n </div>\n </div>\n <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n <div class=\"coin-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n </div>\n <div class=\"amount-details\">\n <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\n <p>Accumulated Gold</p>\n </div>\n </div>\n </div>\n </div>\n <div class=\"d-flex align-items-start justify-content-around scheme-section\">\n <div class=\"details_tab\">\n <div class=\"section-header\">\n <h3>Passbook Details</h3>\n <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\n schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\n </div>\n\n <div class=\"scheme-info\">\n <div class=\"scheme-name\">\n <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n 'N/A'}}</span>\n </div>\n <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\n 'N/A'}}\n Monthly</div>\n </div>\n\n <div class=\"dates-grid\">\n <div class=\"date-item\">\n <div class=\"date-icon\">\uD83D\uDCC5</div>\n <div class=\"date-info\">\n <span class=\"date-label\">Scheme started on</span>\n <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\n (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n </div>\n </div>\n <div class=\"date-item\">\n <div class=\"date-icon\">\uD83D\uDCC5</div>\n <div class=\"date-info\">\n <span class=\"date-label\">Maturity Date</span>\n <span class=\"date-value\">{{schemeDetails?.maturityDate ?\n (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\n </div>\n </div>\n <div class=\"completion-info\">\n <span class=\"completion-label\">Completed EMIs</span>\n <span class=\"completion-value\">{{schemeDetails.dueMonths ?\n (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\n 0}} out\n of {{schemeDetails?.schemePayments?.length}}</span>\n </div>\n </div>\n </div>\n <!-- <div class=\"enrollment-card\">\n <div class=\"enrollment-row\">\n <span class=\"enrollment-label\">Group Name</span>\n <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\n schemeDetails?.schemeName :'N/A' }}</span>\n </div>\n\n <div class=\"enrollment-row\">\n <span class=\"enrollment-label\">Group Code</span>\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\n schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\n </div>\n\n <div class=\"enrollment-row\">\n <span class=\"enrollment-label\">Maturity Date</span>\n <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\n : 'dd-MM-yyyy') : 'N/A'}}</span>\n </div>\n <div class=\"enrollment-row\">\n <span class=\"enrollment-label\">Enrollment Id</span>\n <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\n </div>\n </div> -->\n </div>\n </div>\n <!-- <div class=\"quick-actions\">\n <h3>Quick Actions</h3>\n <div class=\"actions d-flex flex-column justify-content-evenly\">\n <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\n </div>\n <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\n <div class=\"action-item d-flex align-items-center\">Download SOA</div>\n </div>\n\n <button class=\"enroll-btn\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\n New Scheme</button>\n </div> -->\n </div>\n\n <!-- Scheme Details Section -->\n <div class=\"scheme-details\">\n <div class=\"section d-flex-flex-column gap-2\">\n <div class=\"section-header\">\n <h2 class=\"section-title\">Installments</h2>\n </div>\n <div class=\"payment-list d-flex flex-column gap-2\">\n <ng-container *ngIf=\"paymentData.length;else noPayments\">\n <ng-container *ngFor=\"let payment of paymentData;let i = index\">\n <div class=\"payment-item\">\n <div class=\"payment-info\">\n <div class=\"payment-icon upcoming\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\n </div>\n <div class=\"payment-details\">\n <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\n <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\n 'N/A'}}</p>\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\n <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\n <!-- |\n Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\n </div>\n </div>\n <div class=\"payment-amount\">\n <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\n payment.dueAmount :\n 'N/A'}}</div>\n <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\n *ngIf=\"payment?.paymentStatus != 'DUE'\">\n Paid\n </div>\n <div class=\"payment-status pay-now-btn cursor-pointer\"\n *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\n <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\n <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #showCharges>\n <div class=\"payment-dialog\">\n <div class=\"dialog-header\">\n <h2>Payment Details</h2>\n <button class=\"close-btn\" mat-icon-button>\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"payment-content\">\n <div class=\"payment-row\">\n <span class=\"label\">Installment Amount:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Convenience Fee:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Payment Service Charges:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Gold Allocate:</span>\n <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</span>\n </div>\n\n <div class=\"payment-row total-row\">\n <span class=\"label total-label\">Total Amount:</span>\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n </div>\n </div>\n\n <div class=\"dialog-actions\">\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\n </div>\n </div>\n </ng-template>\n <ng-template #showSlab>\n <div class=\"main_section\">\n <div class=\"slab_header d-flex justify-content-between align-items-center\">\n Confirm Redeem Request\n <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n </div>\n <div class=\"main_body\">\n <div class=\"container\">\n <div class=\"card\">\n <div class=\"card-title\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n 'N/A'}}</div>\n <div class=\"info-row\">\n <span>Plan started on</span>\n <span class=\"value\">{{schemeDetails.createdTimestamp ?\n (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n </div>\n <div class=\"info-row\">\n <span>Monthly Amount Paid</span>\n <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\n schemeDetails?.installmentAmount : 'N/A'}}</span>\n </div>\n <div class=\"info-row\">\n <span>Total Amount Paid</span>\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\n schemeDetails?.totalPaidAmount : 'N/A' }}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType !== 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n <span>Enrollment Fee</span>\n <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge}}</span>\n </div>\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n <span>Accumulated gold</span>\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\n </div>\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n <span>Gold Deducted</span>\n <span class=\"value\">{{goldDeducted}} gms</span>\n </div>\n <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n <span>Accumulated gold after Deduction</span>\n <span class=\"value\">{{schemeDetails?.totalInvestedMetal - (paidMonth < schemeDetails?.minRedemptionMonth ? goldDeducted : 0)}} gms</span>\n </div>\n <div class=\"info-row\">\n <span>Total Redeem Amount</span>\n <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\n </div>\n </div>\n\n <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\n <div class=\"card-title center\">Benefits You Will Get</div>\n <div class=\"info-row\">\n <span>Installments Paid:</span>\n <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\n (schemeDetails?.schemePayments?.length -\n schemeDetails?.dueMonths) : 'N/A'}}</span>\n </div>\n <div class=\"info-row\">\n <span>Benefit Slab:</span>\n <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\n :\n 'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\n months</span>\n </div>\n <div class=\"info-row\">\n <span>Benefit Percentage:</span>\n <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\n slabDetails[0].benefitPercentage : 'N/A'}}%</span>\n </div>\n <div class=\"info-row\">\n <span>Benefit Amount:</span>\n <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\n slabDetails[0]?.benefitAmount : 'N/A'}}</span>\n </div>\n </div>\n\n <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\n *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\n <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\n <mat-spinner></mat-spinner>\n Requesting..\n </button>\n </div>\n\n </div>\n </div>\n </ng-template>\n <ng-template #noPayments>\n <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\n <span>No Upcoming Payments</span>\n </div>\n </ng-template>\n </div>\n </div>\n <div class=\"tabs\">\n <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\n </div>\n <div class=\"transactions\">\n <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\n <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\n <div class=\"transaction-status paid\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\n </div>\n <div class=\"transaction-details\">\n <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\n </h4>\n <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\n 'N/A'}}\n </p>\n </div>\n <div class=\"transaction-amount\">\n {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\n </div>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.amount-info{justify-content:space-between}.top-dashboard{flex-direction:column}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap;font-size:.7rem!important}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"] }]
|
|
18628
18751
|
}], ctorParameters: () => [{ type: StorageServiceService }, { type: RestService }, { type: i1$1.MatDialog }, { type: EventsService }, { type: i2$2.Router }, { type: i6$1.MessageService }], propDecorators: { schemeDetails: [{
|
|
18629
18752
|
type: Input,
|
|
18630
18753
|
args: ["schemeDetails"]
|
|
@@ -18751,11 +18874,11 @@ class PassbookTransactionsComponent {
|
|
|
18751
18874
|
});
|
|
18752
18875
|
}
|
|
18753
18876
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PassbookTransactionsComponent, deps: [{ token: StorageServiceService }, { token: RestService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18754
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PassbookTransactionsComponent, isStandalone: true, selector: "simpo-passbook-transactions", ngImport: i0, template: "<section class=\"total-container p-2 h-100\">\n <div class=\"d-flex text-start fs-20 lh-28 fw-bold clr-primary mb-3 p-1\">\n Transactions\n </div>\n <div class=\"transactions h-100 overflow-scroll p-1\">\n <div class=\"transaction w-100 p-3 d-flex justify-content-between align-items-center bx-shd mb-3\"\n *ngFor=\"let transaction of allTransactions\">\n <div class=\"left d-flex align-items-center gap-3\">\n <div class=\"d-flex image_container\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/558782c1755619706471Group 1707484906.png\"\n alt=\"load\">\n </div>\n <div class=\"d-flex flex-column\">\n <div class=\"top lh-20 fw-bold clr-primary\">{{transaction?.emiMonthCount ? transaction?.emiMonthCount\n : 'N/A' }} Instalment Paid</div>\n <div class=\"bottom d-flex gap-2\">\n <div class=\"fs-14 lh-20 clr-secondary transaction_date fw-bold\">\n {{transaction?.paidDate ? (transaction?.paidDate | date:'dd-MM-yyyy':'UTC') : 'N/A'}}\n </div>\n <div class=\"fs-14 lh-20 clr-secondary fw-bold plan_name\">\n • {{transaction?.planName ? transaction?.planName : 'N/A'}}\n </div>\n </div>\n </div>\n </div>\n <div class=\"d-flex text-end\">\n <div class=\"fs-18 lh-28 fw-bold clr-primary installment_amount\">\u20B9 {{transaction?.paidAmount ?\n transaction?.paidAmount :\n 'N/A'}}</div>\n </div>\n </div>\n </div>\n</section>", styles: ["*{font-family:var(--website-font-family)}.fs-20{font-size:20px}.fs-18{font-size:18px}.fs-14{font-size:14px}.lh-28{line-height:28px}.lh-20{line-height:20px}.clr-primary{color:#020817}.clr-secondary{color:#0006}.bx-shd{box-shadow:#63636333 0 2px 8px;border-radius:8px}@media only screen and (max-width:475px){.total-container{padding:unset!important}.plan_name,.transaction_date,.installment_amount{font-size:10px;white-space:nowrap}.image_container{width:30px}.image_container img{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] }); }
|
|
18877
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PassbookTransactionsComponent, isStandalone: true, selector: "simpo-passbook-transactions", ngImport: i0, template: "<section class=\"total-container p-2 h-100\">\n <div class=\"d-flex text-start fs-20 lh-28 fw-bold clr-primary mb-3 p-1\">\n Transactions\n </div>\n <div class=\"transactions h-100 overflow-scroll p-1\" *ngIf=\"(allTransactions?.length ?? 0) > 0; else emptyScreen\">\n <div class=\"transaction w-100 p-3 d-flex justify-content-between align-items-center bx-shd mb-3\"\n *ngFor=\"let transaction of allTransactions\">\n <div class=\"left d-flex align-items-center gap-3\">\n <div class=\"d-flex image_container\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/558782c1755619706471Group 1707484906.png\"\n alt=\"load\">\n </div>\n <div class=\"d-flex flex-column\">\n <div class=\"top lh-20 fw-bold clr-primary\">{{transaction?.emiMonthCount ? transaction?.emiMonthCount\n : 'N/A' }} Instalment Paid</div>\n <div class=\"bottom d-flex gap-2\">\n <div class=\"fs-14 lh-20 clr-secondary transaction_date fw-bold\">\n {{transaction?.paidDate ? (transaction?.paidDate | date:'dd-MM-yyyy':'UTC') : 'N/A'}}\n </div>\n <div class=\"fs-14 lh-20 clr-secondary fw-bold plan_name\">\n • {{transaction?.planName ? transaction?.planName : 'N/A'}}\n </div>\n </div>\n </div>\n </div>\n <div class=\"d-flex text-end\">\n <div class=\"fs-18 lh-28 fw-bold clr-primary installment_amount\">\u20B9 {{transaction?.paidAmount ?\n transaction?.paidAmount :\n 'N/A'}}</div>\n </div>\n </div>\n </div>\n</section>\n\n<ng-template #emptyScreen>\n <div class=\"no-transaction-text\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/870195c1756931532322transaction.png\" alt=\"\">\n <p>No Transaction</p>\n </div>\n</ng-template>\n", styles: ["*{font-family:var(--website-font-family)}.fs-20{font-size:20px}.fs-18{font-size:18px}.fs-14{font-size:14px}.lh-28{line-height:28px}.lh-20{line-height:20px}.clr-primary{color:#020817}.clr-secondary{color:#0006}.bx-shd{box-shadow:#63636333 0 2px 8px;border-radius:8px}@media only screen and (max-width:475px){.total-container{padding:unset!important}.plan_name,.transaction_date,.installment_amount{font-size:10px;white-space:nowrap}.image_container{width:30px}.image_container img{width:100%}}.no-transaction-text{height:90%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.no-transaction-text img{height:20%}.no-transaction-text p{font-size:18px;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] }); }
|
|
18755
18878
|
}
|
|
18756
18879
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PassbookTransactionsComponent, decorators: [{
|
|
18757
18880
|
type: Component,
|
|
18758
|
-
args: [{ selector: 'simpo-passbook-transactions', standalone: true, imports: [CommonModule], template: "<section class=\"total-container p-2 h-100\">\n <div class=\"d-flex text-start fs-20 lh-28 fw-bold clr-primary mb-3 p-1\">\n Transactions\n </div>\n <div class=\"transactions h-100 overflow-scroll p-1\">\n <div class=\"transaction w-100 p-3 d-flex justify-content-between align-items-center bx-shd mb-3\"\n *ngFor=\"let transaction of allTransactions\">\n <div class=\"left d-flex align-items-center gap-3\">\n <div class=\"d-flex image_container\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/558782c1755619706471Group 1707484906.png\"\n alt=\"load\">\n </div>\n <div class=\"d-flex flex-column\">\n <div class=\"top lh-20 fw-bold clr-primary\">{{transaction?.emiMonthCount ? transaction?.emiMonthCount\n : 'N/A' }} Instalment Paid</div>\n <div class=\"bottom d-flex gap-2\">\n <div class=\"fs-14 lh-20 clr-secondary transaction_date fw-bold\">\n {{transaction?.paidDate ? (transaction?.paidDate | date:'dd-MM-yyyy':'UTC') : 'N/A'}}\n </div>\n <div class=\"fs-14 lh-20 clr-secondary fw-bold plan_name\">\n • {{transaction?.planName ? transaction?.planName : 'N/A'}}\n </div>\n </div>\n </div>\n </div>\n <div class=\"d-flex text-end\">\n <div class=\"fs-18 lh-28 fw-bold clr-primary installment_amount\">\u20B9 {{transaction?.paidAmount ?\n transaction?.paidAmount :\n 'N/A'}}</div>\n </div>\n </div>\n </div>\n</section>", styles: ["*{font-family:var(--website-font-family)}.fs-20{font-size:20px}.fs-18{font-size:18px}.fs-14{font-size:14px}.lh-28{line-height:28px}.lh-20{line-height:20px}.clr-primary{color:#020817}.clr-secondary{color:#0006}.bx-shd{box-shadow:#63636333 0 2px 8px;border-radius:8px}@media only screen and (max-width:475px){.total-container{padding:unset!important}.plan_name,.transaction_date,.installment_amount{font-size:10px;white-space:nowrap}.image_container{width:30px}.image_container img{width:100%}}\n"] }]
|
|
18881
|
+
args: [{ selector: 'simpo-passbook-transactions', standalone: true, imports: [CommonModule], template: "<section class=\"total-container p-2 h-100\">\n <div class=\"d-flex text-start fs-20 lh-28 fw-bold clr-primary mb-3 p-1\">\n Transactions\n </div>\n <div class=\"transactions h-100 overflow-scroll p-1\" *ngIf=\"(allTransactions?.length ?? 0) > 0; else emptyScreen\">\n <div class=\"transaction w-100 p-3 d-flex justify-content-between align-items-center bx-shd mb-3\"\n *ngFor=\"let transaction of allTransactions\">\n <div class=\"left d-flex align-items-center gap-3\">\n <div class=\"d-flex image_container\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/558782c1755619706471Group 1707484906.png\"\n alt=\"load\">\n </div>\n <div class=\"d-flex flex-column\">\n <div class=\"top lh-20 fw-bold clr-primary\">{{transaction?.emiMonthCount ? transaction?.emiMonthCount\n : 'N/A' }} Instalment Paid</div>\n <div class=\"bottom d-flex gap-2\">\n <div class=\"fs-14 lh-20 clr-secondary transaction_date fw-bold\">\n {{transaction?.paidDate ? (transaction?.paidDate | date:'dd-MM-yyyy':'UTC') : 'N/A'}}\n </div>\n <div class=\"fs-14 lh-20 clr-secondary fw-bold plan_name\">\n • {{transaction?.planName ? transaction?.planName : 'N/A'}}\n </div>\n </div>\n </div>\n </div>\n <div class=\"d-flex text-end\">\n <div class=\"fs-18 lh-28 fw-bold clr-primary installment_amount\">\u20B9 {{transaction?.paidAmount ?\n transaction?.paidAmount :\n 'N/A'}}</div>\n </div>\n </div>\n </div>\n</section>\n\n<ng-template #emptyScreen>\n <div class=\"no-transaction-text\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/870195c1756931532322transaction.png\" alt=\"\">\n <p>No Transaction</p>\n </div>\n</ng-template>\n", styles: ["*{font-family:var(--website-font-family)}.fs-20{font-size:20px}.fs-18{font-size:18px}.fs-14{font-size:14px}.lh-28{line-height:28px}.lh-20{line-height:20px}.clr-primary{color:#020817}.clr-secondary{color:#0006}.bx-shd{box-shadow:#63636333 0 2px 8px;border-radius:8px}@media only screen and (max-width:475px){.total-container{padding:unset!important}.plan_name,.transaction_date,.installment_amount{font-size:10px;white-space:nowrap}.image_container{width:30px}.image_container img{width:100%}}.no-transaction-text{height:90%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.no-transaction-text img{height:20%}.no-transaction-text p{font-size:18px;font-weight:500}\n"] }]
|
|
18759
18882
|
}], ctorParameters: () => [{ type: StorageServiceService }, { type: RestService }] });
|
|
18760
18883
|
|
|
18761
18884
|
class UserProfileComponent extends BaseSection {
|
|
@@ -19304,7 +19427,7 @@ class UserProfileComponent extends BaseSection {
|
|
|
19304
19427
|
this.getAllSchemes();
|
|
19305
19428
|
}
|
|
19306
19429
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, deps: [{ token: i2$2.Router }, { token: EventsService }, { token: RestService }, { token: StorageServiceService }, { token: CartService }, { token: i1$1.MatDialog }, { token: i8$3.MatBottomSheet }, { token: i2$3.CookieService }, { token: i6$1.MessageService }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19307
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\n [attr.style]=\"customClass\">\n <ng-container *ngIf=\"!isMobile\">\n <div class=\"p-4 profile-box shadow-lg\"\n style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\n [style.order]=\"styles?.swap ? '1' : '0'\">\n\n <!-- Profile Header Section -->\n <div class=\"d-flex align-items-center profile-header\"\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\n style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\n <div class=\"online-indicator\"\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\n </div>\n </div>\n\n <div class=\"profile-details flex-grow-1\">\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\n {{getUserDetails?.contact?.name}}</h4>\n\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\n <span>{{getUserDetails?.contact?.mobile}}</span>\n </h6>\n\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\n *ngIf=\"getUserDetails?.contact?.email?.length\"\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\n </h6>\n </div>\n </div>\n </div>\n\n <!-- Navigation Tabs Section -->\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\n <div class=\"d-flex align-items-center tab-item\"\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\n <div class=\"tab-icon-wrapper\"\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\n </div>\n\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\n {{tab.value}}</div>\n\n <!-- Hover effect background -->\n <div class=\"tab-hover-bg\"\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Action Buttons Section -->\n <div class=\"d-flex action-buttons\"\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\n Edit Profile\n </button>\n\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\n Logout\n </button>\n </div>\n </div>\n\n <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n <ng-container *ngSwitchCase=\"'Orders'\">\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Address'\">\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Account Details'\">\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Logout'\">\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Wishlist'\">\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Transactions'\">\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Try At Home'\">\n <simpo-list-home-appointment></simpo-list-home-appointment>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isMobile\">\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\n </div>\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n <ng-container *ngSwitchCase=\"''\">\n <section class=\"top-sec\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\n style=\"width: 50px; height: 50px;\">\n <div class=\"d-flex flex-column align-items-center\">\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\n <h6 class=\"d-flex align-items-center font-weight-normal\">\n <mat-icon>stay_primary_portrait</mat-icon>\n <span>{{getUserDetails?.contact?.mobile}}</span>\n </h6>\n <h6 class=\"d-flex align-items-center font-weight-normal\"\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\n <span>{{getUserDetails?.contact?.email}}</span>\n </h6>\n </div>\n </section>\n <section class=\"list-sec\">\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\n [style.color]=\"styles?.background?.accentColor\">\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\n {{tab.value}}</div>\n </div>\n\n </ng-container>\n </section>\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Orders'\">\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Address'\">\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Account Details'\">\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Logout'\">\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Wishlist'\">\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Transactions'\">\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Try At Home'\">\n <simpo-list-home-appointment></simpo-list-home-appointment>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n</section>\n\n<ng-template #OrderSection>\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\n <ng-container *ngFor=\"let tab of tabs\">\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\n {{tab.value}}</div>\n </ng-container>\n </div> -->\n <div class=\"order-list\">\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\n </div>\n </ng-container>\n <ng-template #showEmptyScreen>\n <section class=\"empty-cart m-auto\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"cart-text \">\n <ng-container *ngFor=\"let text of content?.inputText\">\n <div class=\"heading-medium d-flex justify-content-center content-side\"\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n <simpo-text-editor [(value)]=\"text.value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n\n </div>\n </ng-container>\n </div>\n </div>\n </section>\n </ng-template>\n </div>\n</ng-template>\n<ng-template #OrderDetails>\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\n</ng-template>\n<ng-template #AddressSection>\n <div class=\"d-flex justify-content-between mb-2\">\n <h3 class=\"title-text\">My Address</h3>\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n <div class=\"address-list\">\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\n <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\n <div class=\"card-body p-3\">\n <!-- Header Section -->\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\n <div class=\"icon-grp d-flex\">\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\n (click)=\"editAddress(idx)\">edit</mat-icon>\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"address-content mb-3\">\n <div class=\"address-line mb-2\">\n <span class=\"text-muted small d-block\">Address</span>\n <span class=\"address-text\">{{address.addressLine1}}</span>\n </div>\n <div class=\"phone-info\">\n <span class=\"text-muted small d-block\">Phone</span>\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n\n <ng-template #showEmptyAddress>\n <section class=\"empty-cart m-auto\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\n </div>\n <div class=\"cart-text\">\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\n </div>\n <!-- </ng-container> -->\n </div>\n </div>\n </section>\n </ng-template>\n </div>\n</ng-template>\n<ng-template #AccountsSection>\n <h3 class=\"onlyDesktop\">My Accounts</h3>\n</ng-template>\n<ng-template #LogoutSection>\n <h3 class=\"onlyDesktop\">Logout</h3>\n</ng-template>\n<ng-template #OrderCard let-order=\"data\">\n <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\n <!-- Header Section -->\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\n <div class=\"order-number\">\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\n </div>\n <div class=\"arrow-icon\">\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\n </div>\n </div>\n <div class=\"ordered-item row mb-2\">\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"item-img w-50\">\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\n </div>\n </ng-container>\n </div>\n <!-- Middle Section -->\n <div class=\"order-details\">\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\n <span class=\"text-muted small mb-3 mb-sm-0\">\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\n </span>\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center\">\n <div class=\"amount-section\">\n <span class=\"h5 mb-0 text-success fw-bold\">\n <span [innerHTML]=\"currency\"></span>\n {{(order.billDetails.discountAmount ?\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\n order?.billDetails?.totalTaxAfterDiscount) :\n order.billDetails.totalGrossValue) | number:'1.0-2'}}\n </span>\n </div>\n <div class=\"status-section\">\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\n </span>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #WishlistDetails>\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\n <div class=\"address-card mb-2\">\n <div class=\"card-body p-4\">\n <div class=\"row align-items-center\">\n <div class=\"col-auto\">\n <div class=\"product-image-wrapper\">\n <img loading=\"lazy\"\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\n </div>\n </div>\n <div class=\"col\">\n <div class=\"product-details\">\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\n <div\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\n {{item.itemName}}\n </h6>\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\n title=\"Remove from wishlist\">\n <mat-icon class=\"small-icon\">delete</mat-icon>\n </button>\n </div>\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"product-price mb-3\">\n <span class=\"h5 text-success fw-bold mb-0\">\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\n </span>\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\n ({{item.quantity}} items)\n </span>\n </div>\n <div class=\"action-buttons d-flex gap-2\">\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\n *ngIf=\"item.quantity\">\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\n (click)=\"addToFav(item, 'SUBSTRACT')\">\n -\n </button>\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\n {{item.quantity}}\n </span>\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\n (click)=\"addToFav(item, 'ADD')\"> +\n </button>\n </div>\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\n (click)=\"addToFav(item, 'ADD')\">\n + Add Quantity\n </button>\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\n Move to Cart\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n </div>\n </div>\n <ng-template #showEmptyWishlistScreen>\n <section class=\"empty-cart m-auto\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\n </div>\n <div class=\"cart-text\">\n <ng-container>\n <div class=\"heading-medium d-flex justify-content-center\">\n Your Wishlist is Empty</div>\n </ng-container>\n </div>\n </div>\n </section>\n </ng-template>\n</ng-template>\n\n<ng-template #SchemeDetails>\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\n <div class=\"row gap-2\">\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\n <div class=\"card-header row gap-2\">\n <div class=\"card-head-left col-7\">\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\n </div>\n <div class=\"card-head-right col-4 text-center align-content-center\">\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\n </div>\n </div>\n <div class=\"card-body d-flex p-0 mb-3\">\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\n class=\"w-40 mb-2\">\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\n <div class=\"card-sub-text text-center\">Total Acheived</div>\n </div>\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\n alt=\"\" class=\"w-40 mb-2\">\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\n <div class=\"card-sub-text text-center\">Rewards</div>\n </div>\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\n alt=\"\" class=\"w-40 mb-2\">\n <div class=\"card-text text-center fw-600\">8</div>\n <div class=\"card-sub-text text-center\">Due Months</div>\n </div>\n </div>\n <div class=\"card-footer row\">\n <div class=\"col-6 d-flex gap-2 p-0\">\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\n may 2025</span>\n </div>\n <div class=\"col-6 d-flex gap-2 p-0\">\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\n may 2026</span>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n<ng-template #SchemePassbook>\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\n <div class=\"header d-flex flex-column\">\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\n class=\"store-listing\" (change)=\"changeStore($event)\">\n <option value=\"\">Select Store</option>\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\n </select></div>\n <div class=\"scheme-overview d-flex flex-column\">\n <div class=\"d-flex gap-2\">\n <div class=\"available-savings\">\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\n <h3>Available Savings</h3>\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\n </div>\n\n <div class=\"amount\">{{totalSavings ? totalSavings :\n 'N/A'}}</div>\n </div>\n <div class=\"active-schemes\">\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\n <h3>Active Passbooks</h3>\n <div class=\"auto-pay-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\n </div>\n </div>\n <div class=\"scheme-count\">{{totalSchemes?.length ?\n totalSchemes.length : 'N/A'}}</div>\n <div class=\"subtitle\">On Track</div>\n </div>\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\n <h3>Accumulated Gold </h3>\n <div class=\"auto-pay-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\n </div>\n </div>\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\n </div>\n </div>\n <ng-container *ngIf=\"overAllDues?.length\">\n <div class=\"section d-flex-flex-column gap-2\">\n <div class=\"section-header\">\n <h2 class=\"section-title\">Due Payments</h2>\n </div>\n <div class=\"payment-list d-flex flex-column gap-2\">\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\n <div class=\"payment-info\">\n <div class=\"payment-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\n </div>\n <div class=\"payment-details\">\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\n 'N/A'}}\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\n ? payment.daysOverdue : 0}}</span> --></span>\n </div>\n </div>\n <div class=\"payment-amount\">\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\n 'N/A'}}\n </div>\n <div class=\"payment-status overdue-status cursor-pointer\"\n (click)=\"payDue(payment)\">\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #showEmptyPayment>\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\n <span>No Due Payments</span>\n </div>\n </ng-template>\n </div>\n </div>\n </ng-container>\n\n </div>\n </div>\n\n <div class=\"section mt-3\">\n <div class=\"section-header\">\n <h2 class=\"section-title\">Your Active Passbooks</h2>\n </div>\n\n <div class=\"schemes-grid\">\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\n <div class=\"scheme-header\">\n <div>\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || 'N/A' }}/Monthly</div>\n </div>\n <div class=\"scheme-date\">\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\n date:'dd-MM-yyyy') :\n 'N/A' }}</span>\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\n 'N/A' }}</span> -->\n </div>\n </div>\n\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\n {{\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\n }}\n </div>\n\n <div class=\"scheme-stats\">\n <div class=\"stat\">\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || 'N/A' }}</div>\n <div class=\"stat-label\">Deposited Amount</div>\n </div>\n <div class=\"stat\">\n <div class=\"stat-value\">\n {{\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\n (scheme?.schemePayments?.length -\n scheme.dueMonths) : 'N/A'\n }}\n </div>\n <div class=\"stat-label\">Paid Months</div>\n </div>\n <div class=\"stat\">\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\n scheme?.dueMonths : 'N/A' }}</div>\n <div class=\"stat-label\">Due Months</div>\n </div>\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || 'N/A' }} gms</div>\n <div class=\"stat-label\">Accumulated Gold</div>\n </div>\n </div>\n\n <div class=\"scheme-footer\">\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\n 'N/A' }}</span>\n </div>\n </div>\n </ng-container>\n\n <ng-template #showActiveScheme>\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\n <span>No Active Scheme</span>\n </div>\n </ng-template>\n </div>\n\n\n </div>\n\n <!-- <div class=\"auto-pay\">\n <div class=\"auto-pay-icon mobile-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\n <div class=\"auto-pay-content\">\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\n </div>\n <button class=\"manage-btn\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\n </div> -->\n </div>\n</ng-template>\n<ng-template #showCharges>\n <div class=\"payment-dialog\">\n <div class=\"dialog-header\">\n <h2>Payment Details</h2>\n <button class=\"close-btn\" mat-icon-button>\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"payment-content\">\n <div class=\"payment-row\">\n <span class=\"label\">Installment Amount:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Convenience Fee:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Payment Service Charges:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row total-row\">\n <span class=\"label total-label\">Total Amount:</span>\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n </div>\n </div>\n\n <div class=\"dialog-actions\">\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\n </div>\n </div>\n</ng-template>\n<ng-template #Scheme_Details>\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\n</ng-template>\n<ng-template #Transactions>\n <simpo-passbook-transactions></simpo-passbook-transactions>\n</ng-template>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n }\">\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;max-height:70vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px 0;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails", "data", "metalPrice"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }, { kind: "component", type: PassbookTransactionsComponent, selector: "simpo-passbook-transactions" }] }); }
|
|
19430
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserProfileComponent, isStandalone: true, selector: "simpo-user-profile", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\n [attr.style]=\"customClass\">\n <ng-container *ngIf=\"!isMobile\">\n <div class=\"p-4 profile-box shadow-lg\"\n style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\n [style.order]=\"styles?.swap ? '1' : '0'\">\n\n <!-- Profile Header Section -->\n <div class=\"d-flex align-items-center profile-header\"\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\n style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\n <div class=\"online-indicator\"\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\n </div>\n </div>\n\n <div class=\"profile-details flex-grow-1\">\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\n {{getUserDetails?.contact?.name}}</h4>\n\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\n <span>{{getUserDetails?.contact?.mobile}}</span>\n </h6>\n\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\n *ngIf=\"getUserDetails?.contact?.email?.length\"\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\n </h6>\n </div>\n </div>\n </div>\n\n <!-- Navigation Tabs Section -->\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\n <div class=\"d-flex align-items-center tab-item\"\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\n <div class=\"tab-icon-wrapper\"\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\n </div>\n\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\n {{tab.value}}</div>\n\n <!-- Hover effect background -->\n <div class=\"tab-hover-bg\"\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Action Buttons Section -->\n <div class=\"d-flex action-buttons\"\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\n Edit Profile\n </button>\n\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\n Logout\n </button>\n </div>\n </div>\n\n <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n <ng-container *ngSwitchCase=\"'Orders'\">\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Address'\">\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Account Details'\">\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Logout'\">\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Wishlist'\">\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Transactions'\">\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Try At Home'\">\n <simpo-list-home-appointment></simpo-list-home-appointment>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isMobile\">\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\n </div>\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n <ng-container *ngSwitchCase=\"''\">\n <section class=\"top-sec\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\n style=\"width: 50px; height: 50px;\">\n <div class=\"d-flex flex-column align-items-center\">\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\n <h6 class=\"d-flex align-items-center font-weight-normal\">\n <mat-icon>stay_primary_portrait</mat-icon>\n <span>{{getUserDetails?.contact?.mobile}}</span>\n </h6>\n <h6 class=\"d-flex align-items-center font-weight-normal\"\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\n <span>{{getUserDetails?.contact?.email}}</span>\n </h6>\n </div>\n </section>\n <section class=\"list-sec\">\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\n [style.color]=\"styles?.background?.accentColor\">\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\n {{tab.value}}</div>\n </div>\n\n </ng-container>\n </section>\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Orders'\">\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Address'\">\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Account Details'\">\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Logout'\">\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Wishlist'\">\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Transactions'\">\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Try At Home'\">\n <simpo-list-home-appointment></simpo-list-home-appointment>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n</section>\n\n<ng-template #OrderSection>\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\n <ng-container *ngFor=\"let tab of tabs\">\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\n {{tab.value}}</div>\n </ng-container>\n </div> -->\n <div class=\"order-list\">\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\n </div>\n </ng-container>\n <ng-template #showEmptyScreen>\n <section class=\"empty-cart m-auto\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"cart-text \">\n <ng-container *ngFor=\"let text of content?.inputText\">\n <div class=\"heading-medium d-flex justify-content-center content-side\"\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n <simpo-text-editor [(value)]=\"text.value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n\n </div>\n </ng-container>\n </div>\n </div>\n </section>\n </ng-template>\n </div>\n</ng-template>\n<ng-template #OrderDetails>\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\n</ng-template>\n<ng-template #AddressSection>\n <div class=\"d-flex justify-content-between mb-2\">\n <h3 class=\"title-text\">My Address</h3>\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n <div class=\"address-list\">\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\n <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\n <div class=\"card-body p-3\">\n <!-- Header Section -->\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\n <div class=\"icon-grp d-flex\">\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\n (click)=\"editAddress(idx)\">edit</mat-icon>\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"address-content mb-3\">\n <div class=\"address-line mb-2\">\n <span class=\"text-muted small d-block\">Address</span>\n <span class=\"address-text\">{{address.addressLine1}}</span>\n </div>\n <div class=\"phone-info\">\n <span class=\"text-muted small d-block\">Phone</span>\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n\n <ng-template #showEmptyAddress>\n <section class=\"empty-cart m-auto\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\n </div>\n <div class=\"cart-text\">\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\n </div>\n <!-- </ng-container> -->\n </div>\n </div>\n </section>\n </ng-template>\n </div>\n</ng-template>\n<ng-template #AccountsSection>\n <h3 class=\"onlyDesktop\">My Accounts</h3>\n</ng-template>\n<ng-template #LogoutSection>\n <h3 class=\"onlyDesktop\">Logout</h3>\n</ng-template>\n<ng-template #OrderCard let-order=\"data\">\n <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\n <!-- Header Section -->\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\n <div class=\"order-number\">\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\n </div>\n <div class=\"arrow-icon\">\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\n </div>\n </div>\n <div class=\"ordered-item row mb-2\">\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"item-img w-50\">\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\n </div>\n </ng-container>\n </div>\n <!-- Middle Section -->\n <div class=\"order-details\">\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\n <span class=\"text-muted small mb-3 mb-sm-0\">\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\n </span>\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center\">\n <div class=\"amount-section\">\n <span class=\"h5 mb-0 text-success fw-bold\">\n <span [innerHTML]=\"currency\"></span>\n {{(order.billDetails.discountAmount ?\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\n order?.billDetails?.totalTaxAfterDiscount) :\n order.billDetails.totalGrossValue) | number:'1.0-2'}}\n </span>\n </div>\n <div class=\"status-section\">\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\n </span>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #WishlistDetails>\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\n <div class=\"address-card mb-2\">\n <div class=\"card-body p-4\">\n <div class=\"row align-items-center\">\n <div class=\"col-auto\">\n <div class=\"product-image-wrapper\">\n <img loading=\"lazy\"\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\n </div>\n </div>\n <div class=\"col\">\n <div class=\"product-details\">\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\n <div\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\n {{item.itemName}}\n </h6>\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\n title=\"Remove from wishlist\">\n <mat-icon class=\"small-icon\">delete</mat-icon>\n </button>\n </div>\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"product-price mb-3\">\n <span class=\"h5 text-success fw-bold mb-0\">\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\n </span>\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\n ({{item.quantity}} items)\n </span>\n </div>\n <div class=\"action-buttons d-flex gap-2\">\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\n *ngIf=\"item.quantity\">\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\n (click)=\"addToFav(item, 'SUBSTRACT')\">\n -\n </button>\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\n {{item.quantity}}\n </span>\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\n (click)=\"addToFav(item, 'ADD')\"> +\n </button>\n </div>\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\n (click)=\"addToFav(item, 'ADD')\">\n + Add Quantity\n </button>\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\n Move to Cart\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n </div>\n </div>\n <ng-template #showEmptyWishlistScreen>\n <section class=\"empty-cart m-auto\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\n </div>\n <div class=\"cart-text\">\n <ng-container>\n <div class=\"heading-medium d-flex justify-content-center\">\n Your Wishlist is Empty</div>\n </ng-container>\n </div>\n </div>\n </section>\n </ng-template>\n</ng-template>\n\n<ng-template #SchemeDetails>\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\n <div class=\"row gap-2\">\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\n <div class=\"card-header row gap-2\">\n <div class=\"card-head-left col-7\">\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\n </div>\n <div class=\"card-head-right col-4 text-center align-content-center\">\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\n </div>\n </div>\n <div class=\"card-body d-flex p-0 mb-3\">\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\n class=\"w-40 mb-2\">\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\n <div class=\"card-sub-text text-center\">Total Acheived</div>\n </div>\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\n alt=\"\" class=\"w-40 mb-2\">\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\n <div class=\"card-sub-text text-center\">Rewards</div>\n </div>\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\n alt=\"\" class=\"w-40 mb-2\">\n <div class=\"card-text text-center fw-600\">8</div>\n <div class=\"card-sub-text text-center\">Due Months</div>\n </div>\n </div>\n <div class=\"card-footer row\">\n <div class=\"col-6 d-flex gap-2 p-0\">\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\n may 2025</span>\n </div>\n <div class=\"col-6 d-flex gap-2 p-0\">\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\n may 2026</span>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n<ng-template #SchemePassbook>\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\n <div class=\"header d-flex flex-column\">\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\n class=\"store-listing\" (change)=\"changeStore($event)\">\n <option value=\"\">Select Store</option>\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\n </select></div>\n <div class=\"scheme-overview d-flex flex-column\">\n <div class=\"d-flex gap-2\">\n <div class=\"available-savings\">\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\n <h3>Available Savings</h3>\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\n </div>\n\n <div class=\"amount\">{{totalSavings ? totalSavings :\n '0'}}</div>\n </div>\n <div class=\"active-schemes\">\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\n <h3>Active Passbooks</h3>\n <div class=\"auto-pay-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\n </div>\n </div>\n <div class=\"scheme-count\">{{totalSchemes?.length ?\n totalSchemes.length : '0'}}</div>\n <div class=\"subtitle\">On Track</div>\n </div>\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\n <h3>Accumulated Gold </h3>\n <div class=\"auto-pay-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\n </div>\n </div>\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\n </div>\n </div>\n <ng-container *ngIf=\"overAllDues?.length\">\n <div class=\"section d-flex-flex-column gap-2\">\n <div class=\"section-header\">\n <h2 class=\"section-title\">Due Payments</h2>\n </div>\n <div class=\"payment-list d-flex flex-column gap-2\">\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\n <div class=\"payment-info\">\n <div class=\"payment-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\n </div>\n <div class=\"payment-details\">\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\n 'N/A'}}\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\n ? payment.daysOverdue : 0}}</span> --></span>\n </div>\n </div>\n <div class=\"payment-amount\">\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\n '0'}}\n </div>\n <div class=\"payment-status overdue-status cursor-pointer\"\n (click)=\"payDue(payment)\">\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #showEmptyPayment>\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\n <span>No Due Payments</span>\n </div>\n </ng-template>\n </div>\n </div>\n </ng-container>\n\n </div>\n </div>\n\n <div class=\"section mt-3\">\n <div class=\"section-header\">\n <h2 class=\"section-title\">Your Active Passbooks</h2>\n </div>\n\n <div class=\"schemes-grid\">\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\n <div class=\"scheme-header\">\n <div>\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\n </div>\n <div class=\"scheme-date\">\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\n date:'dd-MM-yyyy') :\n 'N/A' }}</span>\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\n 'N/A' }}</span> -->\n </div>\n </div>\n\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\n {{\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\n }}\n </div>\n\n <div class=\"scheme-stats\">\n <div class=\"stat\">\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\n <div class=\"stat-label\">Deposited Amount</div>\n </div>\n <div class=\"stat\">\n <div class=\"stat-value\">\n {{\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\n (scheme?.schemePayments?.length -\n scheme.dueMonths) : 'N/A'\n }}\n </div>\n <div class=\"stat-label\">Paid Months</div>\n </div>\n <div class=\"stat\">\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\n scheme?.dueMonths : 'N/A' }}</div>\n <div class=\"stat-label\">Due Months</div>\n </div>\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\n <div class=\"stat-label\">Accumulated Gold</div>\n </div>\n </div>\n\n <div class=\"scheme-footer\">\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\n 'N/A' }}</span>\n </div>\n </div>\n </ng-container>\n\n <ng-template #showActiveScheme>\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\n <span>No Active Scheme</span>\n </div>\n </ng-template>\n </div>\n\n\n </div>\n\n <!-- <div class=\"auto-pay\">\n <div class=\"auto-pay-icon mobile-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\n <div class=\"auto-pay-content\">\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\n </div>\n <button class=\"manage-btn\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\n </div> -->\n </div>\n</ng-template>\n<ng-template #showCharges>\n <div class=\"payment-dialog\">\n <div class=\"dialog-header\">\n <h2>Payment Details</h2>\n <button class=\"close-btn\" mat-icon-button>\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"payment-content\">\n <div class=\"payment-row\">\n <span class=\"label\">Installment Amount:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Convenience Fee:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Payment Service Charges:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row total-row\">\n <span class=\"label total-label\">Total Amount:</span>\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n </div>\n </div>\n\n <div class=\"dialog-actions\">\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\n </div>\n </div>\n</ng-template>\n<ng-template #Scheme_Details>\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\n</ng-template>\n<ng-template #Transactions>\n <simpo-passbook-transactions></simpo-passbook-transactions>\n</ng-template>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n }\">\n</ngx-skeleton-loader>\n", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;max-height:70vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px 0;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: i7$1.NgxSkeletonLoaderComponent, selector: "ngx-skeleton-loader", inputs: ["count", "loadingText", "appearance", "animation", "ariaLabel", "theme"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "component", type: OrderDetailsComponent, selector: "simpo-order-details", inputs: ["responseData", "data", "index", "edit", "delete", "customClass", "orderDetailData"], outputs: ["goBackEmitter"] }, { kind: "ngmodule", type: NgxSkeletonLoaderModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i11$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "pipe", type: GenderIcon, name: "genderIcon" }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "component", type: SchemeDetailsComponent, selector: "simpo-scheme-details", inputs: ["schemeDetails", "data", "metalPrice"], outputs: ["gotoSchemeOverview"] }, { kind: "component", type: ListHomeAppointmentComponent, selector: "simpo-list-home-appointment" }, { kind: "component", type: PassbookTransactionsComponent, selector: "simpo-passbook-transactions" }] }); }
|
|
19308
19431
|
}
|
|
19309
19432
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserProfileComponent, decorators: [{
|
|
19310
19433
|
type: Component,
|
|
@@ -19331,7 +19454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
19331
19454
|
SchemeDetailsComponent,
|
|
19332
19455
|
ListHomeAppointmentComponent,
|
|
19333
19456
|
PassbookTransactionsComponent
|
|
19334
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\n [attr.style]=\"customClass\">\n <ng-container *ngIf=\"!isMobile\">\n <div class=\"p-4 profile-box shadow-lg\"\n style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\n [style.order]=\"styles?.swap ? '1' : '0'\">\n\n <!-- Profile Header Section -->\n <div class=\"d-flex align-items-center profile-header\"\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\n style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\n <div class=\"online-indicator\"\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\n </div>\n </div>\n\n <div class=\"profile-details flex-grow-1\">\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\n {{getUserDetails?.contact?.name}}</h4>\n\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\n <span>{{getUserDetails?.contact?.mobile}}</span>\n </h6>\n\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\n *ngIf=\"getUserDetails?.contact?.email?.length\"\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\n </h6>\n </div>\n </div>\n </div>\n\n <!-- Navigation Tabs Section -->\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\n <div class=\"d-flex align-items-center tab-item\"\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\n <div class=\"tab-icon-wrapper\"\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\n </div>\n\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\n {{tab.value}}</div>\n\n <!-- Hover effect background -->\n <div class=\"tab-hover-bg\"\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Action Buttons Section -->\n <div class=\"d-flex action-buttons\"\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\n Edit Profile\n </button>\n\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\n Logout\n </button>\n </div>\n </div>\n\n <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n <ng-container *ngSwitchCase=\"'Orders'\">\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Address'\">\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Account Details'\">\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Logout'\">\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Wishlist'\">\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Transactions'\">\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Try At Home'\">\n <simpo-list-home-appointment></simpo-list-home-appointment>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isMobile\">\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\n </div>\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n <ng-container *ngSwitchCase=\"''\">\n <section class=\"top-sec\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\n style=\"width: 50px; height: 50px;\">\n <div class=\"d-flex flex-column align-items-center\">\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\n <h6 class=\"d-flex align-items-center font-weight-normal\">\n <mat-icon>stay_primary_portrait</mat-icon>\n <span>{{getUserDetails?.contact?.mobile}}</span>\n </h6>\n <h6 class=\"d-flex align-items-center font-weight-normal\"\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\n <span>{{getUserDetails?.contact?.email}}</span>\n </h6>\n </div>\n </section>\n <section class=\"list-sec\">\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\n [style.color]=\"styles?.background?.accentColor\">\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\n {{tab.value}}</div>\n </div>\n\n </ng-container>\n </section>\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Orders'\">\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Address'\">\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Account Details'\">\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Logout'\">\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Wishlist'\">\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Transactions'\">\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Try At Home'\">\n <simpo-list-home-appointment></simpo-list-home-appointment>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n</section>\n\n<ng-template #OrderSection>\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\n <ng-container *ngFor=\"let tab of tabs\">\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\n {{tab.value}}</div>\n </ng-container>\n </div> -->\n <div class=\"order-list\">\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\n </div>\n </ng-container>\n <ng-template #showEmptyScreen>\n <section class=\"empty-cart m-auto\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"cart-text \">\n <ng-container *ngFor=\"let text of content?.inputText\">\n <div class=\"heading-medium d-flex justify-content-center content-side\"\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n <simpo-text-editor [(value)]=\"text.value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n\n </div>\n </ng-container>\n </div>\n </div>\n </section>\n </ng-template>\n </div>\n</ng-template>\n<ng-template #OrderDetails>\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\n</ng-template>\n<ng-template #AddressSection>\n <div class=\"d-flex justify-content-between mb-2\">\n <h3 class=\"title-text\">My Address</h3>\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n <div class=\"address-list\">\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\n <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\n <div class=\"card-body p-3\">\n <!-- Header Section -->\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\n <div class=\"icon-grp d-flex\">\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\n (click)=\"editAddress(idx)\">edit</mat-icon>\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"address-content mb-3\">\n <div class=\"address-line mb-2\">\n <span class=\"text-muted small d-block\">Address</span>\n <span class=\"address-text\">{{address.addressLine1}}</span>\n </div>\n <div class=\"phone-info\">\n <span class=\"text-muted small d-block\">Phone</span>\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n\n <ng-template #showEmptyAddress>\n <section class=\"empty-cart m-auto\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\n </div>\n <div class=\"cart-text\">\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\n </div>\n <!-- </ng-container> -->\n </div>\n </div>\n </section>\n </ng-template>\n </div>\n</ng-template>\n<ng-template #AccountsSection>\n <h3 class=\"onlyDesktop\">My Accounts</h3>\n</ng-template>\n<ng-template #LogoutSection>\n <h3 class=\"onlyDesktop\">Logout</h3>\n</ng-template>\n<ng-template #OrderCard let-order=\"data\">\n <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\n <!-- Header Section -->\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\n <div class=\"order-number\">\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\n </div>\n <div class=\"arrow-icon\">\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\n </div>\n </div>\n <div class=\"ordered-item row mb-2\">\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"item-img w-50\">\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\n </div>\n </ng-container>\n </div>\n <!-- Middle Section -->\n <div class=\"order-details\">\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\n <span class=\"text-muted small mb-3 mb-sm-0\">\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\n </span>\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center\">\n <div class=\"amount-section\">\n <span class=\"h5 mb-0 text-success fw-bold\">\n <span [innerHTML]=\"currency\"></span>\n {{(order.billDetails.discountAmount ?\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\n order?.billDetails?.totalTaxAfterDiscount) :\n order.billDetails.totalGrossValue) | number:'1.0-2'}}\n </span>\n </div>\n <div class=\"status-section\">\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\n </span>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #WishlistDetails>\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\n <div class=\"address-card mb-2\">\n <div class=\"card-body p-4\">\n <div class=\"row align-items-center\">\n <div class=\"col-auto\">\n <div class=\"product-image-wrapper\">\n <img loading=\"lazy\"\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\n </div>\n </div>\n <div class=\"col\">\n <div class=\"product-details\">\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\n <div\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\n {{item.itemName}}\n </h6>\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\n title=\"Remove from wishlist\">\n <mat-icon class=\"small-icon\">delete</mat-icon>\n </button>\n </div>\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"product-price mb-3\">\n <span class=\"h5 text-success fw-bold mb-0\">\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\n </span>\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\n ({{item.quantity}} items)\n </span>\n </div>\n <div class=\"action-buttons d-flex gap-2\">\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\n *ngIf=\"item.quantity\">\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\n (click)=\"addToFav(item, 'SUBSTRACT')\">\n -\n </button>\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\n {{item.quantity}}\n </span>\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\n (click)=\"addToFav(item, 'ADD')\"> +\n </button>\n </div>\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\n (click)=\"addToFav(item, 'ADD')\">\n + Add Quantity\n </button>\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\n Move to Cart\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n </div>\n </div>\n <ng-template #showEmptyWishlistScreen>\n <section class=\"empty-cart m-auto\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\n </div>\n <div class=\"cart-text\">\n <ng-container>\n <div class=\"heading-medium d-flex justify-content-center\">\n Your Wishlist is Empty</div>\n </ng-container>\n </div>\n </div>\n </section>\n </ng-template>\n</ng-template>\n\n<ng-template #SchemeDetails>\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\n <div class=\"row gap-2\">\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\n <div class=\"card-header row gap-2\">\n <div class=\"card-head-left col-7\">\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\n </div>\n <div class=\"card-head-right col-4 text-center align-content-center\">\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\n </div>\n </div>\n <div class=\"card-body d-flex p-0 mb-3\">\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\n class=\"w-40 mb-2\">\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\n <div class=\"card-sub-text text-center\">Total Acheived</div>\n </div>\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\n alt=\"\" class=\"w-40 mb-2\">\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\n <div class=\"card-sub-text text-center\">Rewards</div>\n </div>\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\n alt=\"\" class=\"w-40 mb-2\">\n <div class=\"card-text text-center fw-600\">8</div>\n <div class=\"card-sub-text text-center\">Due Months</div>\n </div>\n </div>\n <div class=\"card-footer row\">\n <div class=\"col-6 d-flex gap-2 p-0\">\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\n may 2025</span>\n </div>\n <div class=\"col-6 d-flex gap-2 p-0\">\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\n may 2026</span>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n<ng-template #SchemePassbook>\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\n <div class=\"header d-flex flex-column\">\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\n class=\"store-listing\" (change)=\"changeStore($event)\">\n <option value=\"\">Select Store</option>\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\n </select></div>\n <div class=\"scheme-overview d-flex flex-column\">\n <div class=\"d-flex gap-2\">\n <div class=\"available-savings\">\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\n <h3>Available Savings</h3>\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\n </div>\n\n <div class=\"amount\">{{totalSavings ? totalSavings :\n 'N/A'}}</div>\n </div>\n <div class=\"active-schemes\">\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\n <h3>Active Passbooks</h3>\n <div class=\"auto-pay-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\n </div>\n </div>\n <div class=\"scheme-count\">{{totalSchemes?.length ?\n totalSchemes.length : 'N/A'}}</div>\n <div class=\"subtitle\">On Track</div>\n </div>\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\n <h3>Accumulated Gold </h3>\n <div class=\"auto-pay-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\n </div>\n </div>\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\n </div>\n </div>\n <ng-container *ngIf=\"overAllDues?.length\">\n <div class=\"section d-flex-flex-column gap-2\">\n <div class=\"section-header\">\n <h2 class=\"section-title\">Due Payments</h2>\n </div>\n <div class=\"payment-list d-flex flex-column gap-2\">\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\n <div class=\"payment-info\">\n <div class=\"payment-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\n </div>\n <div class=\"payment-details\">\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\n 'N/A'}}\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\n ? payment.daysOverdue : 0}}</span> --></span>\n </div>\n </div>\n <div class=\"payment-amount\">\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\n 'N/A'}}\n </div>\n <div class=\"payment-status overdue-status cursor-pointer\"\n (click)=\"payDue(payment)\">\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #showEmptyPayment>\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\n <span>No Due Payments</span>\n </div>\n </ng-template>\n </div>\n </div>\n </ng-container>\n\n </div>\n </div>\n\n <div class=\"section mt-3\">\n <div class=\"section-header\">\n <h2 class=\"section-title\">Your Active Passbooks</h2>\n </div>\n\n <div class=\"schemes-grid\">\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\n <div class=\"scheme-header\">\n <div>\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || 'N/A' }}/Monthly</div>\n </div>\n <div class=\"scheme-date\">\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\n date:'dd-MM-yyyy') :\n 'N/A' }}</span>\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\n 'N/A' }}</span> -->\n </div>\n </div>\n\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\n {{\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\n }}\n </div>\n\n <div class=\"scheme-stats\">\n <div class=\"stat\">\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || 'N/A' }}</div>\n <div class=\"stat-label\">Deposited Amount</div>\n </div>\n <div class=\"stat\">\n <div class=\"stat-value\">\n {{\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\n (scheme?.schemePayments?.length -\n scheme.dueMonths) : 'N/A'\n }}\n </div>\n <div class=\"stat-label\">Paid Months</div>\n </div>\n <div class=\"stat\">\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\n scheme?.dueMonths : 'N/A' }}</div>\n <div class=\"stat-label\">Due Months</div>\n </div>\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || 'N/A' }} gms</div>\n <div class=\"stat-label\">Accumulated Gold</div>\n </div>\n </div>\n\n <div class=\"scheme-footer\">\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\n 'N/A' }}</span>\n </div>\n </div>\n </ng-container>\n\n <ng-template #showActiveScheme>\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\n <span>No Active Scheme</span>\n </div>\n </ng-template>\n </div>\n\n\n </div>\n\n <!-- <div class=\"auto-pay\">\n <div class=\"auto-pay-icon mobile-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\n <div class=\"auto-pay-content\">\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\n </div>\n <button class=\"manage-btn\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\n </div> -->\n </div>\n</ng-template>\n<ng-template #showCharges>\n <div class=\"payment-dialog\">\n <div class=\"dialog-header\">\n <h2>Payment Details</h2>\n <button class=\"close-btn\" mat-icon-button>\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"payment-content\">\n <div class=\"payment-row\">\n <span class=\"label\">Installment Amount:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Convenience Fee:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Payment Service Charges:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row total-row\">\n <span class=\"label total-label\">Total Amount:</span>\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n </div>\n </div>\n\n <div class=\"dialog-actions\">\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\n </div>\n </div>\n</ng-template>\n<ng-template #Scheme_Details>\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\n</ng-template>\n<ng-template #Transactions>\n <simpo-passbook-transactions></simpo-passbook-transactions>\n</ng-template>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n }\">\n</ngx-skeleton-loader>", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;max-height:70vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px 0;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}\n"] }]
|
|
19457
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<section *ngIf=\"!isLoading\" class=\"d-flex w-100 total-container\" [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\"\n [spacingHorizontal]=\"styles?.layout\" [ngStyle]=\"{'max-height': '100vh', 'z-index': isMobile ? '100000000' : ''}\"\n [ngClass]=\"{'position-absolute top-0': isMobile}\" simpoHover (hovering)=\"showEditTabs($event)\"\n [attr.style]=\"customClass\">\n <ng-container *ngIf=\"!isMobile\">\n <div class=\"p-4 profile-box shadow-lg\"\n style=\"width: 25%; border-radius: 20px; height: fit-content; background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); border: 1px solid rgba(0,0,0,0.05);\"\n [style.order]=\"styles?.swap ? '1' : '0'\">\n\n <!-- Profile Header Section -->\n <div class=\"d-flex align-items-center profile-header\"\n style=\"gap: 15px; height: 80px; margin-bottom: 20px; padding: 15px; background: rgba(255,255,255,0.8); border-radius: 15px; backdrop-filter: blur(10px);\">\n <div class=\"profile-image-wrapper\" style=\"position: relative;\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle h-100 profile-icon\"\n style=\"border: 3px solid #e3f2fd; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: all 0.3s ease;\">\n <div class=\"online-indicator\"\n style=\"position: absolute; bottom: 2px; right: 2px; width: 12px; height: 12px; background: #4caf50; border: 2px solid white; border-radius: 50%;\">\n </div>\n </div>\n\n <div class=\"profile-details flex-grow-1\">\n <h4 class=\"font-weight-bold mb-2\" style=\"color: #2c3e50; font-size: 1.1rem; margin-bottom: 8px;\">\n {{getUserDetails?.contact?.name}}</h4>\n\n <div class=\"contact-info\" style=\"display: flex; flex-direction: column; gap: 6px;\">\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\n *ngIf=\"getUserDetails?.contact?.mobile?.length\"\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">stay_primary_portrait</mat-icon>\n <span>{{getUserDetails?.contact?.mobile}}</span>\n </h6>\n\n <h6 class=\"d-flex align-items-center font-weight-normal contact-item\"\n *ngIf=\"getUserDetails?.contact?.email?.length\"\n style=\"margin: 0; color: #6c757d; font-size: 0.85rem; transition: color 0.3s ease;\">\n <mat-icon style=\"font-size: 16px; margin-right: 8px;\">mail_outline</mat-icon>\n <span class=\"w-100 text-overflow\">{{getUserDetails?.contact?.email}}</span>\n </h6>\n </div>\n </div>\n </div>\n\n <!-- Navigation Tabs Section -->\n <div class=\"tabs-container\" style=\"margin-bottom: 20px;\">\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\n <div class=\"d-flex align-items-center tab-item\"\n style=\"gap: 12px; cursor: pointer; padding: 16px 12px; margin: 2px 0; border-radius: 12px; transition: all 0.3s ease; position: relative; overflow: hidden;\"\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '1px solid rgba(0,0,0,0.06)' : ''\"\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"toggleSidepanelTab(tab)\"\n [style.backgroundColor]=\"tab.status ? styles?.background?.color : 'transparent'\"\n [style.borderColor]=\"tab.status ? styles?.background?.accentColor : 'transparent'\">\n <div class=\"tab-icon-wrapper\"\n style=\"width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;\">\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\n style=\"height: 20px; width: 20px; object-fit: contain; transition: transform 0.3s ease;\">\n </div>\n\n <div class=\"tab-label font-weight-normal\" style=\"font-size: 0.9rem; transition: all 0.3s ease;\">\n {{tab.value}}</div>\n\n <!-- Hover effect background -->\n <div class=\"tab-hover-bg\"\n style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,123,255,0.05) 0%, rgba(0,123,255,0.02) 100%); opacity: 0; transition: opacity 0.3s ease; z-index: -1;\">\n </div>\n </div>\n </ng-container>\n </div>\n\n <!-- Action Buttons Section -->\n <div class=\"d-flex action-buttons\"\n style=\"gap: 10px; padding-top: 15px; border-top: 1px solid rgba(0,0,0,0.06);\">\n <button class=\"edit-btn flex-grow-1\" [style.borderColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\"\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; background: transparent; border: 2px solid; transition: all 0.3s ease; position: relative; overflow: hidden;\">\n Edit Profile\n </button>\n\n <button class=\"logout-btn flex-grow-1\" [style.backgroundColor]=\"styles?.background?.accentColor\"\n [simpoColor]=\"styles?.background?.accentColor\" (click)=\"logout()\"\n style=\"padding: 12px 20px; border-radius: 10px; font-weight: 500; font-size: 0.9rem; border: none; color: white; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.15);\">\n Logout\n </button>\n </div>\n </div>\n\n <div class=\"orders-sec shadow-lg\" [style.order]=\"styles?.swap ? '0' : '1'\">\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n <ng-container *ngSwitchCase=\"'Orders'\">\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Address'\">\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Account Details'\">\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Logout'\">\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Wishlist'\">\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme Details'\">\n <ng-container *ngTemplateOutlet=\"SchemeDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Transactions'\">\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Try At Home'\">\n <simpo-list-home-appointment></simpo-list-home-appointment>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"isMobile\">\n <div class=\"w-100 position-relative mobile-height\" style=\"height: 80vh;\">\n <div class=\"d-flex align-items-center mobileAccountHeader\" style=\"gap: 10px; height: 50px;\"\n *ngIf=\"selectedSidePanelTab != 'Scheme_Details'\">\n <mat-icon style=\"cursor: pointer; display: flex; align-items: center;\"\n (click)=\"goBack()\">keyboard_backspace</mat-icon>\n <h4>My {{!selectedSidePanelTab?.length ? 'Account' : selectedSidePanelTab?.replaceAll('_', ' ')}}</h4>\n </div>\n <ng-container [ngSwitch]=\"selectedSidePanelTab\">\n <ng-container *ngSwitchCase=\"''\">\n <section class=\"top-sec\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"userGender | genderIcon\" alt=\"\" class=\"rounded-circle\"\n style=\"width: 50px; height: 50px;\">\n <div class=\"d-flex flex-column align-items-center\">\n <h4 class=\"font-weight-bold\">{{getUserDetails?.contact?.name}}</h4>\n <h6 class=\"d-flex align-items-center font-weight-normal\">\n <mat-icon>stay_primary_portrait</mat-icon>\n <span>{{getUserDetails?.contact?.mobile}}</span>\n </h6>\n <h6 class=\"d-flex align-items-center font-weight-normal\"\n *ngIf=\"getUserDetails?.contact?.email\"><mat-icon>mail_outline</mat-icon>\n <span>{{getUserDetails?.contact?.email}}</span>\n </h6>\n </div>\n </section>\n <section class=\"list-sec\">\n <ng-container *ngFor=\"let tab of sidePanelList; let idx = index\">\n <div class=\"d-flex align-items-center py-3\" style=\"gap: 5px; cursor: pointer;\"\n [style.borderBottom]=\"idx != (sidePanelList.length -1) ? '2px solid #cccccc4d' : ''\"\n [ngClass]=\"{'tab-selected': tab.status}\" (click)=\"goToPanel(tab)\">\n <img [src]=\"tab.image | genderIcon\" alt=\"\"\n [style.color]=\"styles?.background?.accentColor\">\n <div class=\"tab font-weight-normal\" [style.color]=\"styles?.background?.accentColor\">\n {{tab.value}}</div>\n </div>\n\n </ng-container>\n </section>\n <div class=\"d-flex\" style=\"gap: 5px; margin-top: 10px;\">\n <button class=\"edit-btn\" [style.borderColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.accentColor\" (click)=\"editProfile()\">Edit</button>\n <button class=\"logout-btn\" [style.backgroundColor]=\"styles?.background?.accentColor\"\n [style.color]=\"styles?.background?.color\" (click)=\"logout()\">Logout</button>\n </div>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"'Orders'\">\n <ng-container *ngTemplateOutlet=\"OrderSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Address'\">\n <ng-container *ngTemplateOutlet=\"AddressSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Account Details'\">\n <ng-container *ngTemplateOutlet=\"AccountsSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Logout'\">\n <ng-container *ngTemplateOutlet=\"LogoutSection\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Wishlist'\">\n <ng-container *ngTemplateOutlet=\"WishlistDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Orders_Details'\">\n <ng-container *ngTemplateOutlet=\"OrderDetails\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme Passbook'\">\n <ng-container *ngTemplateOutlet=\"SchemePassbook\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Scheme_Details'\">\n <ng-container *ngTemplateOutlet=\"Scheme_Details\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Transactions'\">\n <ng-container *ngTemplateOutlet=\"Transactions\"></ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"'Try At Home'\">\n <simpo-list-home-appointment></simpo-list-home-appointment>\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\n [isEcommerce]=\"true\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n\n</section>\n\n<ng-template #OrderSection>\n <h3 class=\"onlyDesktop mb-3\">My Orders</h3>\n <!-- <div class=\"d-flex my-3 orderlist onlyDesktop\">\n <ng-container *ngFor=\"let tab of tabs\">\n <div class=\"filter-tab\" [ngClass]=\"{'filter-tab-selected': tab.status}\" (click)=\"selectTab(tab)\">\n {{tab.value}}</div>\n </ng-container>\n </div> -->\n <div class=\"order-list\">\n <ng-container *ngIf=\"orderList?.length; else showEmptyScreen\">\n <div class=\"order\" [style.width]=\"getProductWidth\" *ngFor=\"let order of orderList\">\n <ng-container *ngTemplateOutlet=\"OrderCard; context: {data: order}\"></ng-container>\n </div>\n </ng-container>\n <ng-template #showEmptyScreen>\n <section class=\"empty-cart m-auto\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\" [appImageEditor]=\"edit || false\"\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\">\n </div>\n <div class=\"cart-text \">\n <ng-container *ngFor=\"let text of content?.inputText\">\n <div class=\"heading-medium d-flex justify-content-center content-side\"\n [ngClass]=\"{'heading-medium': text.label == 'Heading', 'description': text.label == 'Text'}\">\n <simpo-text-editor [(value)]=\"text.value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n\n </div>\n </ng-container>\n </div>\n </div>\n </section>\n </ng-template>\n </div>\n</ng-template>\n<ng-template #OrderDetails>\n <simpo-order-details [data]=\"data\" [orderDetailData]=\"orderDetailsData\"\n (goBackEmitter)=\"selectedSidePanelTab = 'Orders'\"></simpo-order-details>\n</ng-template>\n<ng-template #AddressSection>\n <div class=\"d-flex justify-content-between mb-2\">\n <h3 class=\"title-text\">My Address</h3>\n <button class=\"address-btn\" (click)=\"addNewAddress()\"\n [style.backgroundColor]=\"styles?.background?.accentColor\">{{data?.action?.buttons?.[0]?.content?.label}}</button>\n </div>\n <div class=\"address-list\">\n <ng-container *ngIf=\"userDetails?.addressDetailsList?.length; else showEmptyAddress\">\n <ng-container *ngFor=\"let address of userDetails?.addressDetailsList; let idx = index\">\n <div class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card \" [style.width]=\"getProductWidth\">\n <div class=\"card-body p-3\">\n <!-- Header Section -->\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <div class=\"address-info d-flex align-items-center justify-content-between w-100\">\n <h4 class=\"mb-0 fw-semibold\">{{address.receiverName}}</h4>\n <div class=\"icon-grp d-flex\">\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\n (click)=\"editAddress(idx)\">edit</mat-icon>\n <mat-icon class=\"small-icon me-1 d-flex align-items-center justify-content-center\"\n (click)=\"deleteAddress(idx)\">delete_outline</mat-icon>\n </div>\n </div>\n </div>\n <div class=\"address-content mb-3\">\n <div class=\"address-line mb-2\">\n <span class=\"text-muted small d-block\">Address</span>\n <span class=\"address-text\">{{address.addressLine1}}</span>\n </div>\n <div class=\"phone-info\">\n <span class=\"text-muted small d-block\">Phone</span>\n <span class=\"phone-number fw-bold\">{{address.receiverPhone}}</span>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n </ng-container>\n\n\n <ng-template #showEmptyAddress>\n <section class=\"empty-cart m-auto\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n src=\"https://i.postimg.cc/25rT8Wwp/6216797.jpg\" [alt]=\"content?.image?.altText\">\n </div>\n <div class=\"cart-text\">\n <!-- <ng-container *ngFor=\"let text of content?.inputText\"> -->\n <div class=\"heading-medium d-flex justify-content-center\">No address added</div>\n <div class=\"description d-flex justify-content-center\">Please provide address for easy delivery\n </div>\n <!-- </ng-container> -->\n </div>\n </div>\n </section>\n </ng-template>\n </div>\n</ng-template>\n<ng-template #AccountsSection>\n <h3 class=\"onlyDesktop\">My Accounts</h3>\n</ng-template>\n<ng-template #LogoutSection>\n <h3 class=\"onlyDesktop\">Logout</h3>\n</ng-template>\n<ng-template #OrderCard let-order=\"data\">\n <div (click)=\"goToOrderDetails(order)\" class=\"card shadow-sm border-0 mb-2 cursor-pointer order-card\">\n <div class=\"card-body p-3\" [style.--background-color]=\"styles?.background?.color\">\n <!-- Header Section -->\n <div class=\"d-flex justify-content-between align-items-center mb-1\">\n <div class=\"order-number\">\n <h4 class=\"mb-0 fw-semibold\">{{\"Order\" + \" \" + order.orderNum}}</h4>\n </div>\n <div class=\"arrow-icon\">\n <mat-icon class=\"text-muted\">arrow_forward_ios</mat-icon>\n </div>\n </div>\n <div class=\"ordered-item row mb-2\">\n <ng-container *ngFor=\"let item of getOrderedItems(order)\">\n <div class=\"item-card col-4 d-flex flex-column align-items-center justify-content-center\">\n <img [src]=\"item?.imgUrl\" alt=\"Product Image\"\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"item-img w-50\">\n <div class=\"cart-item-name\">{{item?.itemName}}</div>\n </div>\n </ng-container>\n </div>\n <!-- Middle Section -->\n <div class=\"order-details\">\n <div class=\"d-flex flex-column flex-sm-row justify-content-between align-items-start mb-1\">\n <span class=\"text-muted small mb-3 mb-sm-0\">\n {{order.createdTimeStamp | date: 'dd MMMM yyyy'}}\n </span>\n </div>\n </div>\n <div class=\"d-flex justify-content-between align-items-center\">\n <div class=\"amount-section\">\n <span class=\"h5 mb-0 text-success fw-bold\">\n <span [innerHTML]=\"currency\"></span>\n {{(order.billDetails.discountAmount ?\n (order?.billDetails?.totalNetValue - order?.billDetails?.discountAmount +\n order?.billDetails?.totalTaxAfterDiscount) :\n order.billDetails.totalGrossValue) | number:'1.0-2'}}\n </span>\n </div>\n <div class=\"status-section\">\n <span [attr.class]=\"order?.brandOrderDetails?.[0]?.orderStatus + ' order-status'\">\n {{order?.brandOrderDetails?.[0]?.orderStatus.replaceAll(\"_\", \" \") | titlecase}}\n </span>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n\n<ng-template #WishlistDetails>\n <h3 class=\"onlyDesktop\">My Wishlist</h3>\n <div class=\"wishlist-list\" *ngIf=\"wishlistData?.length; else showEmptyWishlistScreen\">\n <div class=\"d-flex flex-wrap\" style=\"gap: 10px;\">\n <ng-container *ngFor=\"let item of wishlistData; let idx = index\">\n <div class=\"address-card mb-2\">\n <div class=\"card-body p-4\">\n <div class=\"row align-items-center\">\n <div class=\"col-auto\">\n <div class=\"product-image-wrapper\">\n <img loading=\"lazy\"\n onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n class=\"product-img rounded\" [src]=\"item.imgUrl\" alt=\"Product Image\">\n </div>\n </div>\n <div class=\"col\">\n <div class=\"product-details\">\n <div class=\"d-flex justify-content-between align-items-center mb-3\">\n <div\n class=\"col-auto text-end d-flex justify-content-between align-items-center w-100\">\n <h6 class=\"product-name mb-2 fw-semibold text-dark\">\n {{item.itemName}}\n </h6>\n <div class=\"delete-action\" *ngIf=\"!isMobile\">\n <button class=\"btn btn-sm delete-btn\" (click)=\"deleteFromWhislist(item)\"\n title=\"Remove from wishlist\">\n <mat-icon class=\"small-icon\">delete</mat-icon>\n </button>\n </div>\n <div class=\"delete-action mt-2\" *ngIf=\"isMobile\">\n <button class=\"btn btn-sm w-100\" (click)=\"deleteFromWhislist(item)\">\n <mat-icon class=\"small-icon me-1\">delete</mat-icon>\n </button>\n </div>\n </div>\n </div>\n <div class=\"product-price mb-3\">\n <span class=\"h5 text-success fw-bold mb-0\">\n <span [innerHTML]='currency'></span>{{item.discountedPrice}}\n </span>\n <span class=\"text-muted small ms-2\" *ngIf=\"item.quantity\">\n ({{item.quantity}} items)\n </span>\n </div>\n <div class=\"action-buttons d-flex gap-2\">\n <div class=\"quantity-controls d-flex align-items-center w-50 justify-content-center\"\n *ngIf=\"item.quantity\">\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\n (click)=\"addToFav(item, 'SUBSTRACT')\">\n -\n </button>\n <span class=\"quantity-display px-3 py-1 bg-light rounded mx-1\">\n {{item.quantity}}\n </span>\n <button class=\"btn btn-outline-secondary btn-sm quantity-btn\"\n (click)=\"addToFav(item, 'ADD')\"> +\n </button>\n </div>\n <button class=\"btn btn-sm w-50\" *ngIf=\"!item.quantity\"\n (click)=\"addToFav(item, 'ADD')\">\n + Add Quantity\n </button>\n <button class=\"btn btn-sm w-50\" (click)=\"moveToCart(item)\">\n Move to Cart\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n </div>\n </div>\n <ng-template #showEmptyWishlistScreen>\n <section class=\"empty-cart m-auto\">\n <div>\n <div class=\"cart-image\">\n <img loading=\"lazy\" onerror=\"this.src='https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\n [src]=\"content?.image?.url\" [alt]=\"content?.image?.altText\">\n </div>\n <div class=\"cart-text\">\n <ng-container>\n <div class=\"heading-medium d-flex justify-content-center\">\n Your Wishlist is Empty</div>\n </ng-container>\n </div>\n </div>\n </section>\n </ng-template>\n</ng-template>\n\n<ng-template #SchemeDetails>\n <div class=\"header mb-3 f-18 fw-600\">Current Scheme Enrollments - 4</div>\n <div class=\"row gap-2\">\n <ng-container *ngFor=\"let scheme of [1,1,1,1]\">\n <div class=\"cards d-flex flex-column w-32 mb-2 p-0 \">\n <div class=\"card-header row gap-2\">\n <div class=\"card-head-left col-7\">\n <div class=\"scheme-type fs-15 fw-600\">Group Investment Scheme</div>\n <div class=\"scheme-id fw-600\">GIS6K_000231004</div>\n </div>\n <div class=\"card-head-right col-4 text-center align-content-center\">\n <div class=\"scheme-amount fw-600\">\u20B96,000/M</div>\n </div>\n </div>\n <div class=\"card-body d-flex p-0 mb-3\">\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/425719c1752566628577star.png\" alt=\"\"\n class=\"w-40 mb-2\">\n <div class=\"card-text text-center fw-600\">\u20B913,800</div>\n <div class=\"card-sub-text text-center\">Total Acheived</div>\n </div>\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/229997c1752567131192brand_7959220.png\"\n alt=\"\" class=\"w-40 mb-2\">\n <div class=\"card-text text-center fw-600\">\u20B91,000</div>\n <div class=\"card-sub-text text-center\">Rewards</div>\n </div>\n <div class=\"col-4 d-flex flex-column align-items-center justify-content-center\">\n <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/760761c1752567279970calendar (1).png\"\n alt=\"\" class=\"w-40 mb-2\">\n <div class=\"card-text text-center fw-600\">8</div>\n <div class=\"card-sub-text text-center\">Due Months</div>\n </div>\n </div>\n <div class=\"card-footer row\">\n <div class=\"col-6 d-flex gap-2 p-0\">\n <span class=\"footer-text text-nowrap\">Start On :</span><span class=\"date-text text-nowrap\">30\n may 2025</span>\n </div>\n <div class=\"col-6 d-flex gap-2 p-0\">\n <span class=\"footer-text text-nowrap\">Maturity On :</span><span class=\"date-text text-nowrap\">25\n may 2026</span>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n</ng-template>\n<ng-template #SchemePassbook>\n <div class=\"w-100 h-100 overflow-scroll passbook_container\">\n <div class=\"header d-flex flex-column\">\n <div class=\"d-flex align-items-center justify-content-end mb-3\" *ngIf=\"storeListing.length >= 2\"><select\n class=\"store-listing\" (change)=\"changeStore($event)\">\n <option value=\"\">Select Store</option>\n <option [value]=\"store.id\" *ngFor=\"let store of storeListing\">{{store.storeName}}</option>\n </select></div>\n <div class=\"scheme-overview d-flex flex-column\">\n <div class=\"d-flex gap-2\">\n <div class=\"available-savings\">\n <div class=\"d-flex align-items-center gap-1 w-100 justify-content-between\">\n <h3>Available Savings</h3>\n <span class=\"amount_logo\">\uD83D\uDCB0</span>\n </div>\n\n <div class=\"amount\">{{totalSavings ? totalSavings :\n '0'}}</div>\n </div>\n <div class=\"active-schemes\">\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\n <h3>Active Passbooks</h3>\n <div class=\"auto-pay-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">\n </div>\n </div>\n <div class=\"scheme-count\">{{totalSchemes?.length ?\n totalSchemes.length : '0'}}</div>\n <div class=\"subtitle\">On Track</div>\n </div>\n <div class=\"active-schemes\" *ngIf=\"totalAccumulatedGold > 0\">\n <div class=\"active-schemes-header d-flex align-items-center justify-content-between\">\n <h3>Accumulated Gold </h3>\n <div class=\"auto-pay-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/153448c1756808418216accumulated_icon.png\">\n </div>\n </div>\n <div class=\"scheme-count\">{{totalAccumulatedGold}} gms</div>\n </div>\n </div>\n <ng-container *ngIf=\"overAllDues?.length\">\n <div class=\"section d-flex-flex-column gap-2\">\n <div class=\"section-header\">\n <h2 class=\"section-title\">Due Payments</h2>\n </div>\n <div class=\"payment-list d-flex flex-column gap-2\">\n <ng-container *ngIf=\"overAllDues?.length; else showEmptyPayment\">\n <div class=\"payment-item overdue\" *ngFor=\"let payment of overAllDues\">\n <div class=\"payment-info\">\n <div class=\"payment-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/403142c1753435378127Background.svg\">\n <!-- <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\"\n *ngIf=\"!payment.overdueStatus && payment.paymentStatus === 'PAID'\"> -->\n </div>\n <div class=\"payment-details\">\n <h4>{{payment.schemeName}} - {{payment.emiMonthCount}}rd EMI</h4>\n <span>Date {{payment.dueDate ? (payment.dueDate | date:'dd-MM-yyyy') :\n 'N/A'}}\n <!-- <span *ngIf=\"payment.overdueStatus\">| Due by: {{payment.daysOverdue\n ? payment.daysOverdue : 0}}</span> --></span>\n </div>\n </div>\n <div class=\"payment-amount\">\n <div class=\"amount-value\">\u20B9{{payment.dueAmount ? payment.dueAmount :\n '0'}}\n </div>\n <div class=\"payment-status overdue-status cursor-pointer\"\n (click)=\"payDue(payment)\">\n <ng-container *ngIf=\"!payDueLoader\">Pay Now</ng-container>\n <ng-container *ngIf=\"payDueLoader\">Loading...</ng-container>\n </div>\n </div>\n </div>\n </ng-container>\n <ng-template #showEmptyPayment>\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\n <span>No Due Payments</span>\n </div>\n </ng-template>\n </div>\n </div>\n </ng-container>\n\n </div>\n </div>\n\n <div class=\"section mt-3\">\n <div class=\"section-header\">\n <h2 class=\"section-title\">Your Active Passbooks</h2>\n </div>\n\n <div class=\"schemes-grid\">\n <ng-container *ngIf=\"totalSchemes && totalSchemes.length > 0; else showActiveScheme\">\n <div class=\"scheme-card d-flex flex-column gap-2 cursor-pointer\"\n *ngFor=\"let scheme of totalSchemes; let i = index\" (click)=\"viewSchemeDetails(scheme)\">\n <div class=\"scheme-header\">\n <div>\n <div class=\"scheme-title\">{{ scheme?.schemeName || 'N/A' }}</div>\n <div class=\"scheme-amount\">\u20B9{{ scheme?.installmentAmount || '0' }}/Monthly</div>\n </div>\n <div class=\"scheme-date\">\n <span>Enrolled: {{ scheme?.createdTimestamp ? (scheme?.createdTimestamp |\n date:'dd-MM-yyyy') :\n 'N/A' }}</span>\n <!-- <span>Maturity: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\n 'N/A' }}</span> -->\n </div>\n </div>\n\n <div class=\"scheme-status d-flex justify-content-center align-items-center\"\n [ngClass]=\"scheme?.passBookStatus === 'REDEEM_REQUESTED' ? 'redeem_status' : (scheme?.passBookStatus === 'ACTIVE' ? 'active-status' : 'redeem_status')\">\n {{\n scheme.passBookStatus ? scheme.passBookStatus.replaceAll('_', ' ') : 'N/A'\n }}\n </div>\n\n <div class=\"scheme-stats\">\n <div class=\"stat\">\n <div class=\"stat-value\">{{ scheme?.totalPaidAmount || '0' }}</div>\n <div class=\"stat-label\">Deposited Amount</div>\n </div>\n <div class=\"stat\">\n <div class=\"stat-value\">\n {{\n scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\n (scheme?.schemePayments?.length -\n scheme.dueMonths) : 'N/A'\n }}\n </div>\n <div class=\"stat-label\">Paid Months</div>\n </div>\n <div class=\"stat\">\n <div class=\"stat-value\">{{scheme?.dueMonths != null && scheme?.dueMonths != undefined ?\n scheme?.dueMonths : 'N/A' }}</div>\n <div class=\"stat-label\">Due Months</div>\n </div>\n <div class=\"stat\" *ngIf=\"scheme?.schemeType === 'GOLD_PROTECTION'\">\n <div class=\"stat-value\">{{ scheme?.totalInvestedMetal || '0' }} gms</div>\n <div class=\"stat-label\">Accumulated Gold</div>\n </div>\n </div>\n\n <div class=\"scheme-footer\">\n <span>Maturity Date: {{ scheme?.maturityDate ? (scheme?.maturityDate | date:'dd-MM-yyyy') :\n 'N/A' }}</span>\n </div>\n </div>\n </ng-container>\n\n <ng-template #showActiveScheme>\n <div class=\"no-data w-100 h-100 d-flex justify-content-center align-items-center\">\n <span>No Active Scheme</span>\n </div>\n </ng-template>\n </div>\n\n\n </div>\n\n <!-- <div class=\"auto-pay\">\n <div class=\"auto-pay-icon mobile-icon\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/966462c1753439662355Background.png\"></div>\n <div class=\"auto-pay-content\">\n <div class=\"auto-pay-title\">Manage Auto-pay</div>\n <div class=\"auto-pay-desc\">Pause, resume or cancel auto payment subscription</div>\n </div>\n <button class=\"manage-btn\"><img\n src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/409230c1753439564830SVG.png\"> Manage</button>\n </div> -->\n </div>\n</ng-template>\n<ng-template #showCharges>\n <div class=\"payment-dialog\">\n <div class=\"dialog-header\">\n <h2>Payment Details</h2>\n <button class=\"close-btn\" mat-icon-button>\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"payment-content\">\n <div class=\"payment-row\">\n <span class=\"label\">Installment Amount:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Convenience Fee:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Payment Service Charges:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row total-row\">\n <span class=\"label total-label\">Total Amount:</span>\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n </div>\n </div>\n\n <div class=\"dialog-actions\">\n <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\n </div>\n </div>\n</ng-template>\n<ng-template #Scheme_Details>\n <simpo-scheme-details [schemeDetails]=\"schemeDetails\" [data]=\"data\" [metalPrice]=\"metalPrice\"\n (gotoSchemeOverview)=\"selectedSidePanelTab = 'Scheme Passbook'\"></simpo-scheme-details>\n</ng-template>\n<ng-template #Transactions>\n <simpo-passbook-transactions></simpo-passbook-transactions>\n</ng-template>\n<ngx-skeleton-loader *ngIf=\"isLoading\" count=\"1\" appearance=\"circle\" [theme]=\"{\n width: '100%',\n height: '40vh',\n 'border-radius': '10px',\n 'position': 'relative',\n 'right': '5px'\n }\">\n</ngx-skeleton-loader>\n", styles: [".total-container{position:relative;height:auto;overflow:scroll;background:#fff!important}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.mat-icon{font-size:18px;height:100%}div{font-size:16px}h6{font-size:14px}.tab-selected div{font-weight:600!important}.list-sec img{height:20px;width:20px}.edit-icon{background-color:#d3d3d333;padding:10px;font-size:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;right:-35px;cursor:pointer}.filter-tab{background-color:#d3d3d3;color:#000;margin:0 5px 0 0;padding:5px;border-radius:5px;width:130px;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer}.filter-tab-selected{background-color:#000;color:#fff}.orders-sec{width:80%;margin-left:20px;padding:15px;overflow-y:auto;overflow-x:hidden;border:1px solid #d3d3d324;border-radius:20px;max-height:70vh}.order-list{display:flex;flex-wrap:wrap;gap:10px}.order :is(.top,.middle,.bottom){display:flex;align-items:center;justify-content:space-between}.address-list{display:flex;flex-wrap:wrap;gap:10px;overflow-y:auto}.address-list .address{display:flex;padding:15px;border-radius:5px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030;border:1px solid #d3d3d3b1;height:150px}.address-list .address-left{width:80%}.address-list .address-right{display:flex;justify-content:end;gap:10px;width:20%}.address-list .address-right .mat-icon{cursor:pointer}.address-list .address-phone{margin-left:10px}.address-list .address-type{background-color:#d3d3d34a;padding:5px 10px;text-align:center;border-radius:5px;margin-left:15px}.address-list .address-det{margin:10px 0}.address-btn{width:160px!important;color:#fff;border-radius:3px;border:none;font-size:14px!important;height:fit-content;padding:10px}.profileDet{display:flex;flex-direction:column}.cursor-pointer{cursor:pointer}.profile-box{box-shadow:#00000029 0 1px 4px}h1{font-weight:600}.cart-image{width:13%;display:flex;margin-right:auto;margin-left:auto}.cart-image img{width:100%}.logout-btn{color:#fff;border:none;padding:5px;border-radius:3px;border:2px solid transparent;font-size:14px!important}.edit-btn{border:none;padding:5px;border-radius:3px;border:2px solid transparent;background-color:transparent;font-size:14px!important}.item-desc{margin-left:10px}.cart-items{padding:10px;margin-top:10px;margin-bottom:15px;border-radius:5px;box-shadow:0 0 1px #28293d14,0 0 2px #60617029;width:48%;display:flex;flex-wrap:wrap;border:1.5px solid white}.my-bag{font-size:16px;font-weight:600;color:#000}.my-bag span{color:#939393}.item-parent{margin:10px 0;width:100%}.lh-23{line-height:23px}.item-name{font-size:16px;line-height:30px;font-weight:600}.price-with-tax{font-weight:400;font-size:16px}.item-sku{font-weight:400;font-size:14px;color:#626262}.cart-item{position:absolute;right:50px;bottom:10px;cursor:pointer}.item-price{display:flex;justify-content:flex-end;font-weight:600;font-size:16px;color:#141514}.product-img{border-radius:5px;height:95px;width:100px;padding:0}.quantity-box{display:flex;gap:5px;align-items:center;border:1px solid #E8E8E8;width:45px;height:22px}.quantity-box input{outline:none;text-align:center;border:none;width:30px;height:100%}.quantity-box .plus{font-size:20px;position:relative;top:-3px;font-weight:500}.quantity-box .minus{font-size:30px;position:relative;top:-3px;font-weight:500}.delete-item{color:#626262;cursor:pointer}.item-quantity{margin-top:5px;cursor:pointer;display:flex;width:90px;min-width:fit-content;border:1px solid lightgray;justify-content:space-between;align-items:center;padding:5px 10px;border-radius:3px}.amount_logo{font-size:27px}@media screen and (max-width: 475px){.store-listing{width:35%!important}.total-container{height:100%!important}.amount_logo{font-size:27px}.amount,.scheme-count{font-size:20px!important}.title-text{font-size:24px}.schemes-grid{flex-wrap:wrap;overflow-y:scroll;height:95%}.section{height:auto}.scheme-status{white-space:nowrap}.scheme-card{width:100%}.header{flex-direction:column-reverse}.scheme-overview{width:100%!important}.scheme-overview div{flex-wrap:wrap}.available-savings h3{font-size:17px!important}.quick-actions{width:100%}.active-schemes h3{font-size:17px!important}.auto-pay-icon{width:55px!important;height:50px!important}.mobile-icon{width:30px!important}.manage-btn{width:25%!important}.tab-selected div{font-weight:600!important}.mobile-height{height:100%!important}.passbook_container{height:90%!important;overflow-x:scroll!important}.passbook_container .section{max-height:unset!important;padding:10px!important}.section-header{margin-bottom:2px!important}.cart-items{width:100%}.item-quantity{width:100%;text-align:center}.action-btn{flex-direction:column}.onlyDesktop{display:none!important}.top-sec{display:flex;flex-direction:column;align-items:center;margin:auto;background-color:#d3d3d375;width:100%;border-radius:5px}.top-sec img{position:relative;top:-20px}.top-sec>div{position:relative;top:-10px}.list-sec{border:1.5px solid lightgray;padding:10px 0;border-radius:10px;margin-top:10px;box-shadow:0 1px 1px #0000,0 1px 1px #00000030}.list-sec .tab-selected{border-top-left-radius:10px!important;border-bottom-left-radius:10px}.filter-tab{min-width:150px!important}.orderlist{overflow-x:auto!important}.empty-cart{text-align:center}.cart-image{width:46%!important}}.mobileAccountHeader{box-shadow:0 1px 1px #0000,0 1px 1px #00000030;padding:0 10px;width:100vw;margin-bottom:20px;margin-left:-5%}.order-status{border-radius:2px;padding:5px 10px;font-size:12px}.ORDER_PLACED{background-color:#fffce1;color:#bdad18}.ORDER_CONFIRMED{background-color:#ffe5d1;color:#d97a3b}.DISPATCHED{background-color:#e1f7e7;color:#3bb378}.IN_TRANSIT{background-color:#d1e7ff;color:#3b82d9}.OUT_FOR_DELIVERY{background-color:#f6e1ff;color:#9a3bd9}.DELIVERED{color:#097d5f;background-color:#edfffa}.CANCELLED{background-color:#ffdddb;color:#c11a0f}.profile-icon{width:70px}.text-overflow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:1200px) and (max-width: 1330px){.profile-details{width:75%!important}}@media screen and (min-width:1200px){.manage-btn{width:10%!important}}@media (min-width: 768px) and (max-width: 1024px){.profile-detials{font-size:16px;width:100%}.profile-box{width:40%;border-radius:10px;height:fit-content;order:0}profile-icon{width:0px}.orderlist{overflow-x:auto!important}.order{width:100%}}.cards{box-shadow:#3c40434d 0 1px 2px,#3c404326 0 1px 3px 1px;border-radius:12px}.cards .card-header{padding:8px}.cards .card-header .card-head .scheme-type{font-size:15px}.cards .card-body .col-4 .card-sub-text{font-size:14px}.cards .card-footer{border-top:2px dashed!important;margin:0 5px;padding:10px}.cards .card-footer span{font-size:13px}.cards .card-footer .date-text{font-weight:600}.cards .card-footer div{font-size:15px}.fs-15{font-size:14px}.w-32{width:32.5%!important}.w-40{width:40px!important}.f-18{font-size:18px}.fw-600{font-weight:600}.scheme-id{font-size:13px}.order-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa)}.order-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.order-card .card-body{position:relative;overflow:hidden}.order-card:before{content:\"\";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--background-color);border-radius:0 4px 4px 0}.arrow-icon mat-icon{font-size:16px;transition:transform .3s ease}.order-card:hover .arrow-icon mat-icon{transform:translate(3px)}@media (max-width: 576px){.order-card .card-body{padding:1rem!important}.order-details .d-flex{flex-direction:column!important}.amount-section,.status-section{text-align:center}}.cart-item-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.address-card{transition:all .3s ease;border-radius:12px!important;background:linear-gradient(135deg,#fff,#f8f9fa);width:49%}.address-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a!important;border-color:#007bff!important}.address-card .card-body{position:relative;overflow:hidden}.address-text{color:#495057;line-height:1.4}.btn-sm{transition:all .3s ease}.small-icon{font-size:16px!important}.badge.bg-light{color:#495057!important;background:linear-gradient(135deg,#e9ecef,#f8f9fa)!important;border:1px solid #dee2e6}@media (max-width: 576px){.address-card .card-body{padding:1rem!important}.address-card{width:100%!important}.btn-sm{display:flex;justify-content:center;align-items:center;color:red!important}.btn-sm mat-icon{font-size:13px}.btn-sm{width:100%;margin-bottom:.25rem}}.profile-box{transition:all .3s ease;position:relative}.profile-box:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001f!important}.profile-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #00000026!important}.contact-item:hover{color:#007bff!important}.tab-item:hover{background:linear-gradient(90deg,#007bff14,#007bff08)!important;transform:translate(4px)}.tab-item:hover .tab-hover-bg{opacity:1}.tab-item:hover img{transform:scale(1.1)}.tab-selected{border-left:4px solid;font-weight:600!important;border-bottom:unset!important}.tab-selected .tab-label{font-weight:600!important}.edit-btn:hover{background:linear-gradient(135deg,#007bff0d,#007bff1a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #007bff33}.logout-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px #00000040!important;filter:brightness(1.05)}.tabs-container{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}.tabs-container::-webkit-scrollbar{width:4px}.tabs-container::-webkit-scrollbar-track{background:transparent}.tabs-container::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-box{animation:fadeInUp .6s ease-out}@media (max-width: 768px){.profile-box{width:100%!important}.profile-header{flex-direction:column;height:auto!important;text-align:center}.action-buttons{flex-direction:column}}.scheme-overview{gap:20px;width:100%}.available-savings{background:linear-gradient(135deg,#fff3cd,#ffeaa7);padding:20px;border-radius:12px;position:relative;flex:1}.available-savings .amount{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.available-savings h3{font-size:14px;color:#856404;margin-bottom:8px;font-weight:500}.subtitle{font-size:12px;color:#666}.active-schemes{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;position:relative;flex:1}.active-schemes h3{font-size:14px;color:#666;margin-bottom:8px;font-weight:500}.scheme-count{font-size:28px;font-weight:700;color:#333;margin-bottom:4px}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.section{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e9ecef;max-height:40vh;overflow-x:scroll}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.section-title{font-size:18px;font-weight:600}.view-all{color:#6c5ce7;font-size:16px}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.overdue{background:#fef2f2;border:1px solid #FECACA}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.upcoming{background:#f8f9fa;color:#666}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.payment-status{font-size:12px;padding:4px 8px;border-radius:4px;color:#fff;white-space:nowrap}.overdue-status{background:#dc3545}.upcoming-status{background:#6c757d}.schemes-grid{display:flex;gap:10px;overflow-x:scroll}.scheme-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e9ecef;position:relative;min-width:34vw}.scheme-header{display:flex;justify-content:space-between;align-items:flex-start}.scheme-title{font-size:16px;font-weight:600;margin-bottom:4px}.scheme-amount{font-size:12px;color:#666}.scheme-date{font-size:12px;color:#666;display:flex;flex-direction:column;gap:10px}.scheme-status{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:600;text-transform:uppercase;min-width:15%;max-width:fit-content}.redeem_status{background:orange;color:#fff}.active-status{background:#22c55e;color:#fff}.scheme-stats{display:flex;justify-content:space-between}.stat{text-align:center}.stat-value{font-size:20px;font-weight:700;color:#333}.stat-label{font-size:11px;color:#666;text-transform:uppercase;margin-top:4px}.scheme-footer{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#666}.price-notice{background:#fce7f3;color:#be185d;padding:8px 12px;border-radius:6px;font-size:11px}.auto-pay{background:#fff3cd;padding:16px;border-radius:8px;display:flex;align-items:center;gap:12px;margin-top:20px}.auto-pay-icon{width:35px;height:35px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.auto-pay-icon img{width:100%}.auto-pay-content{flex:1}.auto-pay-title{font-size:14px;font-weight:600;margin-bottom:4px}.auto-pay-desc{font-size:12px;color:#666}.manage-btn{background:none;border:1px solid #dee2e6;padding:6px 0;border-radius:4px;font-size:13px!important;cursor:pointer;display:flex;justify-content:space-evenly}.store-listing{font-size:14px;width:20%;height:30px;margin-bottom:13px;border:1px solid #e9ecef;border-radius:5px;outline:none;padding-left:5px;cursor:pointer}\n"] }]
|
|
19335
19458
|
}], ctorParameters: () => [{ type: i2$2.Router }, { type: EventsService }, { type: RestService }, { type: StorageServiceService }, { type: CartService }, { type: i1$1.MatDialog }, { type: i8$3.MatBottomSheet }, { type: i2$3.CookieService }, { type: i6$1.MessageService }, { type: i2$2.ActivatedRoute }], propDecorators: { showChargesTemplate: [{
|
|
19336
19459
|
type: ViewChild,
|
|
19337
19460
|
args: ['showCharges', { static: true }]
|