simpo-component-library 3.6.476 → 3.6.478
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 +3 -2
- package/esm2022/lib/ecommerce/sections/returns-calculator/returns-calculator.component.mjs +22 -7
- package/esm2022/lib/ecommerce/sections/schemes/schemes.component.mjs +3 -3
- package/esm2022/lib/elements/pricing-s1/pricing-s1.component.mjs +3 -3
- package/esm2022/lib/elements/text-editor/text-editor.component.mjs +1 -2
- package/esm2022/lib/sections/banner-section/banner-section.component.mjs +13 -3
- package/esm2022/lib/sections/pricing-section/pricing-section.component.mjs +15 -3
- package/esm2022/lib/sections/scheme-detail/scheme-detail.component.mjs +7 -6
- package/esm2022/lib/sections/service-section/service-section.component.mjs +13 -3
- package/esm2022/lib/sections/testimonial-section/testimonial-section.component.mjs +3 -3
- package/esm2022/lib/sections/text-section/text-section.component.mjs +13 -3
- package/fesm2022/simpo-component-library.mjs +82 -27
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/authentication-required/authentication-required.component.d.ts +1 -1
- package/lib/ecommerce/sections/returns-calculator/returns-calculator.component.d.ts +2 -2
- package/lib/ecommerce/sections/schemes/schemes.component.d.ts +1 -1
- package/lib/elements/link-editor/link-editor.component.d.ts +1 -1
- package/lib/elements/pricing-s1/pricing-s1.component.d.ts +1 -1
- package/lib/sections/banner-carousel/banner-carousel.component.d.ts +3 -3
- package/lib/sections/banner-section/banner-section.component.d.ts +2 -0
- package/lib/sections/carousel-banner/carousel-banner.component.d.ts +1 -1
- package/lib/sections/logo-showcase/logo-showcase.component.d.ts +2 -2
- package/lib/sections/new-testimonials/new-testimonials.component.d.ts +1 -1
- package/lib/sections/pricing-section/pricing-section.component.d.ts +2 -1
- package/lib/sections/service-section/service-section.component.d.ts +2 -0
- package/lib/sections/text-section/text-section.component.d.ts +2 -0
- package/package.json +1 -1
- package/simpo-component-library-3.6.478.tgz +0 -0
- package/simpo-component-library-3.6.476.tgz +0 -0
@@ -1849,7 +1849,6 @@ class TextEditorComponent {
|
|
1849
1849
|
});
|
1850
1850
|
}
|
1851
1851
|
updateText(event) {
|
1852
|
-
console.log(this.editor.nativeElement.innerHTML);
|
1853
1852
|
this.valueChange.emit(this.editor.nativeElement.innerHTML);
|
1854
1853
|
}
|
1855
1854
|
onFormatChange(event) {
|
@@ -2542,13 +2541,14 @@ class TranslateOnhoverDirective {
|
|
2542
2541
|
});
|
2543
2542
|
this.el.nativeElement.addEventListener('mouseout', () => {
|
2544
2543
|
this.el.nativeElement.style.position = 'relative';
|
2545
|
-
this.el.nativeElement.style.transform
|
2544
|
+
this.el.nativeElement.style.removeProperty("transform");
|
2546
2545
|
});
|
2547
2546
|
}
|
2548
2547
|
else {
|
2549
2548
|
this.el.nativeElement.style.setProperty("transition", "none");
|
2550
2549
|
this.el.nativeElement.addEventListener('mouseover', () => {
|
2551
2550
|
this.el.nativeElement.style.position = 'relative';
|
2551
|
+
this.el.nativeElement.style.removeProperty("transform");
|
2552
2552
|
});
|
2553
2553
|
}
|
2554
2554
|
}
|
@@ -4762,6 +4762,16 @@ class TextSectionComponent extends BaseSection {
|
|
4762
4762
|
getScreenSize() {
|
4763
4763
|
this.screenWidth = window.innerWidth;
|
4764
4764
|
}
|
4765
|
+
getGlassyBackground(color) {
|
4766
|
+
return `rgba(${this.hexToRgb(color)}, 0.1)`;
|
4767
|
+
}
|
4768
|
+
hexToRgb(hex) {
|
4769
|
+
const bigint = parseInt(hex.slice(1), 16);
|
4770
|
+
const r = (bigint >> 16) & 255;
|
4771
|
+
const g = (bigint >> 8) & 255;
|
4772
|
+
const b = bigint & 255;
|
4773
|
+
return `${r}, ${g}, ${b}`;
|
4774
|
+
}
|
4765
4775
|
editSection() {
|
4766
4776
|
if (window.innerWidth <= 475)
|
4767
4777
|
return;
|
@@ -4771,7 +4781,7 @@ class TextSectionComponent extends BaseSection {
|
|
4771
4781
|
}, 100);
|
4772
4782
|
}
|
4773
4783
|
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 }); }
|
4774
|
-
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:
|
4784
|
+
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\" [style.color]=\"styles?.background?.accentColor\"\r\n [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\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:
|
4775
4785
|
//directive
|
4776
4786
|
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"] }] }); }
|
4777
4787
|
}
|
@@ -4794,7 +4804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
4794
4804
|
ContentFitDirective,
|
4795
4805
|
HoverDirective,
|
4796
4806
|
OverlayDirective,
|
4797
|
-
], 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"] }]
|
4807
|
+
], 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\" [style.color]=\"styles?.background?.accentColor\"\r\n [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\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"] }]
|
4798
4808
|
}], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: EventsService }], propDecorators: { data: [{
|
4799
4809
|
type: Input
|
4800
4810
|
}], index: [{
|
@@ -5185,8 +5195,18 @@ class BannerSectionComponent extends BaseSection {
|
|
5185
5195
|
else
|
5186
5196
|
return `linear-gradient(${direction} ,${this.styles?.background?.accentColor},${this.styles?.background?.secondaryAccentColor})`;
|
5187
5197
|
}
|
5198
|
+
getGlassyBackground(color) {
|
5199
|
+
return `rgba(${this.hexToRgb(color)}, 0.1)`;
|
5200
|
+
}
|
5201
|
+
hexToRgb(hex) {
|
5202
|
+
const bigint = parseInt(hex.slice(1), 16);
|
5203
|
+
const r = (bigint >> 16) & 255;
|
5204
|
+
const g = (bigint >> 8) & 255;
|
5205
|
+
const b = bigint & 255;
|
5206
|
+
return `${r}, ${g}, ${b}`;
|
5207
|
+
}
|
5188
5208
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
5189
|
-
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:
|
5209
|
+
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\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\"\r\n [style.color]=\"styles?.background?.accentColor\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\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:
|
5190
5210
|
// SimpoHoverBorderDirective,
|
5191
5211
|
//directive
|
5192
5212
|
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"] }] }); }
|
@@ -5220,7 +5240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
5220
5240
|
SpacingAroundDirective,
|
5221
5241
|
ImageEditorDirective,
|
5222
5242
|
MergeHeaderDirective
|
5223
|
-
], 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
|
5243
|
+
], 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\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\"\r\n [style.color]=\"styles?.background?.accentColor\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\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"] }]
|
5224
5244
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
5225
5245
|
type: Input
|
5226
5246
|
}], index: [{
|
@@ -6060,6 +6080,16 @@ class ServiceSectionComponent extends BaseSection {
|
|
6060
6080
|
getScreenSize() {
|
6061
6081
|
this.screenWidth = window.innerWidth;
|
6062
6082
|
}
|
6083
|
+
getGlassyBackground(color) {
|
6084
|
+
return `rgba(${this.hexToRgb(color)}, 0.1)`;
|
6085
|
+
}
|
6086
|
+
hexToRgb(hex) {
|
6087
|
+
const bigint = parseInt(hex.slice(1), 16);
|
6088
|
+
const r = (bigint >> 16) & 255;
|
6089
|
+
const g = (bigint >> 8) & 255;
|
6090
|
+
const b = bigint & 255;
|
6091
|
+
return `${r}, ${g}, ${b}`;
|
6092
|
+
}
|
6063
6093
|
editSection() {
|
6064
6094
|
if (window.innerWidth <= 475)
|
6065
6095
|
return;
|
@@ -6069,7 +6099,7 @@ class ServiceSectionComponent extends BaseSection {
|
|
6069
6099
|
}, 100);
|
6070
6100
|
}
|
6071
6101
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ServiceSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
6072
|
-
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\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\"\r\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"row w-100 justify-content-center\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\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\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".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
|
6102
|
+
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\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\" [style.color]=\"style?.background?.accentColor\" [style.borderColor]=\"style?.background?.accentColor\" [style.background]=\"getGlassyBackground(style?.background?.accentColor)\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\"\r\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"row w-100 justify-content-center\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\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\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".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-width:1px!important;border-style:solid!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important;font-family:var(--website-font-family)}@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:
|
6073
6103
|
//directive
|
6074
6104
|
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"] }] }); }
|
6075
6105
|
}
|
@@ -6104,7 +6134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
6104
6134
|
SpacingHorizontalDirective,
|
6105
6135
|
SpacingAroundDirective,
|
6106
6136
|
SimpoContainerAligment
|
6107
|
-
], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\"\r\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"row w-100 justify-content-center\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\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\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".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
|
6137
|
+
], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\" [style.color]=\"style?.background?.accentColor\" [style.borderColor]=\"style?.background?.accentColor\" [style.background]=\"getGlassyBackground(style?.background?.accentColor)\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\"\r\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"row w-100 justify-content-center\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\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\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".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-width:1px!important;border-style:solid!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important;font-family:var(--website-font-family)}@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"] }]
|
6108
6138
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
6109
6139
|
type: Input
|
6110
6140
|
}], index: [{
|
@@ -6316,7 +6346,7 @@ class TestimonialSectionComponent extends BaseSection {
|
|
6316
6346
|
}
|
6317
6347
|
}
|
6318
6348
|
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 }); }
|
6319
|
-
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)\"\r\n class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [class.px-1]=\"screenWidth < 475\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [
|
6349
|
+
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)\"\r\n class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [class.px-1]=\"screenWidth < 475\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\" #carouselInner>\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\" data-bs-interval=\"10000\" #carouselItem>\r\n <div style=\"width: max-content; margin: auto; max-width: 90%;\" class=\"carousel-parent\"\r\n [class.card-form]=\"content?.display?.showCard\" [simpoCorner]=\"style?.corners\"\r\n [style.borderColor]=\"content?.display?.showCard ? style?.background?.accentColor : 'none'\"\r\n [style.background]=\"content?.display?.showCard ? getColor(style?.background?.accentColor) : 'transparent'\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <ng-container *ngIf=\"content?.display?.showImage\">\r\n <img loading=\"lazy\" [src]=\"testimonial?.image?.url\" class=\"mb-1\" loading=\"lazy\"\r\n [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n </ng-container>\r\n <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n <div class=\"d-flex\">\r\n <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\" *ngIf=\"getLength() > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n data-bs-slide=\"next\" *ngIf=\"getLength() > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".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:
|
6320
6350
|
//directive
|
6321
6351
|
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"] }] }); }
|
6322
6352
|
}
|
@@ -6351,7 +6381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
6351
6381
|
TextEditorComponent,
|
6352
6382
|
ImageEditorDirective,
|
6353
6383
|
SpacingHorizontalDirective,
|
6354
|
-
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [class.px-1]=\"screenWidth < 475\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [
|
6384
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [class.px-1]=\"screenWidth < 475\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\" #carouselInner>\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\" data-bs-interval=\"10000\" #carouselItem>\r\n <div style=\"width: max-content; margin: auto; max-width: 90%;\" class=\"carousel-parent\"\r\n [class.card-form]=\"content?.display?.showCard\" [simpoCorner]=\"style?.corners\"\r\n [style.borderColor]=\"content?.display?.showCard ? style?.background?.accentColor : 'none'\"\r\n [style.background]=\"content?.display?.showCard ? getColor(style?.background?.accentColor) : 'transparent'\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <ng-container *ngIf=\"content?.display?.showImage\">\r\n <img loading=\"lazy\" [src]=\"testimonial?.image?.url\" class=\"mb-1\" loading=\"lazy\"\r\n [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n </ng-container>\r\n <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n <div class=\"d-flex\">\r\n <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\" *ngIf=\"getLength() > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n data-bs-slide=\"next\" *ngIf=\"getLength() > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".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"] }]
|
6355
6385
|
}], ctorParameters: () => [{ type: EventsService }, { type: i0.Renderer2 }], propDecorators: { data: [{
|
6356
6386
|
type: Input
|
6357
6387
|
}], index: [{
|
@@ -10187,7 +10217,7 @@ class PricingS1Component extends BaseSection {
|
|
10187
10217
|
}
|
10188
10218
|
}
|
10189
10219
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingS1Component, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
10190
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingS1Component, isStandalone: true, selector: "simpo-pricing-s1", inputs: { data: "data", edit: "edit" }, usesInheritance: true, ngImport: i0, template: "<section>\r\n <div class=\"pricing-options row w-100\">\r\n <div\r\n [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data\"\r\n [attr.class]=\"getClass() + ' position-relative individual-options mb-2'\"\r\n [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true}\"\r\n [ngStyle]=\"{'border': options?.highlight?.highlighted ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\r\n <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\r\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\r\n *ngIf=\"options?.highlight?.highlighted === true\">\r\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div>\r\n <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"options.image.position\" [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \"\r\n alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc mb-3\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\"\r\n fill=\"#4C63D9\" />\r\n </svg> -->\r\n </div>\r\n <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\r\n <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\r\n <button class=\"custom-btn d-flex gap-1\" [buttonData]=\"options?.button\" [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]=\"getButtonId()\" (click)=\"redirectTo()\"\r\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\r\n <div>{{options?.button?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\r\n 'mask-image': 'url(' + options?.button?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: [".pricing-options{justify-content:center;gap:15px}.individual-options{border:1px solid #80808057}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:0;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.col-4{width:100%!important}}.col-4{width:30%!important}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { 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: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }] }); }
|
10220
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingS1Component, isStandalone: true, selector: "simpo-pricing-s1", inputs: { data: "data", edit: "edit" }, usesInheritance: true, ngImport: i0, template: "<section class=\"d-flex justify-content-center\">\r\n <div class=\"pricing-options row w-100\">\r\n <div\r\n [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data\"\r\n [attr.class]=\"getClass() + ' position-relative individual-options mb-2'\"\r\n [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true}\"\r\n [ngStyle]=\"{'border': options?.highlight?.highlighted ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\r\n <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\r\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\r\n *ngIf=\"options?.highlight?.highlighted === true\">\r\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div>\r\n <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"options.image.position\" [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \"\r\n alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc mb-3\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\"\r\n fill=\"#4C63D9\" />\r\n </svg> -->\r\n </div>\r\n <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\r\n <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\r\n <button class=\"custom-btn d-flex gap-1\" [buttonData]=\"options?.button\" [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]=\"getButtonId()\" (click)=\"redirectTo()\"\r\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\r\n <div>{{options?.button?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\r\n 'mask-image': 'url(' + options?.button?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: [".pricing-options{justify-content:center;gap:15px}.individual-options{border:1px solid #80808057}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:0;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.popular-tag{max-width:60%}.individual-options{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.col-4{width:100%!important}}.col-4{width:30%!important}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { 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: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }] }); }
|
10191
10221
|
}
|
10192
10222
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingS1Component, decorators: [{
|
10193
10223
|
type: Component,
|
@@ -10203,7 +10233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
10203
10233
|
SimpoButtonComponent,
|
10204
10234
|
ButtonEditorDirective,
|
10205
10235
|
TranslateOnhoverDirective
|
10206
|
-
], template: "<section>\r\n <div class=\"pricing-options row w-100\">\r\n <div\r\n [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data\"\r\n [attr.class]=\"getClass() + ' position-relative individual-options mb-2'\"\r\n [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true}\"\r\n [ngStyle]=\"{'border': options?.highlight?.highlighted ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\r\n <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\r\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\r\n *ngIf=\"options?.highlight?.highlighted === true\">\r\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div>\r\n <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"options.image.position\" [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \"\r\n alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc mb-3\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\"\r\n fill=\"#4C63D9\" />\r\n </svg> -->\r\n </div>\r\n <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\r\n <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\r\n <button class=\"custom-btn d-flex gap-1\" [buttonData]=\"options?.button\" [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]=\"getButtonId()\" (click)=\"redirectTo()\"\r\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\r\n <div>{{options?.button?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\r\n 'mask-image': 'url(' + options?.button?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: [".pricing-options{justify-content:center;gap:15px}.individual-options{border:1px solid #80808057}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:0;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.col-4{width:100%!important}}.col-4{width:30%!important}\n"] }]
|
10236
|
+
], template: "<section class=\"d-flex justify-content-center\">\r\n <div class=\"pricing-options row w-100\">\r\n <div\r\n [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data\"\r\n [attr.class]=\"getClass() + ' position-relative individual-options mb-2'\"\r\n [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true}\"\r\n [ngStyle]=\"{'border': options?.highlight?.highlighted ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\r\n <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\r\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\r\n *ngIf=\"options?.highlight?.highlighted === true\">\r\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div>\r\n <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"options.image.position\" [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \"\r\n alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc mb-3\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\"\r\n fill=\"#4C63D9\" />\r\n </svg> -->\r\n </div>\r\n <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\r\n <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\r\n <button class=\"custom-btn d-flex gap-1\" [buttonData]=\"options?.button\" [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]=\"getButtonId()\" (click)=\"redirectTo()\"\r\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\r\n <div>{{options?.button?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\r\n 'mask-image': 'url(' + options?.button?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: [".pricing-options{justify-content:center;gap:15px}.individual-options{border:1px solid #80808057}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:0;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.popular-tag{max-width:60%}.individual-options{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.col-4{width:100%!important}}.col-4{width:30%!important}\n"] }]
|
10207
10237
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
10208
10238
|
type: Input
|
10209
10239
|
}], edit: [{
|
@@ -10266,8 +10296,20 @@ class PricingSectionComponent extends BaseSection {
|
|
10266
10296
|
return 'col-3';
|
10267
10297
|
}
|
10268
10298
|
}
|
10299
|
+
getAlignment() {
|
10300
|
+
switch (this.style?.layout?.align) {
|
10301
|
+
case 'left':
|
10302
|
+
return 'justify-content-start';
|
10303
|
+
case 'right':
|
10304
|
+
return 'justify-content-end';
|
10305
|
+
case 'center':
|
10306
|
+
return 'justify-content-center';
|
10307
|
+
default:
|
10308
|
+
return 'justify-content-start';
|
10309
|
+
}
|
10310
|
+
}
|
10269
10311
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
10270
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingSectionComponent, isStandalone: true, selector: "simpo-pricing-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n </div>\r\n <div class=\"pricing-options row\" *ngIf=\"style?.pricingStyle =='STYLE1'\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\"\r\n [attr.class]=\"getClass() + ' position-relative'\">\r\n <img loading=\"lazy\" class=\"image w-100\" *ngIf=\"content?.display?.showImage === true\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" loading=\"lazy\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"highlight-label\" *ngIf=\"options?.highlight?.highlighted === true\"\r\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [simpoColor]=\"getTextColor()\"\r\n [simpoCorner]=\"style?.corners\">\r\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n\r\n <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\" (click)=\"redirectTo()\">{{options?.button?.label}}</button> -->\r\n <button [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n class=\"d-flex gap-1 align-items-center justify-content-center\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\"\r\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\r\n <div>{{options?.button?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon \" [ngStyle]=\"{\r\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\r\n 'mask-image': 'url(' + options?.button?.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 class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <mat-icon>check</mat-icon><simpo-text-editor [(value)]=\"content.content\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- {{content.content}} -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"style?.pricingStyle =='STYLE2'\">\r\n <simpo-pricing-s1 [data]=\"data\" [edit]=\"edit\"></simpo-pricing-s1>\r\n </div>\r\n <div *ngFor=\"let button of data?.action?.buttons\" class=\"mt-3\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center!important}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;padding-top:7rem;height:auto;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{right:-2px;padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;position:absolute;top:0;border-top-left-radius:0!important;border-bottom-right-radius:0!important}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}.pricing-package{margin-top:10px;width:90%;margin-bottom:10px}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: PricingS1Component, selector: "simpo-pricing-s1", inputs: ["data", "edit"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
|
10312
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingSectionComponent, isStandalone: true, selector: "simpo-pricing-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n </div>\r\n <div class=\"pricing-options row\" *ngIf=\"style?.pricingStyle =='STYLE1'\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\"\r\n [attr.class]=\"getClass() + ' position-relative'\">\r\n <img loading=\"lazy\" class=\"image w-100\" *ngIf=\"content?.display?.showImage === true\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" loading=\"lazy\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"highlight-label\" *ngIf=\"options?.highlight?.highlighted === true\"\r\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [simpoColor]=\"getTextColor()\"\r\n [simpoCorner]=\"style?.corners\">\r\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n\r\n <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\" (click)=\"redirectTo()\">{{options?.button?.label}}</button> -->\r\n <button [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n class=\"d-flex gap-1 align-items-center justify-content-center\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\"\r\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\r\n <div>{{options?.button?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon \" [ngStyle]=\"{\r\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\r\n 'mask-image': 'url(' + options?.button?.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 class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <mat-icon>check</mat-icon><simpo-text-editor [(value)]=\"content.content\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- {{content.content}} -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"style?.pricingStyle =='STYLE2'\">\r\n <simpo-pricing-s1 [data]=\"data\" [edit]=\"edit\"></simpo-pricing-s1>\r\n </div>\r\n <div [attr.class]=\"getAlignment() + ' mt-3 w-100 d-flex gap-2'\" *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center!important}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;padding-top:7rem;height:auto;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{right:-2px;padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;position:absolute;top:0;border-top-left-radius:0!important;border-bottom-right-radius:0!important}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}.pricing-package{margin-top:10px;width:90%;margin-bottom:10px}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: PricingS1Component, selector: "simpo-pricing-s1", inputs: ["data", "edit"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
|
10271
10313
|
}
|
10272
10314
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingSectionComponent, decorators: [{
|
10273
10315
|
type: Component,
|
@@ -10293,7 +10335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
10293
10335
|
ImageEditorDirective, SpacingHorizontalDirective,
|
10294
10336
|
PricingS1Component,
|
10295
10337
|
ButtonEditorDirective
|
10296
|
-
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n </div>\r\n <div class=\"pricing-options row\" *ngIf=\"style?.pricingStyle =='STYLE1'\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\"\r\n [attr.class]=\"getClass() + ' position-relative'\">\r\n <img loading=\"lazy\" class=\"image w-100\" *ngIf=\"content?.display?.showImage === true\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\"
|
10338
|
+
], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n </div>\r\n <div class=\"pricing-options row\" *ngIf=\"style?.pricingStyle =='STYLE1'\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\"\r\n [attr.class]=\"getClass() + ' position-relative'\">\r\n <img loading=\"lazy\" class=\"image w-100\" *ngIf=\"content?.display?.showImage === true\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" loading=\"lazy\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"highlight-label\" *ngIf=\"options?.highlight?.highlighted === true\"\r\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [simpoColor]=\"getTextColor()\"\r\n [simpoCorner]=\"style?.corners\">\r\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n\r\n <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\" (click)=\"redirectTo()\">{{options?.button?.label}}</button> -->\r\n <button [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n class=\"d-flex gap-1 align-items-center justify-content-center\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\"\r\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\r\n <div>{{options?.button?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon \" [ngStyle]=\"{\r\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\r\n 'mask-image': 'url(' + options?.button?.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 class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <mat-icon>check</mat-icon><simpo-text-editor [(value)]=\"content.content\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- {{content.content}} -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"style?.pricingStyle =='STYLE2'\">\r\n <simpo-pricing-s1 [data]=\"data\" [edit]=\"edit\"></simpo-pricing-s1>\r\n </div>\r\n <div [attr.class]=\"getAlignment() + ' mt-3 w-100 d-flex gap-2'\" *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center!important}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;padding-top:7rem;height:auto;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{right:-2px;padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;position:absolute;top:0;border-top-left-radius:0!important;border-bottom-right-radius:0!important}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}.pricing-package{margin-top:10px;width:90%;margin-bottom:10px}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"] }]
|
10297
10339
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
10298
10340
|
type: Input
|
10299
10341
|
}], index: [{
|
@@ -15159,7 +15201,7 @@ class SchemeDetailComponent {
|
|
15159
15201
|
if (params['termsAndCondition'])
|
15160
15202
|
this.scrollToTermsAndCondition = true;
|
15161
15203
|
});
|
15162
|
-
// this.getSchemeDetails("
|
15204
|
+
// this.getSchemeDetails("9eb57ba2-9083-11f0-98fe-47a63c58fddd")
|
15163
15205
|
}
|
15164
15206
|
getKeys(obj) {
|
15165
15207
|
return Object.keys(obj ?? {});
|
@@ -15186,7 +15228,7 @@ class SchemeDetailComponent {
|
|
15186
15228
|
this.restService.getAllStaffList().subscribe({
|
15187
15229
|
next: (res) => {
|
15188
15230
|
this.staffMembers = res?.data?.data ? res?.data?.data : [];
|
15189
|
-
console.log(this.staffMembers)
|
15231
|
+
// console.log(this.staffMembers)
|
15190
15232
|
},
|
15191
15233
|
error: (err) => {
|
15192
15234
|
console.log(err);
|
@@ -15226,7 +15268,7 @@ class SchemeDetailComponent {
|
|
15226
15268
|
if (res && res.data) {
|
15227
15269
|
this.getStaffList();
|
15228
15270
|
this.schemeDetails = res.data;
|
15229
|
-
console.log(this.schemeDetails)
|
15271
|
+
// console.log(this.schemeDetails)
|
15230
15272
|
this.minAmount = this.schemeDetails?.minInstallmentValue;
|
15231
15273
|
this.maxAmount = this.schemeDetails?.maxInstallmentValue;
|
15232
15274
|
this.monthlyAmount = this.minAmount;
|
@@ -15234,6 +15276,7 @@ class SchemeDetailComponent {
|
|
15234
15276
|
this.maturityCount = this.schemeDetails?.maturityCount ? this.schemeDetails.maturityCount : this.maturityCount;
|
15235
15277
|
this.stores = this.schemeDetails?.storeList ? this.schemeDetails.storeList : [];
|
15236
15278
|
this.getMetalPrice();
|
15279
|
+
this.onAmountChange();
|
15237
15280
|
this.faqList = this.schemeDetails?.faqs ? this.schemeDetails?.faqs : [];
|
15238
15281
|
this.faqList.forEach(faq => faq.showAnswer = false);
|
15239
15282
|
if (this.scrollToTermsAndCondition)
|
@@ -15345,11 +15388,11 @@ class SchemeDetailComponent {
|
|
15345
15388
|
}
|
15346
15389
|
}
|
15347
15390
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailComponent, deps: [{ token: i2$2.ActivatedRoute }, { token: RestService }, { token: StorageServiceService }, { token: i1$1.MatDialog }, { token: i2$2.Router }, { token: EventsService }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
15348
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailComponent, isStandalone: true, selector: "simpo-scheme-detail", inputs: { data: "data", index: "index", edit: "edit" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MatDialog, MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n\r\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"plan_desc_section\">\r\n <ng-container *ngTemplateOutlet=\"planDescTemplate\"></ng-container>\r\n </div>\r\n <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\r\n </div>\r\n <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\r\n </div>\r\n <div class=\"redeem_ans_section\" *ngIf=\"schemeDetails?.redeemDesc.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"redeemInfoSection\"></ng-container>\r\n </div>\r\n <div class=\"scheme_work_section\" *ngIf=\"schemeDetails?.schemeWorkingDesc != {} && schemeDetails\">\r\n <ng-container *ngTemplateOutlet=\"schemeWorkSection\"></ng-container>\r\n </div>\r\n <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\r\n </div>\r\n <div class=\"terms_condition_section p-5\"\r\n *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\r\n <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\r\n </div>\r\n</section>\r\n<ng-template #redeemInfoSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How to redeem?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"redeem_info_section\" *ngIf=\"schemeDetails?.redeemDesc\">\r\n {{schemeDetails?.redeemDesc || 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #schemeWorkSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How Does this plan work?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"ans_section\" *ngFor=\"let faq of getKeys(schemeDetails?.schemeWorkingDesc);let i =index\">\r\n <div class=\"d-flex align-items-start gap-3 f-16\">\r\n <span>{{faq}}</span>\r\n <span>{{ schemeDetails?.schemeWorkingDesc?.[faq]?.replaceAll('\\n',' ') || 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #planDescTemplate>\r\n <div class=\"hero-section d-flex align-items-center\">\r\n <div class=\"container\">\r\n <div class=\"row align-items-center g-5\">\r\n <div\r\n [ngClass]=\"{'col-md-6': schemeDetails?.imgUrls[0], 'col-12 d-flex align-items-center justify-content-center': !schemeDetails?.imgUrls[0]}\">\r\n <div class=\"hero-content\">\r\n <h1 class=\"hero-title mb-4 d-flex justify-content-center align-items-center\">\r\n <span class=\"title-highlight\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :'N/A'}}</span>\r\n </h1>\r\n <p class=\"hero-description mb-4\">\r\n {{schemeDetails?.desc ? schemeDetails?.desc :'N/A'}}\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\" *ngIf=\"schemeDetails?.imgUrls[0]\">\r\n <div class=\"hero-image\">\r\n <img [src]=\"schemeDetails?.imgUrls ? schemeDetails?.imgUrls[0] :'N/A'\" alt=\"Pearl Jewelry\"\r\n class=\"jewellery-img w-100\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #aboutUsTemplate>\r\n <div class=\"d-flex flex-column gap-3\">\r\n <div class=\"text_header d-flex align-items-center justify-content-center\">\r\n <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"desc_text\">\r\n {{schemeDetails?.about}}\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #schemeCalculator>\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\r\n <span>Calculate Your Returns</span>\r\n <div class=\"calc_desc\">\r\n See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\r\n your potential returns.\r\n </div>\r\n </div>\r\n <div class=\"calculator_section\">\r\n <div class=\"gold-purity\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '18_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '24_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '22_k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\">\r\n <div class=\"slider-container position-relative\">\r\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"schemeDetails?.valueStep\" class=\"w-100 pale-slider\"\r\n [style.--mdc-slider-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-focus-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-hover-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-active-track-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-ripple-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-value-indicator-color]=\"data?.styles?.background?.accentColor\">\r\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n </mat-slider>\r\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\"> -->\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\r\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\r\n \u20B9 {{option?.value}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <div class=\"row align-items-center justify-content-between mb-3 g-2\">\r\n <!-- Contribution Card -->\r\n <div class=\"col-12 col-sm-6\"\r\n [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Plus Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">+</div>\r\n </div>\r\n\r\n <!-- Benefit Card -->\r\n <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{benefitAmount | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Scheme Benefit\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Equals Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">=</div>\r\n </div>\r\n\r\n <!-- Total Card -->\r\n <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5 text-white\">\r\n <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\r\n \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\r\n </span>\r\n <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </span>\r\n </div>\r\n <div class=\"text-white-50 small\">\r\n Total Redemption Value\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n {{purchasedGram}} gms\r\n </div>\r\n <div class=\"text-muted small\">\r\n Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"terms-and-condition\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\r\n Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\r\n <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n<ng-template #faqTemplate>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">Frequently Asked Questions</h1>\r\n <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\r\n <div class=\"faq-question\">\r\n <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\r\n <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\r\n <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #termsAndConditions>\r\n <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\r\n <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\r\n <h1 class=\"terms-title\">Terms and Conditions</h1>\r\n\r\n <div class=\"terms-content\">\r\n <div class=\"term-item d-flex align-items-center\"\r\n *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\r\n <div class=\"terms_count\">\r\n <h3 class=\"term-heading\">{{ key }}.</h3>\r\n </div>\r\n <div>\r\n <p class=\"term-text mb-0\">\r\n {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"important-note\">\r\n <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\r\n Participants will be notified of any changes via registered email or SMS. Continued\r\n participation after notification constitutes acceptance of revised terms.</p>\r\n </div> -->\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:17px;padding:0% 20%;line-height:1.5rem;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_options{padding:0% 1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.enroll-btn{font-size:16px;border:1px solid}.faq-container{border-radius:16px;padding:40px 0;width:65vw}.faq-title{font-size:2.5rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px;width:80%}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{width:65vw}.terms-title{font-size:2.2rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;padding:20px;border-radius:16px;width:80%}.term-item{padding-bottom:8px;border-bottom:1px solid #e2e8f0;gap:10px}.term-heading{margin:0!important}.term-item:last-of-type{border-bottom:none;padding-bottom:unset}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.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}.payment-row .label{color:#000!important;font-size:16px}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.payment-row:last-child{margin-bottom:0}.amount{color:#333;font-size:14px;font-weight:500}.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}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}@media (min-width :320px) and (max-width : 480px){.calc_desc,.desc_text{padding:0%}.random_options{margin-top:1rem}.hero-section{max-height:unset!important}.hero-section .container{padding:0!important}.p-5{padding:2% 0%!important}.sub-header{margin:.5rem 0px!important}.calculator_section{width:100%}.gold-purity{flex-wrap:wrap}.option{font-size:13px;white-space:nowrap}}@media (max-width: 768px){.terms-section{width:100%}.terms-container{padding:30px 0;width:100%}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px;width:100%}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}.faq-container,.faq-section,.faq-list{width:100%}}@media (min-width:475px){.terms-section{padding:0%!important}.card-container{width:31%;height:13vh;align-items:center}.calc_amount{font-size:1.5rem}}.bonus-message{flex-direction:column!important}.bonus-message :is(.staff-selector,.store_selection){width:100%!important}.redeem_info_section{text-align:center}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}.terms-and-condition :is(.store-selector,.form-select){min-width:unset!important}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}.f-16{font-size:16px}a:hover{color:#0a58ca!important}.ans_section{border:none}.hero-section{max-height:75vh;padding:3% 0%}.hero-title{font-size:4rem;font-weight:900;line-height:1.1;color:#2c3e50}.title-highlight{background:linear-gradient(135deg,#d4a574,#e8c5a0,#f4d2a7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.hero-description{font-size:1.1rem;color:#666;line-height:1.6;text-align:center}.price-highlight{color:#d4a574;font-weight:700}.jewellery-img{border-radius:20px;box-shadow:0 20px 40px #0000001a;object-fit:cover;height:500px}\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.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: i10$2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] }); }
|
15391
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailComponent, isStandalone: true, selector: "simpo-scheme-detail", inputs: { data: "data", index: "index", edit: "edit" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MatDialog, MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n\r\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"plan_desc_section\">\r\n <ng-container *ngTemplateOutlet=\"planDescTemplate\"></ng-container>\r\n </div>\r\n <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\r\n </div>\r\n <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\r\n </div>\r\n <div class=\"redeem_ans_section\" *ngIf=\"schemeDetails?.redeemDesc.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"redeemInfoSection\"></ng-container>\r\n </div>\r\n <div class=\"scheme_work_section\" *ngIf=\"schemeDetails?.schemeWorkingDesc != {} && schemeDetails\">\r\n <ng-container *ngTemplateOutlet=\"schemeWorkSection\"></ng-container>\r\n </div>\r\n <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\r\n </div>\r\n <div class=\"terms_condition_section p-5\"\r\n *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\r\n <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\r\n </div>\r\n</section>\r\n<ng-template #redeemInfoSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How to redeem?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"redeem_info_section\" *ngIf=\"schemeDetails?.redeemDesc\">\r\n {{schemeDetails?.redeemDesc || 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #schemeWorkSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How Does this plan work?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"ans_section\" *ngFor=\"let faq of getKeys(schemeDetails?.schemeWorkingDesc);let i =index\">\r\n <div class=\"d-flex align-items-start gap-3 f-16\">\r\n <span>{{faq}}</span>\r\n <span>{{ schemeDetails?.schemeWorkingDesc?.[faq]?.replaceAll('\\n',' ') || 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #planDescTemplate>\r\n <div class=\"hero-section d-flex align-items-center\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex align-items-center g-5 w-100\">\r\n <div\r\n [ngClass]=\"{'col-md-6': schemeDetails?.imgUrls[0], 'col-12 d-flex align-items-center justify-content-center': !schemeDetails?.imgUrls[0]}\">\r\n <div class=\"hero-content\">\r\n <h1 class=\"hero-title mb-4 d-flex align-items-center\"\r\n [ngClass]=\"{'justify-content-center':!schemeDetails?.imgUrls[0], 'justify-content-start':schemeDetails?.imgUrls[0]}\">\r\n <span class=\"title-highlight\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :'N/A'}}</span>\r\n </h1>\r\n <p class=\"hero-description mb-4\"\r\n [ngClass]=\"{'text-start':schemeDetails?.imgUrls[0],'text-center':!schemeDetails?.imgUrls[0]}\">\r\n {{schemeDetails?.desc ? schemeDetails?.desc :'N/A'}}\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\" *ngIf=\"schemeDetails?.imgUrls[0]\">\r\n <div class=\"hero-image\">\r\n <img [src]=\"schemeDetails?.imgUrls ? schemeDetails?.imgUrls[0] :'N/A'\" alt=\"Pearl Jewelry\"\r\n class=\"jewellery-img w-100\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #aboutUsTemplate>\r\n <div class=\"d-flex flex-column gap-3\">\r\n <div class=\"text_header d-flex align-items-center justify-content-center\">\r\n <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"desc_text\">\r\n {{schemeDetails?.about}}\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #schemeCalculator>\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\r\n <span>Calculate Your Returns</span>\r\n <div class=\"calc_desc\">\r\n See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\r\n your potential returns.\r\n </div>\r\n </div>\r\n <div class=\"calculator_section\">\r\n <div class=\"gold-purity\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '18_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '24_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '22_k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\">\r\n <div class=\"slider-container position-relative\">\r\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"schemeDetails?.valueStep\" class=\"w-100 pale-slider\"\r\n [style.--mdc-slider-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-focus-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-hover-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-active-track-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-ripple-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-value-indicator-color]=\"data?.styles?.background?.accentColor\">\r\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n </mat-slider>\r\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\"> -->\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\r\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\r\n \u20B9 {{option?.value}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <div class=\"row align-items-center justify-content-between mb-3 g-2\">\r\n <!-- Contribution Card -->\r\n <div class=\"col-12 col-sm-6\"\r\n [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Plus Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">+</div>\r\n </div>\r\n\r\n <!-- Benefit Card -->\r\n <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{benefitAmount | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Scheme Benefit\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Equals Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">=</div>\r\n </div>\r\n\r\n <!-- Total Card -->\r\n <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5 text-white\">\r\n <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\r\n \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\r\n </span>\r\n <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </span>\r\n </div>\r\n <div class=\"text-white-50 small\">\r\n Total Redemption Value\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n {{purchasedGram}} gms\r\n </div>\r\n <div class=\"text-muted small\">\r\n Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"terms-and-condition\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\r\n Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\r\n <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n<ng-template #faqTemplate>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">Frequently Asked Questions</h1>\r\n <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\r\n <div class=\"faq-question\">\r\n <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\r\n <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\r\n <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #termsAndConditions>\r\n <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\r\n <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\r\n <h1 class=\"terms-title\">Terms and Conditions</h1>\r\n\r\n <div class=\"terms-content\">\r\n <div class=\"term-item d-flex align-items-center\"\r\n *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\r\n <div class=\"terms_count\">\r\n <h3 class=\"term-heading\">{{ key }}.</h3>\r\n </div>\r\n <div>\r\n <p class=\"term-text mb-0\">\r\n {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"important-note\">\r\n <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\r\n Participants will be notified of any changes via registered email or SMS. Continued\r\n participation after notification constitutes acceptance of revised terms.</p>\r\n </div> -->\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:17px;padding:0% 20%;line-height:1.5rem;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_options{padding:0% 1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.enroll-btn{font-size:16px;border:1px solid}.faq-container{border-radius:16px;padding:40px 0;width:65vw}.faq-title{font-size:1.8rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px;width:80%}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{width:65vw}.terms-title{font-size:1.8rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;padding:20px;border-radius:16px;width:80%}.term-item{padding-bottom:8px;border-bottom:1px solid #e2e8f0;gap:10px}.term-heading{margin:0!important}.term-item:last-of-type{border-bottom:none;padding-bottom:unset}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.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}.payment-row .label{color:#000!important;font-size:16px}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.payment-row:last-child{margin-bottom:0}.amount{color:#333;font-size:14px;font-weight:500}.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}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}@media (min-width :320px) and (max-width : 480px){.calc_desc,.desc_text{padding:0%}.random_options{margin-top:1rem}.hero-section{max-height:unset!important}.hero-section .container{padding:0!important}.p-5{padding:2% 0%!important}.sub-header{margin:.5rem 0px!important}.calculator_section{width:100%}.gold-purity{flex-wrap:wrap}.option{font-size:13px;white-space:nowrap}}@media (max-width: 768px){.terms-section{width:100%}.terms-container{padding:30px 0;width:100%}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px;width:100%}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}.faq-container,.faq-section,.faq-list{width:100%}}@media (min-width:475px){.terms-section{padding:0%!important}.card-container{width:31%;height:13vh;align-items:center}.calc_amount{font-size:1.5rem}}.bonus-message{flex-direction:column!important}.bonus-message :is(.staff-selector,.store_selection){width:100%!important}.redeem_info_section{text-align:center}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}.terms-and-condition :is(.store-selector,.form-select){min-width:unset!important}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}.f-16{font-size:16px}a:hover{color:#0a58ca!important}.ans_section{border:none}.plan_desc_section{padding:3% 0%}.hero-title{font-size:4rem;font-weight:900;line-height:1.1;color:#2c3e50}.title-highlight{background:linear-gradient(135deg,#d4a574,#e8c5a0,#f4d2a7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;text-align:center}.hero-description{font-size:1.1rem;color:#666;line-height:1.6}.price-highlight{color:#d4a574;font-weight:700}.jewellery-img{border-radius:20px;box-shadow:0 20px 40px #0000001a;object-fit:cover;height:500px}\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.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: i10$2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] }); }
|
15349
15392
|
}
|
15350
15393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailComponent, decorators: [{
|
15351
15394
|
type: Component,
|
15352
|
-
args: [{ selector: 'simpo-scheme-detail', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatDialogModule, SpacingHorizontalDirective, FormsModule, TextEditorComponent, MatIcon, ButtonEditorDirective, MatProgressSpinner, ButtonDirectiveDirective, ToastModule, MatSlider, MatSliderModule], providers: [MatDialog, MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n\r\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"plan_desc_section\">\r\n <ng-container *ngTemplateOutlet=\"planDescTemplate\"></ng-container>\r\n </div>\r\n <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\r\n </div>\r\n <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\r\n </div>\r\n <div class=\"redeem_ans_section\" *ngIf=\"schemeDetails?.redeemDesc.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"redeemInfoSection\"></ng-container>\r\n </div>\r\n <div class=\"scheme_work_section\" *ngIf=\"schemeDetails?.schemeWorkingDesc != {} && schemeDetails\">\r\n <ng-container *ngTemplateOutlet=\"schemeWorkSection\"></ng-container>\r\n </div>\r\n <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\r\n </div>\r\n <div class=\"terms_condition_section p-5\"\r\n *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\r\n <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\r\n </div>\r\n</section>\r\n<ng-template #redeemInfoSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How to redeem?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"redeem_info_section\" *ngIf=\"schemeDetails?.redeemDesc\">\r\n {{schemeDetails?.redeemDesc || 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #schemeWorkSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How Does this plan work?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"ans_section\" *ngFor=\"let faq of getKeys(schemeDetails?.schemeWorkingDesc);let i =index\">\r\n <div class=\"d-flex align-items-start gap-3 f-16\">\r\n <span>{{faq}}</span>\r\n <span>{{ schemeDetails?.schemeWorkingDesc?.[faq]?.replaceAll('\\n',' ') || 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #planDescTemplate>\r\n <div class=\"hero-section d-flex align-items-center\">\r\n <div class=\"container\">\r\n <div class=\"row align-items-center g-5\">\r\n <div\r\n [ngClass]=\"{'col-md-6': schemeDetails?.imgUrls[0], 'col-12 d-flex align-items-center justify-content-center': !schemeDetails?.imgUrls[0]}\">\r\n <div class=\"hero-content\">\r\n <h1 class=\"hero-title mb-4 d-flex justify-content-center align-items-center\">\r\n <span class=\"title-highlight\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :'N/A'}}</span>\r\n </h1>\r\n <p class=\"hero-description mb-4\">\r\n {{schemeDetails?.desc ? schemeDetails?.desc :'N/A'}}\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\" *ngIf=\"schemeDetails?.imgUrls[0]\">\r\n <div class=\"hero-image\">\r\n <img [src]=\"schemeDetails?.imgUrls ? schemeDetails?.imgUrls[0] :'N/A'\" alt=\"Pearl Jewelry\"\r\n class=\"jewellery-img w-100\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #aboutUsTemplate>\r\n <div class=\"d-flex flex-column gap-3\">\r\n <div class=\"text_header d-flex align-items-center justify-content-center\">\r\n <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"desc_text\">\r\n {{schemeDetails?.about}}\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #schemeCalculator>\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\r\n <span>Calculate Your Returns</span>\r\n <div class=\"calc_desc\">\r\n See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\r\n your potential returns.\r\n </div>\r\n </div>\r\n <div class=\"calculator_section\">\r\n <div class=\"gold-purity\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '18_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '24_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '22_k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\">\r\n <div class=\"slider-container position-relative\">\r\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"schemeDetails?.valueStep\" class=\"w-100 pale-slider\"\r\n [style.--mdc-slider-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-focus-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-hover-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-active-track-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-ripple-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-value-indicator-color]=\"data?.styles?.background?.accentColor\">\r\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n </mat-slider>\r\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\"> -->\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\r\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\r\n \u20B9 {{option?.value}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <div class=\"row align-items-center justify-content-between mb-3 g-2\">\r\n <!-- Contribution Card -->\r\n <div class=\"col-12 col-sm-6\"\r\n [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Plus Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">+</div>\r\n </div>\r\n\r\n <!-- Benefit Card -->\r\n <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{benefitAmount | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Scheme Benefit\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Equals Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">=</div>\r\n </div>\r\n\r\n <!-- Total Card -->\r\n <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5 text-white\">\r\n <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\r\n \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\r\n </span>\r\n <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </span>\r\n </div>\r\n <div class=\"text-white-50 small\">\r\n Total Redemption Value\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n {{purchasedGram}} gms\r\n </div>\r\n <div class=\"text-muted small\">\r\n Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"terms-and-condition\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\r\n Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\r\n <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n<ng-template #faqTemplate>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">Frequently Asked Questions</h1>\r\n <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\r\n <div class=\"faq-question\">\r\n <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\r\n <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\r\n <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #termsAndConditions>\r\n <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\r\n <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\r\n <h1 class=\"terms-title\">Terms and Conditions</h1>\r\n\r\n <div class=\"terms-content\">\r\n <div class=\"term-item d-flex align-items-center\"\r\n *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\r\n <div class=\"terms_count\">\r\n <h3 class=\"term-heading\">{{ key }}.</h3>\r\n </div>\r\n <div>\r\n <p class=\"term-text mb-0\">\r\n {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"important-note\">\r\n <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\r\n Participants will be notified of any changes via registered email or SMS. Continued\r\n participation after notification constitutes acceptance of revised terms.</p>\r\n </div> -->\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:17px;padding:0% 20%;line-height:1.5rem;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_options{padding:0% 1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.enroll-btn{font-size:16px;border:1px solid}.faq-container{border-radius:16px;padding:40px 0;width:65vw}.faq-title{font-size:2.5rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px;width:80%}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{width:65vw}.terms-title{font-size:2.2rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;padding:20px;border-radius:16px;width:80%}.term-item{padding-bottom:8px;border-bottom:1px solid #e2e8f0;gap:10px}.term-heading{margin:0!important}.term-item:last-of-type{border-bottom:none;padding-bottom:unset}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.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}.payment-row .label{color:#000!important;font-size:16px}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.payment-row:last-child{margin-bottom:0}.amount{color:#333;font-size:14px;font-weight:500}.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}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}@media (min-width :320px) and (max-width : 480px){.calc_desc,.desc_text{padding:0%}.random_options{margin-top:1rem}.hero-section{max-height:unset!important}.hero-section .container{padding:0!important}.p-5{padding:2% 0%!important}.sub-header{margin:.5rem 0px!important}.calculator_section{width:100%}.gold-purity{flex-wrap:wrap}.option{font-size:13px;white-space:nowrap}}@media (max-width: 768px){.terms-section{width:100%}.terms-container{padding:30px 0;width:100%}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px;width:100%}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}.faq-container,.faq-section,.faq-list{width:100%}}@media (min-width:475px){.terms-section{padding:0%!important}.card-container{width:31%;height:13vh;align-items:center}.calc_amount{font-size:1.5rem}}.bonus-message{flex-direction:column!important}.bonus-message :is(.staff-selector,.store_selection){width:100%!important}.redeem_info_section{text-align:center}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}.terms-and-condition :is(.store-selector,.form-select){min-width:unset!important}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}.f-16{font-size:16px}a:hover{color:#0a58ca!important}.ans_section{border:none}.hero-section{max-height:75vh;padding:3% 0%}.hero-title{font-size:4rem;font-weight:900;line-height:1.1;color:#2c3e50}.title-highlight{background:linear-gradient(135deg,#d4a574,#e8c5a0,#f4d2a7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.hero-description{font-size:1.1rem;color:#666;line-height:1.6;text-align:center}.price-highlight{color:#d4a574;font-weight:700}.jewellery-img{border-radius:20px;box-shadow:0 20px 40px #0000001a;object-fit:cover;height:500px}\n"] }]
|
15395
|
+
args: [{ selector: 'simpo-scheme-detail', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatDialogModule, SpacingHorizontalDirective, FormsModule, TextEditorComponent, MatIcon, ButtonEditorDirective, MatProgressSpinner, ButtonDirectiveDirective, ToastModule, MatSlider, MatSliderModule], providers: [MatDialog, MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n\r\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"plan_desc_section\">\r\n <ng-container *ngTemplateOutlet=\"planDescTemplate\"></ng-container>\r\n </div>\r\n <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\r\n </div>\r\n <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\r\n </div>\r\n <div class=\"redeem_ans_section\" *ngIf=\"schemeDetails?.redeemDesc.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"redeemInfoSection\"></ng-container>\r\n </div>\r\n <div class=\"scheme_work_section\" *ngIf=\"schemeDetails?.schemeWorkingDesc != {} && schemeDetails\">\r\n <ng-container *ngTemplateOutlet=\"schemeWorkSection\"></ng-container>\r\n </div>\r\n <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\r\n </div>\r\n <div class=\"terms_condition_section p-5\"\r\n *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\r\n <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\r\n </div>\r\n</section>\r\n<ng-template #redeemInfoSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How to redeem?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"redeem_info_section\" *ngIf=\"schemeDetails?.redeemDesc\">\r\n {{schemeDetails?.redeemDesc || 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #schemeWorkSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How Does this plan work?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"ans_section\" *ngFor=\"let faq of getKeys(schemeDetails?.schemeWorkingDesc);let i =index\">\r\n <div class=\"d-flex align-items-start gap-3 f-16\">\r\n <span>{{faq}}</span>\r\n <span>{{ schemeDetails?.schemeWorkingDesc?.[faq]?.replaceAll('\\n',' ') || 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #planDescTemplate>\r\n <div class=\"hero-section d-flex align-items-center\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex align-items-center g-5 w-100\">\r\n <div\r\n [ngClass]=\"{'col-md-6': schemeDetails?.imgUrls[0], 'col-12 d-flex align-items-center justify-content-center': !schemeDetails?.imgUrls[0]}\">\r\n <div class=\"hero-content\">\r\n <h1 class=\"hero-title mb-4 d-flex align-items-center\"\r\n [ngClass]=\"{'justify-content-center':!schemeDetails?.imgUrls[0], 'justify-content-start':schemeDetails?.imgUrls[0]}\">\r\n <span class=\"title-highlight\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :'N/A'}}</span>\r\n </h1>\r\n <p class=\"hero-description mb-4\"\r\n [ngClass]=\"{'text-start':schemeDetails?.imgUrls[0],'text-center':!schemeDetails?.imgUrls[0]}\">\r\n {{schemeDetails?.desc ? schemeDetails?.desc :'N/A'}}\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\" *ngIf=\"schemeDetails?.imgUrls[0]\">\r\n <div class=\"hero-image\">\r\n <img [src]=\"schemeDetails?.imgUrls ? schemeDetails?.imgUrls[0] :'N/A'\" alt=\"Pearl Jewelry\"\r\n class=\"jewellery-img w-100\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #aboutUsTemplate>\r\n <div class=\"d-flex flex-column gap-3\">\r\n <div class=\"text_header d-flex align-items-center justify-content-center\">\r\n <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"desc_text\">\r\n {{schemeDetails?.about}}\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #schemeCalculator>\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\r\n <span>Calculate Your Returns</span>\r\n <div class=\"calc_desc\">\r\n See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\r\n your potential returns.\r\n </div>\r\n </div>\r\n <div class=\"calculator_section\">\r\n <div class=\"gold-purity\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '18_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '24_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '22_k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\">\r\n <div class=\"slider-container position-relative\">\r\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"schemeDetails?.valueStep\" class=\"w-100 pale-slider\"\r\n [style.--mdc-slider-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-focus-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-hover-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-active-track-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-ripple-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-value-indicator-color]=\"data?.styles?.background?.accentColor\">\r\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n </mat-slider>\r\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\"> -->\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\r\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\r\n \u20B9 {{option?.value}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <div class=\"row align-items-center justify-content-between mb-3 g-2\">\r\n <!-- Contribution Card -->\r\n <div class=\"col-12 col-sm-6\"\r\n [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Plus Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">+</div>\r\n </div>\r\n\r\n <!-- Benefit Card -->\r\n <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{benefitAmount | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Scheme Benefit\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Equals Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">=</div>\r\n </div>\r\n\r\n <!-- Total Card -->\r\n <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5 text-white\">\r\n <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\r\n \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\r\n </span>\r\n <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </span>\r\n </div>\r\n <div class=\"text-white-50 small\">\r\n Total Redemption Value\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n {{purchasedGram}} gms\r\n </div>\r\n <div class=\"text-muted small\">\r\n Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"terms-and-condition\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\r\n Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\r\n <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n<ng-template #faqTemplate>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">Frequently Asked Questions</h1>\r\n <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\r\n <div class=\"faq-question\">\r\n <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\r\n <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\r\n <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #termsAndConditions>\r\n <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\r\n <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\r\n <h1 class=\"terms-title\">Terms and Conditions</h1>\r\n\r\n <div class=\"terms-content\">\r\n <div class=\"term-item d-flex align-items-center\"\r\n *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\r\n <div class=\"terms_count\">\r\n <h3 class=\"term-heading\">{{ key }}.</h3>\r\n </div>\r\n <div>\r\n <p class=\"term-text mb-0\">\r\n {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"important-note\">\r\n <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\r\n Participants will be notified of any changes via registered email or SMS. Continued\r\n participation after notification constitutes acceptance of revised terms.</p>\r\n </div> -->\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:17px;padding:0% 20%;line-height:1.5rem;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_options{padding:0% 1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.enroll-btn{font-size:16px;border:1px solid}.faq-container{border-radius:16px;padding:40px 0;width:65vw}.faq-title{font-size:1.8rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px;width:80%}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{width:65vw}.terms-title{font-size:1.8rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;padding:20px;border-radius:16px;width:80%}.term-item{padding-bottom:8px;border-bottom:1px solid #e2e8f0;gap:10px}.term-heading{margin:0!important}.term-item:last-of-type{border-bottom:none;padding-bottom:unset}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.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}.payment-row .label{color:#000!important;font-size:16px}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.payment-row:last-child{margin-bottom:0}.amount{color:#333;font-size:14px;font-weight:500}.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}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}@media (min-width :320px) and (max-width : 480px){.calc_desc,.desc_text{padding:0%}.random_options{margin-top:1rem}.hero-section{max-height:unset!important}.hero-section .container{padding:0!important}.p-5{padding:2% 0%!important}.sub-header{margin:.5rem 0px!important}.calculator_section{width:100%}.gold-purity{flex-wrap:wrap}.option{font-size:13px;white-space:nowrap}}@media (max-width: 768px){.terms-section{width:100%}.terms-container{padding:30px 0;width:100%}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px;width:100%}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}.faq-container,.faq-section,.faq-list{width:100%}}@media (min-width:475px){.terms-section{padding:0%!important}.card-container{width:31%;height:13vh;align-items:center}.calc_amount{font-size:1.5rem}}.bonus-message{flex-direction:column!important}.bonus-message :is(.staff-selector,.store_selection){width:100%!important}.redeem_info_section{text-align:center}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}.terms-and-condition :is(.store-selector,.form-select){min-width:unset!important}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}.f-16{font-size:16px}a:hover{color:#0a58ca!important}.ans_section{border:none}.plan_desc_section{padding:3% 0%}.hero-title{font-size:4rem;font-weight:900;line-height:1.1;color:#2c3e50}.title-highlight{background:linear-gradient(135deg,#d4a574,#e8c5a0,#f4d2a7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;text-align:center}.hero-description{font-size:1.1rem;color:#666;line-height:1.6}.price-highlight{color:#d4a574;font-weight:700}.jewellery-img{border-radius:20px;box-shadow:0 20px 40px #0000001a;object-fit:cover;height:500px}\n"] }]
|
15353
15396
|
}], ctorParameters: () => [{ type: i2$2.ActivatedRoute }, { type: RestService }, { type: StorageServiceService }, { type: i1$1.MatDialog }, { type: i2$2.Router }, { type: EventsService }, { type: i6$1.MessageService }], propDecorators: { data: [{
|
15354
15397
|
type: Input
|
15355
15398
|
}], index: [{
|
@@ -15421,7 +15464,7 @@ class SchemesComponent extends BaseSection {
|
|
15421
15464
|
this.router.navigate(['/scheme-detail'], { queryParams: { schemeId: scheme?.id } });
|
15422
15465
|
}
|
15423
15466
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemesComponent, deps: [{ token: RestService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
15424
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemesComponent, isStandalone: true, selector: "simpo-schemes", inputs: { data: "data", edit: "edit", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"d-flex flex-column\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [id]=\"data?.id\" [simpoSpacing]=\"spacingLayout\">\r\n <ng-container *ngFor=\"let input of this.content?.inputText ?? []\">\r\n <simpo-text-editor [(value)]=\"input.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <div class=\"row mt-2\" [simpoAnimation]=\"styles?.animation\" [class]=\"getParentClass()\" [id]=\"data?.id\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <ng-container *ngFor=\"let scheme of schemes; let i = index\">\r\n <div class=\"d-flex flex-column\" [class]=\"getClass(i)\" (click)=\"showSchemeDetails(scheme)\">\r\n <img [src]=\"scheme?.imgUrls[0] ? scheme?.imgUrls[0] : 'https://prodpassbookapp.blob.core.windows.net/ssp-prod/Store_Banner/jpg.webp?sv=2024-11-04&ss=bfqt&srt=sco&sp=rwdlacupiytfx&se=2030-02-14T01:34:48Z&st=2025-06-17T17:34:48Z&spr=https,http&sig=HohODPqfCy%2B%2BScNrluPdgrYmZYwXlXmsyk4jQ%2F82AtI%3D'\"\r\n [id]=\"data?.id\" alt=\"Scheme Image\" [simpoCorner]=\"styles?.corners\"\r\n [simpoImageDirective]=\"styles?.image\">\r\n <ng-container *ngIf=\"content?.display?.showText\">\r\n <div class=\"scheme-text mt-2 fw-bold fs-18\" [style.color]=\"styles?.background?.accentColor\">\r\n {{scheme?.schemeName ?? \"\"}}</div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\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: [".hover_effect{position:unset;width:100%;height:100%}.total-container{position:relative}.flex-nowrap{flex-wrap:nowrap!important}.fs-18{font-size:18px}\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: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingDirective, selector: "[simpoSpacing]", inputs: ["simpoSpacing"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
|
15467
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemesComponent, isStandalone: true, selector: "simpo-schemes", inputs: { data: "data", edit: "edit", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"d-flex flex-column\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [id]=\"data?.id\" [simpoSpacing]=\"spacingLayout\">\r\n <ng-container *ngFor=\"let input of this.content?.inputText ?? []\">\r\n <simpo-text-editor [(value)]=\"input.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <div class=\"row mt-2\" [simpoAnimation]=\"styles?.animation\" [class]=\"getParentClass()\" [id]=\"data?.id\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <ng-container *ngFor=\"let scheme of schemes; let i = index\">\r\n <div class=\"d-flex flex-column\" [class]=\"getClass(i)\" (click)=\"showSchemeDetails(scheme)\">\r\n <img [src]=\"scheme?.imgUrls[0] && scheme?.imgUrls[0] != null && scheme?.imgUrls[0] != '' ? scheme?.imgUrls[0] : 'https://prodpassbookapp.blob.core.windows.net/ssp-prod/Store_Banner/jpg.webp?sv=2024-11-04&ss=bfqt&srt=sco&sp=rwdlacupiytfx&se=2030-02-14T01:34:48Z&st=2025-06-17T17:34:48Z&spr=https,http&sig=HohODPqfCy%2B%2BScNrluPdgrYmZYwXlXmsyk4jQ%2F82AtI%3D'\"\r\n [id]=\"data?.id\" alt=\"Scheme Image\" [simpoCorner]=\"styles?.corners\"\r\n [simpoImageDirective]=\"styles?.image\">\r\n <ng-container *ngIf=\"content?.display?.showText\">\r\n <div class=\"scheme-text mt-2 fw-bold fs-18\" [style.color]=\"styles?.background?.accentColor\">\r\n {{scheme?.schemeName ?? \"\"}}</div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\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: [".hover_effect{position:unset;width:100%;height:100%}.total-container{position:relative}.flex-nowrap{flex-wrap:nowrap!important}.fs-18{font-size:18px}\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: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { 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: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingDirective, selector: "[simpoSpacing]", inputs: ["simpoSpacing"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
|
15425
15468
|
}
|
15426
15469
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemesComponent, decorators: [{
|
15427
15470
|
type: Component,
|
@@ -15441,7 +15484,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
15441
15484
|
ImageDirectiveDirective,
|
15442
15485
|
ContentFitDirective,
|
15443
15486
|
ColorDirective
|
15444
|
-
], template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"d-flex flex-column\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [id]=\"data?.id\" [simpoSpacing]=\"spacingLayout\">\r\n <ng-container *ngFor=\"let input of this.content?.inputText ?? []\">\r\n <simpo-text-editor [(value)]=\"input.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <div class=\"row mt-2\" [simpoAnimation]=\"styles?.animation\" [class]=\"getParentClass()\" [id]=\"data?.id\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <ng-container *ngFor=\"let scheme of schemes; let i = index\">\r\n <div class=\"d-flex flex-column\" [class]=\"getClass(i)\" (click)=\"showSchemeDetails(scheme)\">\r\n <img [src]=\"scheme?.imgUrls[0] ? scheme?.imgUrls[0] : 'https://prodpassbookapp.blob.core.windows.net/ssp-prod/Store_Banner/jpg.webp?sv=2024-11-04&ss=bfqt&srt=sco&sp=rwdlacupiytfx&se=2030-02-14T01:34:48Z&st=2025-06-17T17:34:48Z&spr=https,http&sig=HohODPqfCy%2B%2BScNrluPdgrYmZYwXlXmsyk4jQ%2F82AtI%3D'\"\r\n [id]=\"data?.id\" alt=\"Scheme Image\" [simpoCorner]=\"styles?.corners\"\r\n [simpoImageDirective]=\"styles?.image\">\r\n <ng-container *ngIf=\"content?.display?.showText\">\r\n <div class=\"scheme-text mt-2 fw-bold fs-18\" [style.color]=\"styles?.background?.accentColor\">\r\n {{scheme?.schemeName ?? \"\"}}</div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\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: [".hover_effect{position:unset;width:100%;height:100%}.total-container{position:relative}.flex-nowrap{flex-wrap:nowrap!important}.fs-18{font-size:18px}\n"] }]
|
15487
|
+
], template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"d-flex flex-column\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [id]=\"data?.id\" [simpoSpacing]=\"spacingLayout\">\r\n <ng-container *ngFor=\"let input of this.content?.inputText ?? []\">\r\n <simpo-text-editor [(value)]=\"input.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <div class=\"row mt-2\" [simpoAnimation]=\"styles?.animation\" [class]=\"getParentClass()\" [id]=\"data?.id\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <ng-container *ngFor=\"let scheme of schemes; let i = index\">\r\n <div class=\"d-flex flex-column\" [class]=\"getClass(i)\" (click)=\"showSchemeDetails(scheme)\">\r\n <img [src]=\"scheme?.imgUrls[0] && scheme?.imgUrls[0] != null && scheme?.imgUrls[0] != '' ? scheme?.imgUrls[0] : 'https://prodpassbookapp.blob.core.windows.net/ssp-prod/Store_Banner/jpg.webp?sv=2024-11-04&ss=bfqt&srt=sco&sp=rwdlacupiytfx&se=2030-02-14T01:34:48Z&st=2025-06-17T17:34:48Z&spr=https,http&sig=HohODPqfCy%2B%2BScNrluPdgrYmZYwXlXmsyk4jQ%2F82AtI%3D'\"\r\n [id]=\"data?.id\" alt=\"Scheme Image\" [simpoCorner]=\"styles?.corners\"\r\n [simpoImageDirective]=\"styles?.image\">\r\n <ng-container *ngIf=\"content?.display?.showText\">\r\n <div class=\"scheme-text mt-2 fw-bold fs-18\" [style.color]=\"styles?.background?.accentColor\">\r\n {{scheme?.schemeName ?? \"\"}}</div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\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: [".hover_effect{position:unset;width:100%;height:100%}.total-container{position:relative}.flex-nowrap{flex-wrap:nowrap!important}.fs-18{font-size:18px}\n"] }]
|
15445
15488
|
}], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }], propDecorators: { data: [{
|
15446
15489
|
type: Input
|
15447
15490
|
}], edit: [{
|
@@ -21448,12 +21491,13 @@ class ReturnsCalculatorComponent extends BaseSection {
|
|
21448
21491
|
this.maxAmount = scheme?.maxInstallmentValue ? scheme.maxInstallmentValue : this.maxAmount;
|
21449
21492
|
this.maturityCount = scheme?.maturityCount ? scheme.maturityCount : this.maturityCount;
|
21450
21493
|
this.monthlyAmount = this.minAmount;
|
21451
|
-
this.installmentOptions = scheme?.suggestedValues;
|
21494
|
+
// this.installmentOptions = scheme?.suggestedValues;
|
21452
21495
|
this.stores = scheme?.storeList ? scheme.storeList : [];
|
21453
21496
|
this.selectedStaff = "";
|
21454
21497
|
this.selectedStore = {};
|
21455
|
-
|
21498
|
+
console.log(scheme);
|
21456
21499
|
this.enrolledScheme = scheme;
|
21500
|
+
this.enrolledScheme?.suggestedValues?.forEach((scheme) => this.installmentOptions.push({ status: false, value: scheme }));
|
21457
21501
|
this.benefitAmount = 0;
|
21458
21502
|
this.getMetalPrice();
|
21459
21503
|
this.onAmountChange();
|
@@ -21486,7 +21530,16 @@ class ReturnsCalculatorComponent extends BaseSection {
|
|
21486
21530
|
});
|
21487
21531
|
}
|
21488
21532
|
setMonthlyAmount(amount) {
|
21489
|
-
this.
|
21533
|
+
this.installmentOptions.forEach((option) => {
|
21534
|
+
if (option.value == amount?.value) {
|
21535
|
+
option.status = true;
|
21536
|
+
this.monthlyAmount = amount?.value;
|
21537
|
+
}
|
21538
|
+
else {
|
21539
|
+
option.status = false;
|
21540
|
+
}
|
21541
|
+
});
|
21542
|
+
this.monthlyAmount = amount.value;
|
21490
21543
|
this.onAmountChange();
|
21491
21544
|
}
|
21492
21545
|
get individualContribution() {
|
@@ -21656,7 +21709,7 @@ class ReturnsCalculatorComponent extends BaseSection {
|
|
21656
21709
|
this.router.navigate(['/scheme-detail'], { queryParams: { schemeId: this.enrolledScheme?.id, termsAndCondition: true } });
|
21657
21710
|
}
|
21658
21711
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: i2$2.Router }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
|
21659
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReturnsCalculatorComponent, isStandalone: true, selector: "simpo-returns-calculator", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, 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\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n <div class=\"calculator-header text-center mb-4 w-100\">\r\n <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n </div>\r\n <div class=\"sub-header mb-3 p-3\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n </div>\r\n <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n <ng-container *ngFor=\"let scheme of allSchemes\">\r\n <div class=\"form-check scheme-option p-3 border rounded border-primary ind-border\"\r\n (click)=\"onSchemeChange(scheme)\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n <div class=\"form-check-label ms-2\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n \uD83D\uDC64\r\n <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n 'N/A'}}</div>\r\n </div>\r\n <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"gold-purity\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n <div class=\"slider-container position-relative\">\r\n <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n (ngModelChange)=\"onAmountChange()\">\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n (click)=\"setMonthlyAmount(option)\">\r\n {{option}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <!-- <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n </div> -->\r\n\r\n <div class=\"row mb-3\">\r\n <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n number}}</div>\r\n <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)+benefitAmount) | number}}</div>\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\r\n <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\r\n <div class=\"result-label small color-white\">Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\r\n (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n (click)=\"enrollScheme(enrolledScheme)\"\r\n [style.borderColor]=\"styles?.background?.accentColor\">\r\n <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *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: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.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}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.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}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}@media (max-width:475px){.gold-purity{flex-wrap:wrap;gap:.5rem!important;padding:.5rem}.enrolled-gram{font-size:1rem;white-space:nowrap}.bonus-message{flex-direction:column}.staff-selector,.store_selection{width:100%!important}.scheme-results{padding:20px 0}}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}a:hover{color:#0a58ca!important}\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: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
|
21712
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReturnsCalculatorComponent, isStandalone: true, selector: "simpo-returns-calculator", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, 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\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n <div class=\"calculator-header text-center mb-4 w-100\">\r\n <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n </div>\r\n <div class=\"sub-header mb-3 p-3\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n </div>\r\n <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n <ng-container *ngFor=\"let scheme of allSchemes\">\r\n <div class=\"form-check scheme-option p-3 border rounded border-primary ind-border\"\r\n (click)=\"onSchemeChange(scheme)\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n <div class=\"form-check-label ms-2\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n \uD83D\uDC64\r\n <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n 'N/A'}}</div>\r\n </div>\r\n <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"gold-purity\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n <div class=\"slider-container position-relative\">\r\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"enrolledScheme?.valueStep\"\r\n class=\"w-100 pale-slider\"\r\n [style.--mdc-slider-handle-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-focus-handle-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-hover-handle-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-active-track-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"styles?.background?.accentColor\"\r\n [style.--mat-slider-ripple-color]=\"styles?.background?.accentColor\"\r\n [style.--mat-slider-value-indicator-color]=\"styles?.background?.accentColor\">\r\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n </mat-slider>\r\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n (ngModelChange)=\"onAmountChange()\"> -->\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n (click)=\"setMonthlyAmount(option)\">\r\n \u20B9 {{option?.value ? option?.value : 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <!-- <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n </div> -->\r\n\r\n <div class=\"row mb-3\">\r\n <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n number}}</div>\r\n <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)+benefitAmount) | number}}</div>\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\r\n <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\r\n <div class=\"result-label small color-white\">Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\r\n (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n (click)=\"enrollScheme(enrolledScheme)\"\r\n [style.borderColor]=\"styles?.background?.accentColor\">\r\n <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *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: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.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}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.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}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}@media (max-width:475px){.gold-purity{flex-wrap:wrap;gap:.5rem!important;padding:.5rem}.enrolled-gram{font-size:1rem;white-space:nowrap}.bonus-message{flex-direction:column}.staff-selector,.store_selection{width:100%!important}.scheme-results{padding:20px 0}}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}a:hover{color:#0a58ca!important}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { 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: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: i10$2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] }); }
|
21660
21713
|
}
|
21661
21714
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, decorators: [{
|
21662
21715
|
type: Component,
|
@@ -21676,8 +21729,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
21676
21729
|
TextEditorComponent,
|
21677
21730
|
ButtonEditorDirective,
|
21678
21731
|
MatProgressSpinner,
|
21679
|
-
ToastModule
|
21680
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n <div class=\"calculator-header text-center mb-4 w-100\">\r\n <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n </div>\r\n <div class=\"sub-header mb-3 p-3\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n </div>\r\n <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n <ng-container *ngFor=\"let scheme of allSchemes\">\r\n <div class=\"form-check scheme-option p-3 border rounded border-primary ind-border\"\r\n (click)=\"onSchemeChange(scheme)\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n <div class=\"form-check-label ms-2\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n \uD83D\uDC64\r\n <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n 'N/A'}}</div>\r\n </div>\r\n <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"gold-purity\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n <div class=\"slider-container position-relative\">\r\n <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n (ngModelChange)=\"onAmountChange()\">\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n (click)=\"setMonthlyAmount(option)\">\r\n {{option}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <!-- <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n </div> -->\r\n\r\n <div class=\"row mb-3\">\r\n <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n number}}</div>\r\n <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)+benefitAmount) | number}}</div>\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\r\n <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\r\n <div class=\"result-label small color-white\">Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\r\n (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n (click)=\"enrollScheme(enrolledScheme)\"\r\n [style.borderColor]=\"styles?.background?.accentColor\">\r\n <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *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: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.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}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.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}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}@media (max-width:475px){.gold-purity{flex-wrap:wrap;gap:.5rem!important;padding:.5rem}.enrolled-gram{font-size:1rem;white-space:nowrap}.bonus-message{flex-direction:column}.staff-selector,.store_selection{width:100%!important}.scheme-results{padding:20px 0}}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}a:hover{color:#0a58ca!important}\n"] }]
|
21732
|
+
ToastModule,
|
21733
|
+
MatSlider,
|
21734
|
+
MatSliderModule
|
21735
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n <div class=\"calculator-header text-center mb-4 w-100\">\r\n <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n </div>\r\n <div class=\"sub-header mb-3 p-3\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n </div>\r\n <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n <ng-container *ngFor=\"let scheme of allSchemes\">\r\n <div class=\"form-check scheme-option p-3 border rounded border-primary ind-border\"\r\n (click)=\"onSchemeChange(scheme)\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n <div class=\"form-check-label ms-2\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n \uD83D\uDC64\r\n <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n 'N/A'}}</div>\r\n </div>\r\n <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"gold-purity\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n <div class=\"slider-container position-relative\">\r\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"enrolledScheme?.valueStep\"\r\n class=\"w-100 pale-slider\"\r\n [style.--mdc-slider-handle-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-focus-handle-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-hover-handle-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-active-track-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"styles?.background?.accentColor\"\r\n [style.--mat-slider-ripple-color]=\"styles?.background?.accentColor\"\r\n [style.--mat-slider-value-indicator-color]=\"styles?.background?.accentColor\">\r\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n </mat-slider>\r\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n (ngModelChange)=\"onAmountChange()\"> -->\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n (click)=\"setMonthlyAmount(option)\">\r\n \u20B9 {{option?.value ? option?.value : 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <!-- <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n </div> -->\r\n\r\n <div class=\"row mb-3\">\r\n <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n number}}</div>\r\n <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)+benefitAmount) | number}}</div>\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\r\n <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\r\n <div class=\"result-label small color-white\">Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\r\n (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n (click)=\"enrollScheme(enrolledScheme)\"\r\n [style.borderColor]=\"styles?.background?.accentColor\">\r\n <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *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: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.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}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.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}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}@media (max-width:475px){.gold-purity{flex-wrap:wrap;gap:.5rem!important;padding:.5rem}.enrolled-gram{font-size:1rem;white-space:nowrap}.bonus-message{flex-direction:column}.staff-selector,.store_selection{width:100%!important}.scheme-results{padding:20px 0}}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}a:hover{color:#0a58ca!important}\n"] }]
|
21681
21736
|
}], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: i2$2.Router }, { type: i6$1.MessageService }], propDecorators: { showChargesTemplate: [{
|
21682
21737
|
type: ViewChild,
|
21683
21738
|
args: ['showCharges', { static: true }]
|