simpo-component-library 3.6.475 → 3.6.477
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/ecommerce/sections/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 +6 -3
- package/esm2022/lib/elements/text-editor/text-editor.component.mjs +1 -2
- package/esm2022/lib/sections/process-modern/process-modern.component.mjs +3 -3
- package/esm2022/lib/sections/process-section/process-section.component.mjs +3 -3
- package/esm2022/lib/sections/scheme-detail/scheme-detail.component.mjs +7 -6
- package/esm2022/lib/services/image-upload-service.service.mjs +2 -2
- package/fesm2022/simpo-component-library.mjs +36 -21
- package/fesm2022/simpo-component-library.mjs.map +1 -1
- package/lib/ecommerce/sections/returns-calculator/returns-calculator.component.d.ts +2 -2
- package/lib/elements/pricing-s1/pricing-s1.component.d.ts +1 -1
- package/lib/sections/banner-carousel/banner-carousel.component.d.ts +1 -1
- package/lib/sections/pricing-section/pricing-section.component.d.ts +1 -1
- package/package.json +1 -1
- package/simpo-component-library-3.6.477.tgz +0 -0
- package/simpo-component-library-3.6.475.tgz +0 -0
@@ -814,7 +814,7 @@ class ImageUplaodService {
|
|
814
814
|
// CloudFront distribution domain
|
815
815
|
const cloudfrontDomain = this.bucketUrl.bucketDetails.Bucket == 'dev-beeos' ? 'https://d2yx15pncgmu63.cloudfront.net' : 'https://d2z9497xp8xb12.cloudfront.net';
|
816
816
|
// Create a unique file name
|
817
|
-
const fileName = `${folderName}/${Date.now()}-${file.name}`;
|
817
|
+
const fileName = `${folderName}/${Date.now()}-${file.name.replace(' ', '_')}`;
|
818
818
|
// Convert file to buffer
|
819
819
|
const fileBuffer = await this.fileToArrayBuffer(file);
|
820
820
|
// Prepare the upload parameters
|
@@ -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) {
|
@@ -10170,6 +10169,9 @@ class PricingS1Component extends BaseSection {
|
|
10170
10169
|
redirectTo() {
|
10171
10170
|
}
|
10172
10171
|
getClass() {
|
10172
|
+
if (window.innerWidth <= 475) {
|
10173
|
+
return 'col-12';
|
10174
|
+
}
|
10173
10175
|
if (this.content?.listItem?.data?.length === 1) {
|
10174
10176
|
return 'col-12';
|
10175
10177
|
}
|
@@ -10184,7 +10186,7 @@ class PricingS1Component extends BaseSection {
|
|
10184
10186
|
}
|
10185
10187
|
}
|
10186
10188
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingS1Component, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
10187
|
-
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>\n <div class=\"pricing-options row w-100\">\n <div\n [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data\"\n [attr.class]=\"getClass() + ' position-relative individual-options mb-2'\"\n [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true}\"\n [ngStyle]=\"{'border': options?.highlight?.highlighted ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\n <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\n *ngIf=\"options?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div>\n <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\" [id]=\"data?.id\"\n [simpoObjectPosition]=\"options.image.position\" [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \"\n alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\n [class]=\"data?.id+(options?.image?.id || '')\">\n <div class=\"heading-small\">\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"heading-large price\">\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc mb-3\">\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\n <div class=\"d-flex align-items-center\">\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\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\"\n fill=\"#4C63D9\" />\n </svg> -->\n </div>\n <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <div class=\"btn mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\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> -->\n <button class=\"custom-btn d-flex gap-1\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\"\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\n <div>{{options?.button?.label}}</div>\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon\" [ngStyle]=\"{\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\n 'mask-image': 'url(' + options?.button?.icon?.url + ')',\n 'mask-repeat': 'no-repeat',\n 'mask-size': 'cover',\n 'width': '25px',\n 'height': '25px',\n }\"></div>\n </button>\n </div>\n </div>\n </div>\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: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"] }] }); }
|
10189
|
+
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>\n <div class=\"pricing-options row w-100\">\n <div\n [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data\"\n [attr.class]=\"getClass() + ' position-relative individual-options mb-2'\"\n [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true}\"\n [ngStyle]=\"{'border': options?.highlight?.highlighted ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\n <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\n *ngIf=\"options?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div>\n <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\" [id]=\"data?.id\"\n [simpoObjectPosition]=\"options.image.position\" [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \"\n alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\n [class]=\"data?.id+(options?.image?.id || '')\">\n <div class=\"heading-small\">\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"heading-large price\">\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc mb-3\">\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\n <div class=\"d-flex align-items-center\">\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\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\"\n fill=\"#4C63D9\" />\n </svg> -->\n </div>\n <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <div class=\"btn mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\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> -->\n <button class=\"custom-btn d-flex gap-1\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\"\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\n <div>{{options?.button?.label}}</div>\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon\" [ngStyle]=\"{\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\n 'mask-image': 'url(' + options?.button?.icon?.url + ')',\n 'mask-repeat': 'no-repeat',\n 'mask-size': 'cover',\n 'width': '25px',\n 'height': '25px',\n }\"></div>\n </button>\n </div>\n </div>\n </div>\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"] }] }); }
|
10188
10190
|
}
|
10189
10191
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingS1Component, decorators: [{
|
10190
10192
|
type: Component,
|
@@ -10200,7 +10202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
10200
10202
|
SimpoButtonComponent,
|
10201
10203
|
ButtonEditorDirective,
|
10202
10204
|
TranslateOnhoverDirective
|
10203
|
-
], template: "<section>\n <div class=\"pricing-options row w-100\">\n <div\n [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data\"\n [attr.class]=\"getClass() + ' position-relative individual-options mb-2'\"\n [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true}\"\n [ngStyle]=\"{'border': options?.highlight?.highlighted ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\n <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\n *ngIf=\"options?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div>\n <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\" [id]=\"data?.id\"\n [simpoObjectPosition]=\"options.image.position\" [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \"\n alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\n [class]=\"data?.id+(options?.image?.id || '')\">\n <div class=\"heading-small\">\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"heading-large price\">\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc mb-3\">\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\n <div class=\"d-flex align-items-center\">\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\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\"\n fill=\"#4C63D9\" />\n </svg> -->\n </div>\n <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <div class=\"btn mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\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> -->\n <button class=\"custom-btn d-flex gap-1\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\"\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\n <div>{{options?.button?.label}}</div>\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon\" [ngStyle]=\"{\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\n 'mask-image': 'url(' + options?.button?.icon?.url + ')',\n 'mask-repeat': 'no-repeat',\n 'mask-size': 'cover',\n 'width': '25px',\n 'height': '25px',\n }\"></div>\n </button>\n </div>\n </div>\n </div>\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:30%!important}\n"] }]
|
10205
|
+
], template: "<section>\n <div class=\"pricing-options row w-100\">\n <div\n [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data\"\n [attr.class]=\"getClass() + ' position-relative individual-options mb-2'\"\n [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true}\"\n [ngStyle]=\"{'border': options?.highlight?.highlighted ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\n <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\n *ngIf=\"options?.highlight?.highlighted === true\">\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div>\n <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\" [id]=\"data?.id\"\n [simpoObjectPosition]=\"options.image.position\" [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \"\n alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\n [class]=\"data?.id+(options?.image?.id || '')\">\n <div class=\"heading-small\">\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"heading-large price\">\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc mb-3\">\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\n <div class=\"d-flex align-items-center\">\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\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\"\n fill=\"#4C63D9\" />\n </svg> -->\n </div>\n <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n <div class=\"btn mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\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> -->\n <button class=\"custom-btn d-flex gap-1\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\"\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\n <div>{{options?.button?.label}}</div>\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon\" [ngStyle]=\"{\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\n 'mask-image': 'url(' + options?.button?.icon?.url + ')',\n 'mask-repeat': 'no-repeat',\n 'mask-size': 'cover',\n 'width': '25px',\n 'height': '25px',\n }\"></div>\n </button>\n </div>\n </div>\n </div>\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"] }]
|
10204
10206
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
10205
10207
|
type: Input
|
10206
10208
|
}], edit: [{
|
@@ -11709,7 +11711,7 @@ class ProcessSectionComponent extends BaseSection {
|
|
11709
11711
|
return this.content?.listItem?.data?.length ?? 0;
|
11710
11712
|
}
|
11711
11713
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProcessSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
11712
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProcessSectionComponent, isStandalone: true, selector: "simpo-process-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\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n class=\"total-container\" [attr.style]=\"customClass\">\n <div class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\n\n <div class=\"col-lg-6 d-flex flex-column justify-content-start gap-15 content-side\"\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\n [class.col-lg-10]=\"!content?.image?.showImage\">\n <div *ngFor=\"let item of content?.inputText\">\n <div [simpoColor]=\"styles?.background?.color\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.processSectionDisplayStyle == 'STYLE1'\">\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\n <div class=\"card_wrapper\">\n <div class=\"container_card visible\">\n <div class=\"card-section\">\n <!-- <div class=\"first-part-card\"\n [ngClass]=\"item.inputText[0].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n {{ item.inputText[0].value }}\n </div> -->\n <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n\n <div class=\"second-part-card \" *ngIf=\"item.image.url && (deviceWidth >= 475)\">\n <img loading=\"lazy\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\n [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" />\n </div>\n <div class=\"third-part-card\">\n <!-- <div class=\"text-element heading-medium\" [innerHtml]=\"item.inputText[1].value | sanitizeHtml\">\n </div> -->\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n <!-- <div class=\"text-element\" [innerHtml]=\"item.inputText[2].value | sanitizeHtml\"\n [ngClass]=\"item.inputText[2].label === 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\n </div> -->\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"styles?.processSectionDisplayStyle == 'STYLE2'\">\n <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carder\">\n <div class=\"step-container\">\n <div class=\"step\">\n <div class=\"step-section d-flex gap-3\">\n <div class=\"d-flex flex-column align-items-center\">\n <div class=\"gradient-stroke-text mb-1\" [attr.data-text]=\"i+1\" [ngStyle]=\"{\n color: 'transparent',\n fontWeight: '900',\n fontSize: '36px',\n WebkitTextStroke: '2px ' + styles?.background?.accentColor\n }\">{{ i+1 | number: '2.0' }}</div>\n <div class=\"height-width\" [style.background]=\"styles?.background?.accentColor\" *ngIf=\" i != getLength()-1\">\n </div>\n </div>\n <div class=\"third-part-card w-100\">\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n </div>\n <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid h-100\"\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</div>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.container_card .card-section{display:flex;align-items:center;justify-content:center;gap:30px;padding:20px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.container_card .card-section{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:10px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}}.text-element{inline-size:100%;overflow-wrap:break-word}.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;text-align:left}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:40px;height:40px;border-radius:50%;border:1px solid rgba(116,33,252,.1);padding:10px;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}.second-part-card img{width:100%;height:100%;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}:host ::ng-deep .gradient-stroke-text{font-family:Arial Black,sans-serif;position:relative;bottom:4px}.height-width{width:3px;flex-grow:1;display:flex;position:relative;flex-direction:column;bottom:6px}.step-section{align-items:stretch;flex:1 1 auto}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { 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: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { 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: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }] }); }
|
11714
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProcessSectionComponent, isStandalone: true, selector: "simpo-process-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\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n class=\"total-container\" [attr.style]=\"customClass\">\n <div class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\n\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\n [class.col-lg-10]=\"!content?.image?.showImage\" [class.col-lg-6]=\"content?.image?.showImage\">\n <div *ngFor=\"let item of content?.inputText\">\n <div [simpoColor]=\"styles?.background?.color\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.processSectionDisplayStyle == 'STYLE1'\">\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\n <div class=\"card_wrapper\">\n <div class=\"container_card visible\">\n <div class=\"card-section\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n <div class=\"second-part-card \" *ngIf=\"item.image.url\">\n <img loading=\"lazy\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\n [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" />\n </div>\n <div class=\"third-part-card\">\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"styles?.processSectionDisplayStyle == 'STYLE2'\">\n <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carder\">\n <div class=\"step-container\">\n <div class=\"step\">\n <div class=\"step-section d-flex gap-3\">\n <div class=\"d-flex flex-column align-items-center\">\n <div class=\"gradient-stroke-text mb-1\" [attr.data-text]=\"i+1\" [ngStyle]=\"{\n color: 'transparent',\n fontWeight: '900',\n fontSize: '36px',\n WebkitTextStroke: '2px ' + styles?.background?.accentColor\n }\">{{ i+1 | number: '2.0' }}</div>\n <div class=\"height-width\" [style.background]=\"styles?.background?.accentColor\"\n *ngIf=\" i != getLength()-1\">\n </div>\n </div>\n <div class=\"third-part-card w-100\">\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n </div>\n <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</div>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.container_card .card-section{display:flex;align-items:center;gap:30px;padding:20px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.container_card .card-section{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:10px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}}.text-element{inline-size:100%;overflow-wrap:break-word}.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;text-align:left}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:40px;height:40px;border-radius:50%;border:1px solid rgba(116,33,252,.1);padding:10px;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}.second-part-card img{width:100%;height:100%;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}:host ::ng-deep .gradient-stroke-text{font-family:Arial Black,sans-serif;position:relative;bottom:4px}.height-width{width:3px;flex-grow:1;display:flex;position:relative;flex-direction:column;bottom:6px}.step-section{align-items:stretch;flex:1 1 auto}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { 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: "ngmodule", type: MatGridListModule }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { 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: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }] }); }
|
11713
11715
|
}
|
11714
11716
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProcessSectionComponent, decorators: [{
|
11715
11717
|
type: Component,
|
@@ -11741,7 +11743,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
11741
11743
|
SanitizeHtmlPipe,
|
11742
11744
|
TextSizeDirective,
|
11743
11745
|
SpacingHorizontalDirective,
|
11744
|
-
ImageEditorDirective], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n class=\"total-container\" [attr.style]=\"customClass\">\n <div class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\n\n <div class=\"
|
11746
|
+
ImageEditorDirective], template: "<div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\n class=\"total-container\" [attr.style]=\"customClass\">\n <div class=\"col-xxl-8 py-5 w-100\" [id]=\"data?.id\" #mainContainer [simpoOverlay]=\"styles?.background\"\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\n <div class=\"row g-5\" [id]=\"data?.id\" [simpoAnimation]=\"styles?.animation\" [simpoLayout]=\"styles?.layout\"\n [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right' }\">\n\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\n [class.col-lg-10]=\"!content?.image?.showImage\" [class.col-lg-6]=\"content?.image?.showImage\">\n <div *ngFor=\"let item of content?.inputText\">\n <div [simpoColor]=\"styles?.background?.color\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n <ng-container *ngIf=\"styles?.processSectionDisplayStyle == 'STYLE1'\">\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\n <div class=\"card_wrapper\">\n <div class=\"container_card visible\">\n <div class=\"card-section\">\n <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n <div class=\"second-part-card \" *ngIf=\"item.image.url\">\n <img loading=\"lazy\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\n [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" />\n </div>\n <div class=\"third-part-card\">\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"styles?.processSectionDisplayStyle == 'STYLE2'\">\n <div *ngFor=\"let item of content?.listItem?.data; let i = index\" class=\"carder\">\n <div class=\"step-container\">\n <div class=\"step\">\n <div class=\"step-section d-flex gap-3\">\n <div class=\"d-flex flex-column align-items-center\">\n <div class=\"gradient-stroke-text mb-1\" [attr.data-text]=\"i+1\" [ngStyle]=\"{\n color: 'transparent',\n fontWeight: '900',\n fontSize: '36px',\n WebkitTextStroke: '2px ' + styles?.background?.accentColor\n }\">{{ i+1 | number: '2.0' }}</div>\n <div class=\"height-width\" [style.background]=\"styles?.background?.accentColor\"\n *ngIf=\" i != getLength()-1\">\n </div>\n </div>\n <div class=\"third-part-card w-100\">\n <simpo-text-editor [(value)]=\"item.inputText[1].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n <simpo-text-editor [(value)]=\"item.inputText[2].value\"\n [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n </div>\n <div class=\"col-10 col-sm-8 col-lg-6\" [simpoContainerAlignment]=\"stylesLayout\" *ngIf=\"content?.image?.showImage\">\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block mx-lg-auto img-fluid\"\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</div>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.button-display{display:flex;gap:10px}.gap-15{gap:15px}.container_card .card-section{display:flex;align-items:center;gap:30px;padding:20px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}@media only screen and (max-width: 475px){.col-10{width:100%;height:32vh;padding-right:13px;padding-left:13px}.container_card .card-section{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:10px;border:1px solid rgba(116,33,252,.1);border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}}.text-element{inline-size:100%;overflow-wrap:break-word}.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;text-align:left}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:40px;height:40px;border-radius:50%;border:1px solid rgba(116,33,252,.1);padding:10px;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}.second-part-card img{width:100%;height:100%;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}:host ::ng-deep .gradient-stroke-text{font-family:Arial Black,sans-serif;position:relative;bottom:4px}.height-width{width:3px;flex-grow:1;display:flex;position:relative;flex-direction:column;bottom:6px}.step-section{align-items:stretch;flex:1 1 auto}\n"] }]
|
11745
11747
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
11746
11748
|
type: Input
|
11747
11749
|
}], index: [{
|
@@ -11792,7 +11794,7 @@ class ProcessModernComponent extends BaseSection {
|
|
11792
11794
|
}, 100);
|
11793
11795
|
}
|
11794
11796
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProcessModernComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
|
11795
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProcessModernComponent, isStandalone: true, selector: "simpo-process-modern", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\n <div class=\"col-xxl-8 w-100\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\n [simpoBackground]=\"styles?.background\">\n <div class=\"row
|
11797
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProcessModernComponent, isStandalone: true, selector: "simpo-process-modern", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\n <div class=\"col-xxl-8 w-100\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\n [simpoBackground]=\"styles?.background\">\n <div class=\"row\" [id]=\"data?.id\">\n <div [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\n [simpoLayout]=\"styles?.layout\">\n <div class=\"container-fluid d-flex flex-column content-side\" [id]=\"data?.id\"\n [simpoAnimation]=\"styles?.animation\">\n <div class=\"row w-100\" [id]=\"data?.id\">\n <div *ngFor=\"let text of data?.content?.inputText\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n\n </div>\n </div>\n <div *ngFor=\"let item of content?.listItem?.data ;let i = index\"\n class=\"single_card content-side d-flex justify-content-center\">\n <div class=\"rowFlexContainer w-100\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\n <div class=\"imageContainer\" [ngClass]=\"{'no-image': item.image.url===''}\">\n <div *ngIf=\"scrWidth <= 500\" class=\"numberStyle\">\n {{ i + 1}}\n </div>\n <img loading=\"lazy\" class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\" [simpoObjectPosition]=\"item?.image?.position\">\n </div>\n <div class=\"content\" [ngClass]=\"{'no-image-content': item.image.url===''}\">\n <div *ngIf=\"scrWidth > 500\" class=\"numberStyle\">\n {{ i + 1}}\n </div>\n <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n <simpo-text-editor [(value)]=\"item.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</div>", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;margin:3% 0 0;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.no-image{display:none}.no-image-content{width:40%!important;margin-left:auto;margin-right:auto}.no-image-content .contentDescription{width:100%!important}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\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: "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: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
|
11796
11798
|
}
|
11797
11799
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProcessModernComponent, decorators: [{
|
11798
11800
|
type: Component,
|
@@ -11828,7 +11830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
11828
11830
|
ImageEditorDirective,
|
11829
11831
|
ObjectPositionDirective,
|
11830
11832
|
SpacingHorizontalDirective
|
11831
|
-
], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\n <div class=\"col-xxl-8 w-100\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\n [simpoBackground]=\"styles?.background\">\n <div class=\"row
|
11833
|
+
], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\n <div class=\"col-xxl-8 w-100\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\n [simpoBackground]=\"styles?.background\">\n <div class=\"row\" [id]=\"data?.id\">\n <div [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\n [simpoLayout]=\"styles?.layout\">\n <div class=\"container-fluid d-flex flex-column content-side\" [id]=\"data?.id\"\n [simpoAnimation]=\"styles?.animation\">\n <div class=\"row w-100\" [id]=\"data?.id\">\n <div *ngFor=\"let text of data?.content?.inputText\">\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\n\n </div>\n </div>\n <div *ngFor=\"let item of content?.listItem?.data ;let i = index\"\n class=\"single_card content-side d-flex justify-content-center\">\n <div class=\"rowFlexContainer w-100\" [ngClass]=\"{'flex-row-reverse': i % 2 === 1}\">\n <div class=\"imageContainer\" [ngClass]=\"{'no-image': item.image.url===''}\">\n <div *ngIf=\"scrWidth <= 500\" class=\"numberStyle\">\n {{ i + 1}}\n </div>\n <img loading=\"lazy\" class=\"section_image\" [src]=\"item.image.url\" [alt]=\"item.image.altText\"\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoCorner]=\"styles?.corners\"\n loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"item?.image\" [sectionId]=\"data?.id\" [class]=\"data?.id+(item?.image?.id || '')\" [simpoObjectPosition]=\"item?.image?.position\">\n </div>\n <div class=\"content\" [ngClass]=\"{'no-image-content': item.image.url===''}\">\n <div *ngIf=\"scrWidth > 500\" class=\"numberStyle\">\n {{ i + 1}}\n </div>\n <simpo-text-editor [(value)]=\"item.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\n <simpo-text-editor [(value)]=\"item.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <ng-container *ngIf=\"styles?.devider?.display\">\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\n </ng-container>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</div>", styles: [".single_card{width:100%}.rowFlexContainer{display:flex;flex-direction:row;margin:3% 0 0;justify-content:space-between!important}.flex-row-reverse{flex-direction:row-reverse}.imageContainer{width:40%!important;height:250px;line-height:30px}.section_image{width:100%;height:100%;object-fit:cover;border-radius:10px}.img{vertical-align:middle}.content{width:55%!important;height:100%;display:flex;flex-direction:column;justify-content:flex-start;font-size:18px}.numberStyle{height:50px;padding:10px!important;border-radius:50%;border:1px solid black;width:50px!important;display:flex;align-items:center;justify-content:center}.contentHeading{margin-bottom:0;margin-top:20px;font-size:24px;font-weight:400}.contentDescription{padding-top:10px;line-height:28px;width:90%!important;text-overflow:ellipsis;overflow:hidden;font-size:18px;font-weight:400}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.no-image{display:none}.no-image-content{width:40%!important;margin-left:auto;margin-right:auto}.no-image-content .contentDescription{width:100%!important}@media only screen and (max-width: 475px){.rowFlexContainer{flex-direction:column!important;width:100%!important;height:auto!important}.imageContainer{width:100%!important;height:auto!important}.section_image{width:100%;height:auto;object-fit:cover;border-radius:10px}.content{width:100%!important;margin-top:15px;margin-right:0}.numberStyle{margin-bottom:15px;width:50px;height:50px}.contentDescription{width:100%!important}.row{margin-left:.2px}}\n"] }]
|
11832
11834
|
}], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
|
11833
11835
|
type: Input
|
11834
11836
|
}], index: [{
|
@@ -15156,7 +15158,7 @@ class SchemeDetailComponent {
|
|
15156
15158
|
if (params['termsAndCondition'])
|
15157
15159
|
this.scrollToTermsAndCondition = true;
|
15158
15160
|
});
|
15159
|
-
// this.getSchemeDetails("
|
15161
|
+
// this.getSchemeDetails("9eb57ba2-9083-11f0-98fe-47a63c58fddd")
|
15160
15162
|
}
|
15161
15163
|
getKeys(obj) {
|
15162
15164
|
return Object.keys(obj ?? {});
|
@@ -15183,7 +15185,7 @@ class SchemeDetailComponent {
|
|
15183
15185
|
this.restService.getAllStaffList().subscribe({
|
15184
15186
|
next: (res) => {
|
15185
15187
|
this.staffMembers = res?.data?.data ? res?.data?.data : [];
|
15186
|
-
console.log(this.staffMembers)
|
15188
|
+
// console.log(this.staffMembers)
|
15187
15189
|
},
|
15188
15190
|
error: (err) => {
|
15189
15191
|
console.log(err);
|
@@ -15223,7 +15225,7 @@ class SchemeDetailComponent {
|
|
15223
15225
|
if (res && res.data) {
|
15224
15226
|
this.getStaffList();
|
15225
15227
|
this.schemeDetails = res.data;
|
15226
|
-
console.log(this.schemeDetails)
|
15228
|
+
// console.log(this.schemeDetails)
|
15227
15229
|
this.minAmount = this.schemeDetails?.minInstallmentValue;
|
15228
15230
|
this.maxAmount = this.schemeDetails?.maxInstallmentValue;
|
15229
15231
|
this.monthlyAmount = this.minAmount;
|
@@ -15231,6 +15233,7 @@ class SchemeDetailComponent {
|
|
15231
15233
|
this.maturityCount = this.schemeDetails?.maturityCount ? this.schemeDetails.maturityCount : this.maturityCount;
|
15232
15234
|
this.stores = this.schemeDetails?.storeList ? this.schemeDetails.storeList : [];
|
15233
15235
|
this.getMetalPrice();
|
15236
|
+
this.onAmountChange();
|
15234
15237
|
this.faqList = this.schemeDetails?.faqs ? this.schemeDetails?.faqs : [];
|
15235
15238
|
this.faqList.forEach(faq => faq.showAnswer = false);
|
15236
15239
|
if (this.scrollToTermsAndCondition)
|
@@ -15342,11 +15345,11 @@ class SchemeDetailComponent {
|
|
15342
15345
|
}
|
15343
15346
|
}
|
15344
15347
|
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 }); }
|
15345
|
-
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\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\n <div class=\"plan_desc_section\">\n <ng-container *ngTemplateOutlet=\"planDescTemplate\"></ng-container>\n </div>\n <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\n <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\n </div>\n <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\n <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\n </div>\n <div class=\"redeem_ans_section\" *ngIf=\"schemeDetails?.redeemDesc.length > 0\">\n <ng-container *ngTemplateOutlet=\"redeemInfoSection\"></ng-container>\n </div>\n <div class=\"scheme_work_section\" *ngIf=\"schemeDetails?.schemeWorkingDesc != {} && schemeDetails\">\n <ng-container *ngTemplateOutlet=\"schemeWorkSection\"></ng-container>\n </div>\n <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\n <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\n </div>\n <div class=\"terms_condition_section p-5\"\n *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\n <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\n </div>\n</section>\n<ng-template #redeemInfoSection>\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\n <div class=\"faq-container\">\n <h1 class=\"faq-title\">How to redeem?</h1>\n <div class=\"d-flex justify-content-center align-items-center w-100\">\n <div class=\"faq-list\">\n <div class=\"redeem_info_section\" *ngIf=\"schemeDetails?.redeemDesc\">\n {{schemeDetails?.redeemDesc || 'N/A'}}\n </div>\n </div>\n </div>\n </div>\n </section>\n</ng-template>\n<ng-template #schemeWorkSection>\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\n <div class=\"faq-container\">\n <h1 class=\"faq-title\">How Does this plan work?</h1>\n <div class=\"d-flex justify-content-center align-items-center w-100\">\n <div class=\"faq-list\">\n <div class=\"ans_section\" *ngFor=\"let faq of getKeys(schemeDetails?.schemeWorkingDesc);let i =index\">\n <div class=\"d-flex align-items-start gap-3 f-16\">\n <span>{{faq}}</span>\n <span>{{ schemeDetails?.schemeWorkingDesc?.[faq]?.replaceAll('\\n',' ') || 'N/A' }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n</ng-template>\n<ng-template #planDescTemplate>\n <div class=\"hero-section d-flex align-items-center\">\n <div class=\"container\">\n <div class=\"row align-items-center g-5\">\n <div\n [ngClass]=\"{'col-md-6': schemeDetails?.imgUrls[0], 'col-12 d-flex align-items-center justify-content-center': !schemeDetails?.imgUrls[0]}\">\n <div class=\"hero-content\">\n <h1 class=\"hero-title mb-4 d-flex justify-content-center align-items-center\">\n <span class=\"title-highlight\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :'N/A'}}</span>\n </h1>\n <p class=\"hero-description mb-4\">\n {{schemeDetails?.desc ? schemeDetails?.desc :'N/A'}}\n </p>\n </div>\n </div>\n <div class=\"col-lg-6\" *ngIf=\"schemeDetails?.imgUrls[0]\">\n <div class=\"hero-image\">\n <img [src]=\"schemeDetails?.imgUrls ? schemeDetails?.imgUrls[0] :'N/A'\" alt=\"Pearl Jewelry\"\n class=\"jewellery-img w-100\">\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #aboutUsTemplate>\n <div class=\"d-flex flex-column gap-3\">\n <div class=\"text_header d-flex align-items-center justify-content-center\">\n <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"desc_text\">\n {{schemeDetails?.about}}\n </div>\n </div>\n</ng-template>\n<ng-template #schemeCalculator>\n <div class=\"d-flex flex-column align-items-center\">\n <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\n <span>Calculate Your Returns</span>\n <div class=\"calc_desc\">\n See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\n your potential returns.\n </div>\n </div>\n <div class=\"calculator_section\">\n <div class=\"gold-purity\"\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\n *ngIf=\"gold?.karats === '18_k'\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\n *ngIf=\"gold?.karats === '24_k'\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\n *ngIf=\"gold?.karats === '22_k'\">\n <div>\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\n </div>\n </div>\n </div>\n <div class=\"sub-header mb-3 px-3 monthly-scheme\">\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\n <p class=\"enrolled-gram\"\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n {{purchasedGram}} gms</p>\n </div>\n\n <div class=\"calculate-slider mb-4 px-3\">\n <div class=\"slider-container position-relative\">\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"schemeDetails?.valueStep\" class=\"w-100 pale-slider\"\n [style.--mdc-slider-handle-color]=\"data?.styles?.background?.accentColor\"\n [style.--mdc-slider-focus-handle-color]=\"data?.styles?.background?.accentColor\"\n [style.--mdc-slider-hover-handle-color]=\"data?.styles?.background?.accentColor\"\n [style.--mdc-slider-active-track-color]=\"data?.styles?.background?.accentColor\"\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"data?.styles?.background?.accentColor\"\n [style.--mat-slider-ripple-color]=\"data?.styles?.background?.accentColor\"\n [style.--mat-slider-value-indicator-color]=\"data?.styles?.background?.accentColor\">\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\n </mat-slider>\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\n [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\"> -->\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\n <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\n <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\n </div>\n <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\n <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\n *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\n \u20B9 {{option?.value}}\n </div>\n </div>\n </div>\n <div class=\"mt-3\">\n <div class=\"d-flex align-items-center justify-content-center\">\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\n </div>\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\n </div>\n </div>\n\n <div class=\"calculator-bottom px-3 mb-5\">\n <div class=\"scheme-results\">\n <div class=\"row align-items-center justify-content-between mb-3 g-2\">\n <!-- Contribution Card -->\n <div class=\"col-12 col-sm-6\"\n [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\n <div class=\"card text-center h-100\">\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n <div class=\"fw-bold calc_amount fs-md-5\">\n \u20B9{{(monthlyAmount * maturityCount) | number}}\n </div>\n <div class=\"text-muted small\">\n Your {{maturityCount}}-Month Contribution\n </div>\n </div>\n </div>\n </div>\n\n <!-- Plus Icon - Hidden on mobile -->\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"fs-3 text-muted\">+</div>\n </div>\n\n <!-- Benefit Card -->\n <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"card text-center h-100\">\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n <div class=\"fw-bold calc_amount fs-md-5\">\n \u20B9{{benefitAmount | number}}\n </div>\n <div class=\"text-muted small\">\n Scheme Benefit\n </div>\n </div>\n </div>\n </div>\n\n <!-- Equals Icon - Hidden on mobile -->\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"fs-3 text-muted\">=</div>\n </div>\n\n <!-- Total Card -->\n <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n <div class=\"fw-bold calc_amount fs-md-5 text-white\">\n <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\n \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\n </span>\n <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\n \u20B9{{(monthlyAmount * maturityCount) | number}}\n </span>\n </div>\n <div class=\"text-white-50 small\">\n Total Redemption Value\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\n <div class=\"card text-center h-100\">\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n <div class=\"fw-bold calc_amount fs-md-5\">\n {{purchasedGram}} gms\n </div>\n <div class=\"text-muted small\">\n Gold Allocation Today\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\n *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\n Store : </span></div>\n <div class=\"store-selector\">\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\n (ngModelChange)=\"getMetalPrice()\">\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\n {{store.name}} - {{store.storeRefId}}\n </option>\n </select>\n </div>\n </div>\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\n Staff Member : </span></div>\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\n <option value=\"\" disabled>Choose a staff member...</option>\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\n </option>\n </select>\n </div>\n </div>\n <div class=\"terms-and-condition\">\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\n Conditions</a>\n </div>\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\n <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\n <ng-container *ngIf=\"enrollButtonLoader\">\n <div class=\"d-flex align-items-center justify-content-center\">\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\n Loading...\n </div>\n </ng-container>\n </button>\n </div>\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\n <div class=\"d-flex align-items-center mb-3\">\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\n </div>\n\n <div class=\"row mb-3\">\n <div class=\"col-6\">\n <div class=\"result-card text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\n </div>\n </div>\n <div class=\"col-6\">\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\n </div>\n </div>\n </div>\n\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\n Enroll in Scheme\n </button>\n </div> -->\n </div>\n </div>\n </div>\n\n</ng-template>\n<ng-template #faqTemplate>\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\n <div class=\"faq-container\">\n <h1 class=\"faq-title\">Frequently Asked Questions</h1>\n <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\n <div class=\"d-flex justify-content-center align-items-center w-100\">\n <div class=\"faq-list\">\n <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\n <div class=\"faq-question\">\n <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\n <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\n </div>\n <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\n <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n</ng-template>\n<ng-template #termsAndConditions>\n <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\n <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\n <h1 class=\"terms-title\">Terms and Conditions</h1>\n\n <div class=\"terms-content\">\n <div class=\"term-item d-flex align-items-center\"\n *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\n <div class=\"terms_count\">\n <h3 class=\"term-heading\">{{ key }}.</h3>\n </div>\n <div>\n <p class=\"term-text mb-0\">\n {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\n </p>\n </div>\n </div>\n\n <!-- <div class=\"important-note\">\n <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\n Participants will be notified of any changes via registered email or SMS. Continued\n participation after notification constitutes acceptance of revised terms.</p>\n </div> -->\n </div>\n </div>\n </section>\n</ng-template>\n<ng-template #showCharges>\n <div class=\"payment-dialog\">\n <div class=\"dialog-header\">\n <h2>Payment Details</h2>\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"payment-content\">\n <div class=\"payment-row\">\n <span class=\"label\">Installment Amount:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Convenience Fee:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Payment Service Charges:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row total-row\">\n <span class=\"label total-label\">Total Amount:</span>\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n </div>\n </div>\n\n <div class=\"dialog-actions\">\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\n </div>\n </div>\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"] }] }); }
|
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\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\n <div class=\"plan_desc_section\">\n <ng-container *ngTemplateOutlet=\"planDescTemplate\"></ng-container>\n </div>\n <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\n <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\n </div>\n <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\n <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\n </div>\n <div class=\"redeem_ans_section\" *ngIf=\"schemeDetails?.redeemDesc.length > 0\">\n <ng-container *ngTemplateOutlet=\"redeemInfoSection\"></ng-container>\n </div>\n <div class=\"scheme_work_section\" *ngIf=\"schemeDetails?.schemeWorkingDesc != {} && schemeDetails\">\n <ng-container *ngTemplateOutlet=\"schemeWorkSection\"></ng-container>\n </div>\n <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\n <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\n </div>\n <div class=\"terms_condition_section p-5\"\n *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\n <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\n </div>\n</section>\n<ng-template #redeemInfoSection>\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\n <div class=\"faq-container\">\n <h1 class=\"faq-title\">How to redeem?</h1>\n <div class=\"d-flex justify-content-center align-items-center w-100\">\n <div class=\"faq-list\">\n <div class=\"redeem_info_section\" *ngIf=\"schemeDetails?.redeemDesc\">\n {{schemeDetails?.redeemDesc || 'N/A'}}\n </div>\n </div>\n </div>\n </div>\n </section>\n</ng-template>\n<ng-template #schemeWorkSection>\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\n <div class=\"faq-container\">\n <h1 class=\"faq-title\">How Does this plan work?</h1>\n <div class=\"d-flex justify-content-center align-items-center w-100\">\n <div class=\"faq-list\">\n <div class=\"ans_section\" *ngFor=\"let faq of getKeys(schemeDetails?.schemeWorkingDesc);let i =index\">\n <div class=\"d-flex align-items-start gap-3 f-16\">\n <span>{{faq}}</span>\n <span>{{ schemeDetails?.schemeWorkingDesc?.[faq]?.replaceAll('\\n',' ') || 'N/A' }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n</ng-template>\n<ng-template #planDescTemplate>\n <div class=\"hero-section d-flex align-items-center\">\n <div class=\"d-flex w-100\">\n <div class=\"d-flex align-items-center g-5 w-100\">\n <div\n [ngClass]=\"{'col-md-6': schemeDetails?.imgUrls[0], 'col-12 d-flex align-items-center justify-content-center': !schemeDetails?.imgUrls[0]}\">\n <div class=\"hero-content\">\n <h1 class=\"hero-title mb-4 d-flex align-items-center\"\n [ngClass]=\"{'justify-content-center':!schemeDetails?.imgUrls[0], 'justify-content-start':schemeDetails?.imgUrls[0]}\">\n <span class=\"title-highlight\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :'N/A'}}</span>\n </h1>\n <p class=\"hero-description mb-4\"\n [ngClass]=\"{'text-start':schemeDetails?.imgUrls[0],'text-center':!schemeDetails?.imgUrls[0]}\">\n {{schemeDetails?.desc ? schemeDetails?.desc :'N/A'}}\n </p>\n </div>\n </div>\n <div class=\"col-lg-6\" *ngIf=\"schemeDetails?.imgUrls[0]\">\n <div class=\"hero-image\">\n <img [src]=\"schemeDetails?.imgUrls ? schemeDetails?.imgUrls[0] :'N/A'\" alt=\"Pearl Jewelry\"\n class=\"jewellery-img w-100\">\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #aboutUsTemplate>\n <div class=\"d-flex flex-column gap-3\">\n <div class=\"text_header d-flex align-items-center justify-content-center\">\n <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"desc_text\">\n {{schemeDetails?.about}}\n </div>\n </div>\n</ng-template>\n<ng-template #schemeCalculator>\n <div class=\"d-flex flex-column align-items-center\">\n <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\n <span>Calculate Your Returns</span>\n <div class=\"calc_desc\">\n See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\n your potential returns.\n </div>\n </div>\n <div class=\"calculator_section\">\n <div class=\"gold-purity\"\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\n *ngIf=\"gold?.karats === '18_k'\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\n *ngIf=\"gold?.karats === '24_k'\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\n *ngIf=\"gold?.karats === '22_k'\">\n <div>\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\n </div>\n </div>\n </div>\n <div class=\"sub-header mb-3 px-3 monthly-scheme\">\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\n <p class=\"enrolled-gram\"\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n {{purchasedGram}} gms</p>\n </div>\n\n <div class=\"calculate-slider mb-4 px-3\">\n <div class=\"slider-container position-relative\">\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"schemeDetails?.valueStep\" class=\"w-100 pale-slider\"\n [style.--mdc-slider-handle-color]=\"data?.styles?.background?.accentColor\"\n [style.--mdc-slider-focus-handle-color]=\"data?.styles?.background?.accentColor\"\n [style.--mdc-slider-hover-handle-color]=\"data?.styles?.background?.accentColor\"\n [style.--mdc-slider-active-track-color]=\"data?.styles?.background?.accentColor\"\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"data?.styles?.background?.accentColor\"\n [style.--mat-slider-ripple-color]=\"data?.styles?.background?.accentColor\"\n [style.--mat-slider-value-indicator-color]=\"data?.styles?.background?.accentColor\">\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\n </mat-slider>\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\n [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\"> -->\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\n <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\n <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\n </div>\n <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\n <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\n *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\n \u20B9 {{option?.value}}\n </div>\n </div>\n </div>\n <div class=\"mt-3\">\n <div class=\"d-flex align-items-center justify-content-center\">\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\n </div>\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\n </div>\n </div>\n\n <div class=\"calculator-bottom px-3 mb-5\">\n <div class=\"scheme-results\">\n <div class=\"row align-items-center justify-content-between mb-3 g-2\">\n <!-- Contribution Card -->\n <div class=\"col-12 col-sm-6\"\n [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\n <div class=\"card text-center h-100\">\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n <div class=\"fw-bold calc_amount fs-md-5\">\n \u20B9{{(monthlyAmount * maturityCount) | number}}\n </div>\n <div class=\"text-muted small\">\n Your {{maturityCount}}-Month Contribution\n </div>\n </div>\n </div>\n </div>\n\n <!-- Plus Icon - Hidden on mobile -->\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"fs-3 text-muted\">+</div>\n </div>\n\n <!-- Benefit Card -->\n <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"card text-center h-100\">\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n <div class=\"fw-bold calc_amount fs-md-5\">\n \u20B9{{benefitAmount | number}}\n </div>\n <div class=\"text-muted small\">\n Scheme Benefit\n </div>\n </div>\n </div>\n </div>\n\n <!-- Equals Icon - Hidden on mobile -->\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"fs-3 text-muted\">=</div>\n </div>\n\n <!-- Total Card -->\n <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n <div class=\"fw-bold calc_amount fs-md-5 text-white\">\n <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\n \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\n </span>\n <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\n \u20B9{{(monthlyAmount * maturityCount) | number}}\n </span>\n </div>\n <div class=\"text-white-50 small\">\n Total Redemption Value\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\n <div class=\"card text-center h-100\">\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n <div class=\"fw-bold calc_amount fs-md-5\">\n {{purchasedGram}} gms\n </div>\n <div class=\"text-muted small\">\n Gold Allocation Today\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\n *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\n Store : </span></div>\n <div class=\"store-selector\">\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\n (ngModelChange)=\"getMetalPrice()\">\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\n {{store.name}} - {{store.storeRefId}}\n </option>\n </select>\n </div>\n </div>\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\n Staff Member : </span></div>\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\n <option value=\"\" disabled>Choose a staff member...</option>\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\n </option>\n </select>\n </div>\n </div>\n <div class=\"terms-and-condition\">\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\n Conditions</a>\n </div>\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\n <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\n <ng-container *ngIf=\"enrollButtonLoader\">\n <div class=\"d-flex align-items-center justify-content-center\">\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\n Loading...\n </div>\n </ng-container>\n </button>\n </div>\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\n <div class=\"d-flex align-items-center mb-3\">\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\n </div>\n\n <div class=\"row mb-3\">\n <div class=\"col-6\">\n <div class=\"result-card text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\n </div>\n </div>\n <div class=\"col-6\">\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\n </div>\n </div>\n </div>\n\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\n Enroll in Scheme\n </button>\n </div> -->\n </div>\n </div>\n </div>\n\n</ng-template>\n<ng-template #faqTemplate>\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\n <div class=\"faq-container\">\n <h1 class=\"faq-title\">Frequently Asked Questions</h1>\n <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\n <div class=\"d-flex justify-content-center align-items-center w-100\">\n <div class=\"faq-list\">\n <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\n <div class=\"faq-question\">\n <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\n <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\n </div>\n <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\n <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n</ng-template>\n<ng-template #termsAndConditions>\n <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\n <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\n <h1 class=\"terms-title\">Terms and Conditions</h1>\n\n <div class=\"terms-content\">\n <div class=\"term-item d-flex align-items-center\"\n *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\n <div class=\"terms_count\">\n <h3 class=\"term-heading\">{{ key }}.</h3>\n </div>\n <div>\n <p class=\"term-text mb-0\">\n {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\n </p>\n </div>\n </div>\n\n <!-- <div class=\"important-note\">\n <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\n Participants will be notified of any changes via registered email or SMS. Continued\n participation after notification constitutes acceptance of revised terms.</p>\n </div> -->\n </div>\n </div>\n </section>\n</ng-template>\n<ng-template #showCharges>\n <div class=\"payment-dialog\">\n <div class=\"dialog-header\">\n <h2>Payment Details</h2>\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"payment-content\">\n <div class=\"payment-row\">\n <span class=\"label\">Installment Amount:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Convenience Fee:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Payment Service Charges:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row total-row\">\n <span class=\"label total-label\">Total Amount:</span>\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n </div>\n </div>\n\n <div class=\"dialog-actions\">\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\n </div>\n </div>\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"] }] }); }
|
15346
15349
|
}
|
15347
15350
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailComponent, decorators: [{
|
15348
15351
|
type: Component,
|
15349
|
-
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\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\n <div class=\"plan_desc_section\">\n <ng-container *ngTemplateOutlet=\"planDescTemplate\"></ng-container>\n </div>\n <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\n <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\n </div>\n <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\n <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\n </div>\n <div class=\"redeem_ans_section\" *ngIf=\"schemeDetails?.redeemDesc.length > 0\">\n <ng-container *ngTemplateOutlet=\"redeemInfoSection\"></ng-container>\n </div>\n <div class=\"scheme_work_section\" *ngIf=\"schemeDetails?.schemeWorkingDesc != {} && schemeDetails\">\n <ng-container *ngTemplateOutlet=\"schemeWorkSection\"></ng-container>\n </div>\n <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\n <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\n </div>\n <div class=\"terms_condition_section p-5\"\n *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\n <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\n </div>\n</section>\n<ng-template #redeemInfoSection>\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\n <div class=\"faq-container\">\n <h1 class=\"faq-title\">How to redeem?</h1>\n <div class=\"d-flex justify-content-center align-items-center w-100\">\n <div class=\"faq-list\">\n <div class=\"redeem_info_section\" *ngIf=\"schemeDetails?.redeemDesc\">\n {{schemeDetails?.redeemDesc || 'N/A'}}\n </div>\n </div>\n </div>\n </div>\n </section>\n</ng-template>\n<ng-template #schemeWorkSection>\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\n <div class=\"faq-container\">\n <h1 class=\"faq-title\">How Does this plan work?</h1>\n <div class=\"d-flex justify-content-center align-items-center w-100\">\n <div class=\"faq-list\">\n <div class=\"ans_section\" *ngFor=\"let faq of getKeys(schemeDetails?.schemeWorkingDesc);let i =index\">\n <div class=\"d-flex align-items-start gap-3 f-16\">\n <span>{{faq}}</span>\n <span>{{ schemeDetails?.schemeWorkingDesc?.[faq]?.replaceAll('\\n',' ') || 'N/A' }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n</ng-template>\n<ng-template #planDescTemplate>\n <div class=\"hero-section d-flex align-items-center\">\n <div class=\"container\">\n <div class=\"row align-items-center g-5\">\n <div\n [ngClass]=\"{'col-md-6': schemeDetails?.imgUrls[0], 'col-12 d-flex align-items-center justify-content-center': !schemeDetails?.imgUrls[0]}\">\n <div class=\"hero-content\">\n <h1 class=\"hero-title mb-4 d-flex justify-content-center align-items-center\">\n <span class=\"title-highlight\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :'N/A'}}</span>\n </h1>\n <p class=\"hero-description mb-4\">\n {{schemeDetails?.desc ? schemeDetails?.desc :'N/A'}}\n </p>\n </div>\n </div>\n <div class=\"col-lg-6\" *ngIf=\"schemeDetails?.imgUrls[0]\">\n <div class=\"hero-image\">\n <img [src]=\"schemeDetails?.imgUrls ? schemeDetails?.imgUrls[0] :'N/A'\" alt=\"Pearl Jewelry\"\n class=\"jewellery-img w-100\">\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #aboutUsTemplate>\n <div class=\"d-flex flex-column gap-3\">\n <div class=\"text_header d-flex align-items-center justify-content-center\">\n <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"desc_text\">\n {{schemeDetails?.about}}\n </div>\n </div>\n</ng-template>\n<ng-template #schemeCalculator>\n <div class=\"d-flex flex-column align-items-center\">\n <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\n <span>Calculate Your Returns</span>\n <div class=\"calc_desc\">\n See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\n your potential returns.\n </div>\n </div>\n <div class=\"calculator_section\">\n <div class=\"gold-purity\"\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\n *ngIf=\"gold?.karats === '18_k'\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\n *ngIf=\"gold?.karats === '24_k'\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\n *ngIf=\"gold?.karats === '22_k'\">\n <div>\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\n </div>\n </div>\n </div>\n <div class=\"sub-header mb-3 px-3 monthly-scheme\">\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\n <p class=\"enrolled-gram\"\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n {{purchasedGram}} gms</p>\n </div>\n\n <div class=\"calculate-slider mb-4 px-3\">\n <div class=\"slider-container position-relative\">\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"schemeDetails?.valueStep\" class=\"w-100 pale-slider\"\n [style.--mdc-slider-handle-color]=\"data?.styles?.background?.accentColor\"\n [style.--mdc-slider-focus-handle-color]=\"data?.styles?.background?.accentColor\"\n [style.--mdc-slider-hover-handle-color]=\"data?.styles?.background?.accentColor\"\n [style.--mdc-slider-active-track-color]=\"data?.styles?.background?.accentColor\"\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"data?.styles?.background?.accentColor\"\n [style.--mat-slider-ripple-color]=\"data?.styles?.background?.accentColor\"\n [style.--mat-slider-value-indicator-color]=\"data?.styles?.background?.accentColor\">\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\n </mat-slider>\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\n [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\"> -->\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\n <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\n <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\n </div>\n <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\n <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\n *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\n \u20B9 {{option?.value}}\n </div>\n </div>\n </div>\n <div class=\"mt-3\">\n <div class=\"d-flex align-items-center justify-content-center\">\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\n </div>\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\n </div>\n </div>\n\n <div class=\"calculator-bottom px-3 mb-5\">\n <div class=\"scheme-results\">\n <div class=\"row align-items-center justify-content-between mb-3 g-2\">\n <!-- Contribution Card -->\n <div class=\"col-12 col-sm-6\"\n [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\n <div class=\"card text-center h-100\">\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n <div class=\"fw-bold calc_amount fs-md-5\">\n \u20B9{{(monthlyAmount * maturityCount) | number}}\n </div>\n <div class=\"text-muted small\">\n Your {{maturityCount}}-Month Contribution\n </div>\n </div>\n </div>\n </div>\n\n <!-- Plus Icon - Hidden on mobile -->\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"fs-3 text-muted\">+</div>\n </div>\n\n <!-- Benefit Card -->\n <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"card text-center h-100\">\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n <div class=\"fw-bold calc_amount fs-md-5\">\n \u20B9{{benefitAmount | number}}\n </div>\n <div class=\"text-muted small\">\n Scheme Benefit\n </div>\n </div>\n </div>\n </div>\n\n <!-- Equals Icon - Hidden on mobile -->\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"fs-3 text-muted\">=</div>\n </div>\n\n <!-- Total Card -->\n <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n <div class=\"fw-bold calc_amount fs-md-5 text-white\">\n <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\n \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\n </span>\n <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\n \u20B9{{(monthlyAmount * maturityCount) | number}}\n </span>\n </div>\n <div class=\"text-white-50 small\">\n Total Redemption Value\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\n <div class=\"card text-center h-100\">\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n <div class=\"fw-bold calc_amount fs-md-5\">\n {{purchasedGram}} gms\n </div>\n <div class=\"text-muted small\">\n Gold Allocation Today\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\n *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\n Store : </span></div>\n <div class=\"store-selector\">\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\n (ngModelChange)=\"getMetalPrice()\">\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\n {{store.name}} - {{store.storeRefId}}\n </option>\n </select>\n </div>\n </div>\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\n Staff Member : </span></div>\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\n <option value=\"\" disabled>Choose a staff member...</option>\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\n </option>\n </select>\n </div>\n </div>\n <div class=\"terms-and-condition\">\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\n Conditions</a>\n </div>\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\n <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\n <ng-container *ngIf=\"enrollButtonLoader\">\n <div class=\"d-flex align-items-center justify-content-center\">\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\n Loading...\n </div>\n </ng-container>\n </button>\n </div>\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\n <div class=\"d-flex align-items-center mb-3\">\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\n </div>\n\n <div class=\"row mb-3\">\n <div class=\"col-6\">\n <div class=\"result-card text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\n </div>\n </div>\n <div class=\"col-6\">\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\n </div>\n </div>\n </div>\n\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\n Enroll in Scheme\n </button>\n </div> -->\n </div>\n </div>\n </div>\n\n</ng-template>\n<ng-template #faqTemplate>\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\n <div class=\"faq-container\">\n <h1 class=\"faq-title\">Frequently Asked Questions</h1>\n <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\n <div class=\"d-flex justify-content-center align-items-center w-100\">\n <div class=\"faq-list\">\n <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\n <div class=\"faq-question\">\n <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\n <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\n </div>\n <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\n <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n</ng-template>\n<ng-template #termsAndConditions>\n <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\n <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\n <h1 class=\"terms-title\">Terms and Conditions</h1>\n\n <div class=\"terms-content\">\n <div class=\"term-item d-flex align-items-center\"\n *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\n <div class=\"terms_count\">\n <h3 class=\"term-heading\">{{ key }}.</h3>\n </div>\n <div>\n <p class=\"term-text mb-0\">\n {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\n </p>\n </div>\n </div>\n\n <!-- <div class=\"important-note\">\n <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\n Participants will be notified of any changes via registered email or SMS. Continued\n participation after notification constitutes acceptance of revised terms.</p>\n </div> -->\n </div>\n </div>\n </section>\n</ng-template>\n<ng-template #showCharges>\n <div class=\"payment-dialog\">\n <div class=\"dialog-header\">\n <h2>Payment Details</h2>\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"payment-content\">\n <div class=\"payment-row\">\n <span class=\"label\">Installment Amount:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Convenience Fee:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Payment Service Charges:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row total-row\">\n <span class=\"label total-label\">Total Amount:</span>\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n </div>\n </div>\n\n <div class=\"dialog-actions\">\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\n </div>\n </div>\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"] }]
|
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\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\n <div class=\"plan_desc_section\">\n <ng-container *ngTemplateOutlet=\"planDescTemplate\"></ng-container>\n </div>\n <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\n <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\n </div>\n <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\n <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\n </div>\n <div class=\"redeem_ans_section\" *ngIf=\"schemeDetails?.redeemDesc.length > 0\">\n <ng-container *ngTemplateOutlet=\"redeemInfoSection\"></ng-container>\n </div>\n <div class=\"scheme_work_section\" *ngIf=\"schemeDetails?.schemeWorkingDesc != {} && schemeDetails\">\n <ng-container *ngTemplateOutlet=\"schemeWorkSection\"></ng-container>\n </div>\n <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\n <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\n </div>\n <div class=\"terms_condition_section p-5\"\n *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\n <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\n </div>\n</section>\n<ng-template #redeemInfoSection>\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\n <div class=\"faq-container\">\n <h1 class=\"faq-title\">How to redeem?</h1>\n <div class=\"d-flex justify-content-center align-items-center w-100\">\n <div class=\"faq-list\">\n <div class=\"redeem_info_section\" *ngIf=\"schemeDetails?.redeemDesc\">\n {{schemeDetails?.redeemDesc || 'N/A'}}\n </div>\n </div>\n </div>\n </div>\n </section>\n</ng-template>\n<ng-template #schemeWorkSection>\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\n <div class=\"faq-container\">\n <h1 class=\"faq-title\">How Does this plan work?</h1>\n <div class=\"d-flex justify-content-center align-items-center w-100\">\n <div class=\"faq-list\">\n <div class=\"ans_section\" *ngFor=\"let faq of getKeys(schemeDetails?.schemeWorkingDesc);let i =index\">\n <div class=\"d-flex align-items-start gap-3 f-16\">\n <span>{{faq}}</span>\n <span>{{ schemeDetails?.schemeWorkingDesc?.[faq]?.replaceAll('\\n',' ') || 'N/A' }}</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n</ng-template>\n<ng-template #planDescTemplate>\n <div class=\"hero-section d-flex align-items-center\">\n <div class=\"d-flex w-100\">\n <div class=\"d-flex align-items-center g-5 w-100\">\n <div\n [ngClass]=\"{'col-md-6': schemeDetails?.imgUrls[0], 'col-12 d-flex align-items-center justify-content-center': !schemeDetails?.imgUrls[0]}\">\n <div class=\"hero-content\">\n <h1 class=\"hero-title mb-4 d-flex align-items-center\"\n [ngClass]=\"{'justify-content-center':!schemeDetails?.imgUrls[0], 'justify-content-start':schemeDetails?.imgUrls[0]}\">\n <span class=\"title-highlight\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :'N/A'}}</span>\n </h1>\n <p class=\"hero-description mb-4\"\n [ngClass]=\"{'text-start':schemeDetails?.imgUrls[0],'text-center':!schemeDetails?.imgUrls[0]}\">\n {{schemeDetails?.desc ? schemeDetails?.desc :'N/A'}}\n </p>\n </div>\n </div>\n <div class=\"col-lg-6\" *ngIf=\"schemeDetails?.imgUrls[0]\">\n <div class=\"hero-image\">\n <img [src]=\"schemeDetails?.imgUrls ? schemeDetails?.imgUrls[0] :'N/A'\" alt=\"Pearl Jewelry\"\n class=\"jewellery-img w-100\">\n </div>\n </div>\n </div>\n </div>\n </div>\n</ng-template>\n<ng-template #aboutUsTemplate>\n <div class=\"d-flex flex-column gap-3\">\n <div class=\"text_header d-flex align-items-center justify-content-center\">\n <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\n </div>\n <div class=\"desc_text\">\n {{schemeDetails?.about}}\n </div>\n </div>\n</ng-template>\n<ng-template #schemeCalculator>\n <div class=\"d-flex flex-column align-items-center\">\n <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\n <span>Calculate Your Returns</span>\n <div class=\"calc_desc\">\n See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\n your potential returns.\n </div>\n </div>\n <div class=\"calculator_section\">\n <div class=\"gold-purity\"\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\n *ngIf=\"gold?.karats === '18_k'\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\n *ngIf=\"gold?.karats === '24_k'\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\n *ngIf=\"gold?.karats === '22_k'\">\n <div>\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\n </div>\n </div>\n </div>\n <div class=\"sub-header mb-3 px-3 monthly-scheme\">\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\n <p class=\"enrolled-gram\"\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n {{purchasedGram}} gms</p>\n </div>\n\n <div class=\"calculate-slider mb-4 px-3\">\n <div class=\"slider-container position-relative\">\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"schemeDetails?.valueStep\" class=\"w-100 pale-slider\"\n [style.--mdc-slider-handle-color]=\"data?.styles?.background?.accentColor\"\n [style.--mdc-slider-focus-handle-color]=\"data?.styles?.background?.accentColor\"\n [style.--mdc-slider-hover-handle-color]=\"data?.styles?.background?.accentColor\"\n [style.--mdc-slider-active-track-color]=\"data?.styles?.background?.accentColor\"\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"data?.styles?.background?.accentColor\"\n [style.--mat-slider-ripple-color]=\"data?.styles?.background?.accentColor\"\n [style.--mat-slider-value-indicator-color]=\"data?.styles?.background?.accentColor\">\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\n </mat-slider>\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\n [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\"> -->\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\n <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\n <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\n </div>\n <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\n <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\n *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\n \u20B9 {{option?.value}}\n </div>\n </div>\n </div>\n <div class=\"mt-3\">\n <div class=\"d-flex align-items-center justify-content-center\">\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\n </div>\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\n </div>\n </div>\n\n <div class=\"calculator-bottom px-3 mb-5\">\n <div class=\"scheme-results\">\n <div class=\"row align-items-center justify-content-between mb-3 g-2\">\n <!-- Contribution Card -->\n <div class=\"col-12 col-sm-6\"\n [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\n <div class=\"card text-center h-100\">\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n <div class=\"fw-bold calc_amount fs-md-5\">\n \u20B9{{(monthlyAmount * maturityCount) | number}}\n </div>\n <div class=\"text-muted small\">\n Your {{maturityCount}}-Month Contribution\n </div>\n </div>\n </div>\n </div>\n\n <!-- Plus Icon - Hidden on mobile -->\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"fs-3 text-muted\">+</div>\n </div>\n\n <!-- Benefit Card -->\n <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"card text-center h-100\">\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n <div class=\"fw-bold calc_amount fs-md-5\">\n \u20B9{{benefitAmount | number}}\n </div>\n <div class=\"text-muted small\">\n Scheme Benefit\n </div>\n </div>\n </div>\n </div>\n\n <!-- Equals Icon - Hidden on mobile -->\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"fs-3 text-muted\">=</div>\n </div>\n\n <!-- Total Card -->\n <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n <div class=\"fw-bold calc_amount fs-md-5 text-white\">\n <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\n \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\n </span>\n <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\n \u20B9{{(monthlyAmount * maturityCount) | number}}\n </span>\n </div>\n <div class=\"text-white-50 small\">\n Total Redemption Value\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\n <div class=\"card text-center h-100\">\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\n <div class=\"fw-bold calc_amount fs-md-5\">\n {{purchasedGram}} gms\n </div>\n <div class=\"text-muted small\">\n Gold Allocation Today\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\n *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\n Store : </span></div>\n <div class=\"store-selector\">\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\n (ngModelChange)=\"getMetalPrice()\">\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\n {{store.name}} - {{store.storeRefId}}\n </option>\n </select>\n </div>\n </div>\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\n Staff Member : </span></div>\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\n <option value=\"\" disabled>Choose a staff member...</option>\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\n </option>\n </select>\n </div>\n </div>\n <div class=\"terms-and-condition\">\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\n Conditions</a>\n </div>\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\n [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\n <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\n <ng-container *ngIf=\"enrollButtonLoader\">\n <div class=\"d-flex align-items-center justify-content-center\">\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\n Loading...\n </div>\n </ng-container>\n </button>\n </div>\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\n <div class=\"d-flex align-items-center mb-3\">\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\n </div>\n\n <div class=\"row mb-3\">\n <div class=\"col-6\">\n <div class=\"result-card text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\n </div>\n </div>\n <div class=\"col-6\">\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\n </div>\n </div>\n </div>\n\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\n Enroll in Scheme\n </button>\n </div> -->\n </div>\n </div>\n </div>\n\n</ng-template>\n<ng-template #faqTemplate>\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\n <div class=\"faq-container\">\n <h1 class=\"faq-title\">Frequently Asked Questions</h1>\n <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\n <div class=\"d-flex justify-content-center align-items-center w-100\">\n <div class=\"faq-list\">\n <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\n <div class=\"faq-question\">\n <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\n <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\n <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\n </div>\n <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\n <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n</ng-template>\n<ng-template #termsAndConditions>\n <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\n <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\n <h1 class=\"terms-title\">Terms and Conditions</h1>\n\n <div class=\"terms-content\">\n <div class=\"term-item d-flex align-items-center\"\n *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\n <div class=\"terms_count\">\n <h3 class=\"term-heading\">{{ key }}.</h3>\n </div>\n <div>\n <p class=\"term-text mb-0\">\n {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\n </p>\n </div>\n </div>\n\n <!-- <div class=\"important-note\">\n <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\n Participants will be notified of any changes via registered email or SMS. Continued\n participation after notification constitutes acceptance of revised terms.</p>\n </div> -->\n </div>\n </div>\n </section>\n</ng-template>\n<ng-template #showCharges>\n <div class=\"payment-dialog\">\n <div class=\"dialog-header\">\n <h2>Payment Details</h2>\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"payment-content\">\n <div class=\"payment-row\">\n <span class=\"label\">Installment Amount:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Convenience Fee:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Payment Service Charges:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row total-row\">\n <span class=\"label total-label\">Total Amount:</span>\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n </div>\n </div>\n\n <div class=\"dialog-actions\">\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\n </div>\n </div>\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"] }]
|
15350
15353
|
}], 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: [{
|
15351
15354
|
type: Input
|
15352
15355
|
}], index: [{
|
@@ -15418,7 +15421,7 @@ class SchemesComponent extends BaseSection {
|
|
15418
15421
|
this.router.navigate(['/scheme-detail'], { queryParams: { schemeId: scheme?.id } });
|
15419
15422
|
}
|
15420
15423
|
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 }); }
|
15421
|
-
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)\">\n <div [id]=\"data?.id\" [spacingAround]=\"stylesLayout\">\n <div class=\"d-flex flex-column\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\n [id]=\"data?.id\" [simpoSpacing]=\"spacingLayout\">\n <ng-container *ngFor=\"let input of this.content?.inputText ?? []\">\n <simpo-text-editor [(value)]=\"input.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n <div class=\"row mt-2\" [simpoAnimation]=\"styles?.animation\" [class]=\"getParentClass()\" [id]=\"data?.id\"\n [simpoLayout]=\"stylesLayout\">\n <ng-container *ngFor=\"let scheme of schemes; let i = index\">\n <div class=\"d-flex flex-column\" [class]=\"getClass(i)\" (click)=\"showSchemeDetails(scheme)\">\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'\"\n [id]=\"data?.id\" alt=\"Scheme Image\" [simpoCorner]=\"styles?.corners\"\n [simpoImageDirective]=\"styles?.image\">\n <ng-container *ngIf=\"content?.display?.showText\">\n <div class=\"scheme-text mt-2 fw-bold fs-18\" [style.color]=\"styles?.background?.accentColor\">\n {{scheme?.schemeName ?? \"\"}}</div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</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"] }] }); }
|
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)\">\n <div [id]=\"data?.id\" [spacingAround]=\"stylesLayout\">\n <div class=\"d-flex flex-column\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\n [id]=\"data?.id\" [simpoSpacing]=\"spacingLayout\">\n <ng-container *ngFor=\"let input of this.content?.inputText ?? []\">\n <simpo-text-editor [(value)]=\"input.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n <div class=\"row mt-2\" [simpoAnimation]=\"styles?.animation\" [class]=\"getParentClass()\" [id]=\"data?.id\"\n [simpoLayout]=\"stylesLayout\">\n <ng-container *ngFor=\"let scheme of schemes; let i = index\">\n <div class=\"d-flex flex-column\" [class]=\"getClass(i)\" (click)=\"showSchemeDetails(scheme)\">\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'\"\n [id]=\"data?.id\" alt=\"Scheme Image\" [simpoCorner]=\"styles?.corners\"\n [simpoImageDirective]=\"styles?.image\">\n <ng-container *ngIf=\"content?.display?.showText\">\n <div class=\"scheme-text mt-2 fw-bold fs-18\" [style.color]=\"styles?.background?.accentColor\">\n {{scheme?.schemeName ?? \"\"}}</div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</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"] }] }); }
|
15422
15425
|
}
|
15423
15426
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemesComponent, decorators: [{
|
15424
15427
|
type: Component,
|
@@ -15438,7 +15441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
15438
15441
|
ImageDirectiveDirective,
|
15439
15442
|
ContentFitDirective,
|
15440
15443
|
ColorDirective
|
15441
|
-
], template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\n <div [id]=\"data?.id\" [spacingAround]=\"stylesLayout\">\n <div class=\"d-flex flex-column\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\n [id]=\"data?.id\" [simpoSpacing]=\"spacingLayout\">\n <ng-container *ngFor=\"let input of this.content?.inputText ?? []\">\n <simpo-text-editor [(value)]=\"input.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n <div class=\"row mt-2\" [simpoAnimation]=\"styles?.animation\" [class]=\"getParentClass()\" [id]=\"data?.id\"\n [simpoLayout]=\"stylesLayout\">\n <ng-container *ngFor=\"let scheme of schemes; let i = index\">\n <div class=\"d-flex flex-column\" [class]=\"getClass(i)\" (click)=\"showSchemeDetails(scheme)\">\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'\"\n [id]=\"data?.id\" alt=\"Scheme Image\" [simpoCorner]=\"styles?.corners\"\n [simpoImageDirective]=\"styles?.image\">\n <ng-container *ngIf=\"content?.display?.showText\">\n <div class=\"scheme-text mt-2 fw-bold fs-18\" [style.color]=\"styles?.background?.accentColor\">\n {{scheme?.schemeName ?? \"\"}}</div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</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"] }]
|
15444
|
+
], template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\n <div [id]=\"data?.id\" [spacingAround]=\"stylesLayout\">\n <div class=\"d-flex flex-column\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\n [id]=\"data?.id\" [simpoSpacing]=\"spacingLayout\">\n <ng-container *ngFor=\"let input of this.content?.inputText ?? []\">\n <simpo-text-editor [(value)]=\"input.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n <div class=\"row mt-2\" [simpoAnimation]=\"styles?.animation\" [class]=\"getParentClass()\" [id]=\"data?.id\"\n [simpoLayout]=\"stylesLayout\">\n <ng-container *ngFor=\"let scheme of schemes; let i = index\">\n <div class=\"d-flex flex-column\" [class]=\"getClass(i)\" (click)=\"showSchemeDetails(scheme)\">\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'\"\n [id]=\"data?.id\" alt=\"Scheme Image\" [simpoCorner]=\"styles?.corners\"\n [simpoImageDirective]=\"styles?.image\">\n <ng-container *ngIf=\"content?.display?.showText\">\n <div class=\"scheme-text mt-2 fw-bold fs-18\" [style.color]=\"styles?.background?.accentColor\">\n {{scheme?.schemeName ?? \"\"}}</div>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</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"] }]
|
15442
15445
|
}], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }], propDecorators: { data: [{
|
15443
15446
|
type: Input
|
15444
15447
|
}], edit: [{
|
@@ -21445,12 +21448,13 @@ class ReturnsCalculatorComponent extends BaseSection {
|
|
21445
21448
|
this.maxAmount = scheme?.maxInstallmentValue ? scheme.maxInstallmentValue : this.maxAmount;
|
21446
21449
|
this.maturityCount = scheme?.maturityCount ? scheme.maturityCount : this.maturityCount;
|
21447
21450
|
this.monthlyAmount = this.minAmount;
|
21448
|
-
this.installmentOptions = scheme?.suggestedValues;
|
21451
|
+
// this.installmentOptions = scheme?.suggestedValues;
|
21449
21452
|
this.stores = scheme?.storeList ? scheme.storeList : [];
|
21450
21453
|
this.selectedStaff = "";
|
21451
21454
|
this.selectedStore = {};
|
21452
|
-
|
21455
|
+
console.log(scheme);
|
21453
21456
|
this.enrolledScheme = scheme;
|
21457
|
+
this.enrolledScheme?.suggestedValues?.forEach((scheme) => this.installmentOptions.push({ status: false, value: scheme }));
|
21454
21458
|
this.benefitAmount = 0;
|
21455
21459
|
this.getMetalPrice();
|
21456
21460
|
this.onAmountChange();
|
@@ -21483,7 +21487,16 @@ class ReturnsCalculatorComponent extends BaseSection {
|
|
21483
21487
|
});
|
21484
21488
|
}
|
21485
21489
|
setMonthlyAmount(amount) {
|
21486
|
-
this.
|
21490
|
+
this.installmentOptions.forEach((option) => {
|
21491
|
+
if (option.value == amount?.value) {
|
21492
|
+
option.status = true;
|
21493
|
+
this.monthlyAmount = amount?.value;
|
21494
|
+
}
|
21495
|
+
else {
|
21496
|
+
option.status = false;
|
21497
|
+
}
|
21498
|
+
});
|
21499
|
+
this.monthlyAmount = amount.value;
|
21487
21500
|
this.onAmountChange();
|
21488
21501
|
}
|
21489
21502
|
get individualContribution() {
|
@@ -21653,7 +21666,7 @@ class ReturnsCalculatorComponent extends BaseSection {
|
|
21653
21666
|
this.router.navigate(['/scheme-detail'], { queryParams: { schemeId: this.enrolledScheme?.id, termsAndCondition: true } });
|
21654
21667
|
}
|
21655
21668
|
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 }); }
|
21656
|
-
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\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\n [simpoLayout]=\"stylesLayout\">\n <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n <ng-container *ngFor=\"let item of data?.content?.inputText\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n </div>\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n <div class=\"calculator bx-shd w-75 mx-auto my-3\">\n <div class=\"calculator-header text-center mb-4 w-100\">\n <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\n </div>\n <div class=\"sub-header mb-3 p-3\">\n <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\n </div>\n <div class=\"calculator-body-top d-flex mb-4 px-3\">\n <ng-container *ngFor=\"let scheme of allSchemes\">\n <div class=\"form-check scheme-option p-3 border rounded border-primary ind-border\"\n (click)=\"onSchemeChange(scheme)\">\n <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\n (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\n <div class=\"form-check-label ms-2\">\n <div class=\"d-flex align-items-center mb-2\">\n \uD83D\uDC64\n <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\n 'N/A'}}</div>\n </div>\n <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"gold-purity\"\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\n alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\n alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\n alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\n <div>\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\n </div>\n </div>\n </div>\n <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\n <p class=\"enrolled-gram\"\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n {{purchasedGram}} gms</p>\n </div>\n\n <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\n <div class=\"slider-container position-relative\">\n <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\n [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\n (ngModelChange)=\"onAmountChange()\">\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\n <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\n <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\n </div>\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\n </div>\n <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\n <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\n (click)=\"setMonthlyAmount(option)\">\n {{option}}\n </div>\n </div>\n </div>\n\n <div class=\"calculator-bottom px-3 mb-5\">\n <div class=\"scheme-results\">\n <!-- <div class=\"d-flex align-items-center mb-3\">\n \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\n </div> -->\n\n <div class=\"row mb-3\">\n <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\n <div class=\"result-card text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\n number}}</div>\n <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\n </div>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"result-card text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\n <div class=\"result-label text-muted small\">Scheme Benefit</div>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\"\n *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\n maturityCount)+benefitAmount) | number}}</div>\n <div class=\"result-amount fw-bold fs-5\"\n *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\n maturityCount)) | number}}</div>\n <div class=\"result-label small opacity-75\">Total Redemption Value</div>\n </div>\n </div>\n <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\n <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\n <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\n <div class=\"result-label small color-white\">Gold Allocation Today\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\n *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\n Store : </span></div>\n <div class=\"store-selector\">\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\n (ngModelChange)=\"getMetalPrice()\">\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\n {{store.name}} - {{store.storeRefId}}\n </option>\n </select>\n </div>\n </div>\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\n Staff Member : </span></div>\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\n <option value=\"\" disabled>Choose a staff member...</option>\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\n </option>\n </select>\n </div>\n </div>\n\n <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\n (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\n </div>\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\n (click)=\"enrollScheme(enrolledScheme)\"\n [style.borderColor]=\"styles?.background?.accentColor\">\n <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\n <ng-container *ngIf=\"enrollButtonLoader\">\n <div class=\"d-flex align-items-center justify-content-center\">\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\n Loading...\n </div>\n </ng-container>\n </button>\n </div>\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\n <div class=\"d-flex align-items-center mb-3\">\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\n </div>\n\n <div class=\"row mb-3\">\n <div class=\"col-6\">\n <div class=\"result-card text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\n </div>\n </div>\n <div class=\"col-6\">\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\n </div>\n </div>\n </div>\n\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\n Enroll in Scheme\n </button>\n </div> -->\n </div>\n </div>\n </div>\n </div>\n <ng-template #showCharges>\n <div class=\"payment-dialog\">\n <div class=\"dialog-header\">\n <h2>Payment Details</h2>\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"payment-content\">\n <div class=\"payment-row\">\n <span class=\"label\">Installment Amount:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Convenience Fee:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Payment Service Charges:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row total-row\">\n <span class=\"label total-label\">Total Amount:</span>\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n </div>\n </div>\n\n <div class=\"dialog-actions\">\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\n </div>\n </div>\n </ng-template>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.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"] }] }); }
|
21669
|
+
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\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\n [simpoLayout]=\"stylesLayout\">\n <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n <ng-container *ngFor=\"let item of data?.content?.inputText\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n </div>\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n <div class=\"calculator bx-shd w-75 mx-auto my-3\">\n <div class=\"calculator-header text-center mb-4 w-100\">\n <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\n </div>\n <div class=\"sub-header mb-3 p-3\">\n <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\n </div>\n <div class=\"calculator-body-top d-flex mb-4 px-3\">\n <ng-container *ngFor=\"let scheme of allSchemes\">\n <div class=\"form-check scheme-option p-3 border rounded border-primary ind-border\"\n (click)=\"onSchemeChange(scheme)\">\n <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\n (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\n <div class=\"form-check-label ms-2\">\n <div class=\"d-flex align-items-center mb-2\">\n \uD83D\uDC64\n <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\n 'N/A'}}</div>\n </div>\n <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"gold-purity\"\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\n alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\n alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\n alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\n <div>\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\n </div>\n </div>\n </div>\n <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\n <p class=\"enrolled-gram\"\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n {{purchasedGram}} gms</p>\n </div>\n\n <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\n <div class=\"slider-container position-relative\">\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"enrolledScheme?.valueStep\"\n class=\"w-100 pale-slider\"\n [style.--mdc-slider-handle-color]=\"styles?.background?.accentColor\"\n [style.--mdc-slider-focus-handle-color]=\"styles?.background?.accentColor\"\n [style.--mdc-slider-hover-handle-color]=\"styles?.background?.accentColor\"\n [style.--mdc-slider-active-track-color]=\"styles?.background?.accentColor\"\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"styles?.background?.accentColor\"\n [style.--mat-slider-ripple-color]=\"styles?.background?.accentColor\"\n [style.--mat-slider-value-indicator-color]=\"styles?.background?.accentColor\">\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\n </mat-slider>\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\n [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\n (ngModelChange)=\"onAmountChange()\"> -->\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\n <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\n <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\n </div>\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\n </div>\n <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\n <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\n (click)=\"setMonthlyAmount(option)\">\n \u20B9 {{option?.value ? option?.value : 'N/A'}}\n </div>\n </div>\n </div>\n\n <div class=\"calculator-bottom px-3 mb-5\">\n <div class=\"scheme-results\">\n <!-- <div class=\"d-flex align-items-center mb-3\">\n \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\n </div> -->\n\n <div class=\"row mb-3\">\n <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\n <div class=\"result-card text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\n number}}</div>\n <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\n </div>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"result-card text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\n <div class=\"result-label text-muted small\">Scheme Benefit</div>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\"\n *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\n maturityCount)+benefitAmount) | number}}</div>\n <div class=\"result-amount fw-bold fs-5\"\n *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\n maturityCount)) | number}}</div>\n <div class=\"result-label small opacity-75\">Total Redemption Value</div>\n </div>\n </div>\n <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\n <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\n <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\n <div class=\"result-label small color-white\">Gold Allocation Today\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\n *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\n Store : </span></div>\n <div class=\"store-selector\">\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\n (ngModelChange)=\"getMetalPrice()\">\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\n {{store.name}} - {{store.storeRefId}}\n </option>\n </select>\n </div>\n </div>\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\n Staff Member : </span></div>\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\n <option value=\"\" disabled>Choose a staff member...</option>\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\n </option>\n </select>\n </div>\n </div>\n\n <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\n (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\n </div>\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\n (click)=\"enrollScheme(enrolledScheme)\"\n [style.borderColor]=\"styles?.background?.accentColor\">\n <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\n <ng-container *ngIf=\"enrollButtonLoader\">\n <div class=\"d-flex align-items-center justify-content-center\">\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\n Loading...\n </div>\n </ng-container>\n </button>\n </div>\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\n <div class=\"d-flex align-items-center mb-3\">\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\n </div>\n\n <div class=\"row mb-3\">\n <div class=\"col-6\">\n <div class=\"result-card text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\n </div>\n </div>\n <div class=\"col-6\">\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\n </div>\n </div>\n </div>\n\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\n Enroll in Scheme\n </button>\n </div> -->\n </div>\n </div>\n </div>\n </div>\n <ng-template #showCharges>\n <div class=\"payment-dialog\">\n <div class=\"dialog-header\">\n <h2>Payment Details</h2>\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"payment-content\">\n <div class=\"payment-row\">\n <span class=\"label\">Installment Amount:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Convenience Fee:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Payment Service Charges:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row total-row\">\n <span class=\"label total-label\">Total Amount:</span>\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n </div>\n </div>\n\n <div class=\"dialog-actions\">\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\n </div>\n </div>\n </ng-template>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.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"] }] }); }
|
21657
21670
|
}
|
21658
21671
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, decorators: [{
|
21659
21672
|
type: Component,
|
@@ -21673,8 +21686,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
21673
21686
|
TextEditorComponent,
|
21674
21687
|
ButtonEditorDirective,
|
21675
21688
|
MatProgressSpinner,
|
21676
|
-
ToastModule
|
21677
|
-
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\n [simpoLayout]=\"stylesLayout\">\n <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n <ng-container *ngFor=\"let item of data?.content?.inputText\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n </div>\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n <div class=\"calculator bx-shd w-75 mx-auto my-3\">\n <div class=\"calculator-header text-center mb-4 w-100\">\n <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\n </div>\n <div class=\"sub-header mb-3 p-3\">\n <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\n </div>\n <div class=\"calculator-body-top d-flex mb-4 px-3\">\n <ng-container *ngFor=\"let scheme of allSchemes\">\n <div class=\"form-check scheme-option p-3 border rounded border-primary ind-border\"\n (click)=\"onSchemeChange(scheme)\">\n <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\n (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\n <div class=\"form-check-label ms-2\">\n <div class=\"d-flex align-items-center mb-2\">\n \uD83D\uDC64\n <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\n 'N/A'}}</div>\n </div>\n <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"gold-purity\"\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\n alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\n alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\n alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\n <div>\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\n </div>\n </div>\n </div>\n <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\n <p class=\"enrolled-gram\"\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n {{purchasedGram}} gms</p>\n </div>\n\n <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\n <div class=\"slider-container position-relative\">\n <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\n [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\n (ngModelChange)=\"onAmountChange()\">\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\n <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\n <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\n </div>\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\n </div>\n <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\n <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\n (click)=\"setMonthlyAmount(option)\">\n {{option}}\n </div>\n </div>\n </div>\n\n <div class=\"calculator-bottom px-3 mb-5\">\n <div class=\"scheme-results\">\n <!-- <div class=\"d-flex align-items-center mb-3\">\n \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\n </div> -->\n\n <div class=\"row mb-3\">\n <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\n <div class=\"result-card text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\n number}}</div>\n <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\n </div>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"result-card text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\n <div class=\"result-label text-muted small\">Scheme Benefit</div>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\"\n *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\n maturityCount)+benefitAmount) | number}}</div>\n <div class=\"result-amount fw-bold fs-5\"\n *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\n maturityCount)) | number}}</div>\n <div class=\"result-label small opacity-75\">Total Redemption Value</div>\n </div>\n </div>\n <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\n <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\n <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\n <div class=\"result-label small color-white\">Gold Allocation Today\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\n *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\n Store : </span></div>\n <div class=\"store-selector\">\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\n (ngModelChange)=\"getMetalPrice()\">\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\n {{store.name}} - {{store.storeRefId}}\n </option>\n </select>\n </div>\n </div>\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\n Staff Member : </span></div>\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\n <option value=\"\" disabled>Choose a staff member...</option>\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\n </option>\n </select>\n </div>\n </div>\n\n <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\n (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\n </div>\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\n (click)=\"enrollScheme(enrolledScheme)\"\n [style.borderColor]=\"styles?.background?.accentColor\">\n <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\n <ng-container *ngIf=\"enrollButtonLoader\">\n <div class=\"d-flex align-items-center justify-content-center\">\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\n Loading...\n </div>\n </ng-container>\n </button>\n </div>\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\n <div class=\"d-flex align-items-center mb-3\">\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\n </div>\n\n <div class=\"row mb-3\">\n <div class=\"col-6\">\n <div class=\"result-card text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\n </div>\n </div>\n <div class=\"col-6\">\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\n </div>\n </div>\n </div>\n\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\n Enroll in Scheme\n </button>\n </div> -->\n </div>\n </div>\n </div>\n </div>\n <ng-template #showCharges>\n <div class=\"payment-dialog\">\n <div class=\"dialog-header\">\n <h2>Payment Details</h2>\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"payment-content\">\n <div class=\"payment-row\">\n <span class=\"label\">Installment Amount:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Convenience Fee:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Payment Service Charges:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row total-row\">\n <span class=\"label total-label\">Total Amount:</span>\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n </div>\n </div>\n\n <div class=\"dialog-actions\">\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\n </div>\n </div>\n </ng-template>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.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"] }]
|
21689
|
+
ToastModule,
|
21690
|
+
MatSlider,
|
21691
|
+
MatSliderModule
|
21692
|
+
], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\n [simpoLayout]=\"stylesLayout\">\n <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n <ng-container *ngFor=\"let item of data?.content?.inputText\">\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\n </ng-container>\n </div>\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\n <div class=\"calculator bx-shd w-75 mx-auto my-3\">\n <div class=\"calculator-header text-center mb-4 w-100\">\n <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\n </div>\n <div class=\"sub-header mb-3 p-3\">\n <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\n </div>\n <div class=\"calculator-body-top d-flex mb-4 px-3\">\n <ng-container *ngFor=\"let scheme of allSchemes\">\n <div class=\"form-check scheme-option p-3 border rounded border-primary ind-border\"\n (click)=\"onSchemeChange(scheme)\">\n <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\n (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\n <div class=\"form-check-label ms-2\">\n <div class=\"d-flex align-items-center mb-2\">\n \uD83D\uDC64\n <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\n 'N/A'}}</div>\n </div>\n <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n <div class=\"gold-purity\"\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\n alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\n alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\n alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\n <div>\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\n </div>\n </div>\n </div>\n <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\n <p class=\"enrolled-gram\"\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\n {{purchasedGram}} gms</p>\n </div>\n\n <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\n <div class=\"slider-container position-relative\">\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"enrolledScheme?.valueStep\"\n class=\"w-100 pale-slider\"\n [style.--mdc-slider-handle-color]=\"styles?.background?.accentColor\"\n [style.--mdc-slider-focus-handle-color]=\"styles?.background?.accentColor\"\n [style.--mdc-slider-hover-handle-color]=\"styles?.background?.accentColor\"\n [style.--mdc-slider-active-track-color]=\"styles?.background?.accentColor\"\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"styles?.background?.accentColor\"\n [style.--mat-slider-ripple-color]=\"styles?.background?.accentColor\"\n [style.--mat-slider-value-indicator-color]=\"styles?.background?.accentColor\">\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\n </mat-slider>\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\n [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\n (ngModelChange)=\"onAmountChange()\"> -->\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\n <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\n <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\n </div>\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\n </div>\n <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\n <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\n (click)=\"setMonthlyAmount(option)\">\n \u20B9 {{option?.value ? option?.value : 'N/A'}}\n </div>\n </div>\n </div>\n\n <div class=\"calculator-bottom px-3 mb-5\">\n <div class=\"scheme-results\">\n <!-- <div class=\"d-flex align-items-center mb-3\">\n \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\n </div> -->\n\n <div class=\"row mb-3\">\n <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\n <div class=\"result-card text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\n number}}</div>\n <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\n </div>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"result-card text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\n <div class=\"result-label text-muted small\">Scheme Benefit</div>\n </div>\n </div>\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\"\n *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\n maturityCount)+benefitAmount) | number}}</div>\n <div class=\"result-amount fw-bold fs-5\"\n *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\n maturityCount)) | number}}</div>\n <div class=\"result-label small opacity-75\">Total Redemption Value</div>\n </div>\n </div>\n <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\n <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\n <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\n <div class=\"result-label small color-white\">Gold Allocation Today\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\n *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\n Store : </span></div>\n <div class=\"store-selector\">\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\n (ngModelChange)=\"getMetalPrice()\">\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\n {{store.name}} - {{store.storeRefId}}\n </option>\n </select>\n </div>\n </div>\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\n Staff Member : </span></div>\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\n <option value=\"\" disabled>Choose a staff member...</option>\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\n </option>\n </select>\n </div>\n </div>\n\n <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\n (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\n </div>\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\n (click)=\"enrollScheme(enrolledScheme)\"\n [style.borderColor]=\"styles?.background?.accentColor\">\n <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\n <ng-container *ngIf=\"enrollButtonLoader\">\n <div class=\"d-flex align-items-center justify-content-center\">\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\n Loading...\n </div>\n </ng-container>\n </button>\n </div>\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\n <div class=\"d-flex align-items-center mb-3\">\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\n </div>\n\n <div class=\"row mb-3\">\n <div class=\"col-6\">\n <div class=\"result-card text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\n </div>\n </div>\n <div class=\"col-6\">\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\n </div>\n </div>\n </div>\n\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\n Enroll in Scheme\n </button>\n </div> -->\n </div>\n </div>\n </div>\n </div>\n <ng-template #showCharges>\n <div class=\"payment-dialog\">\n <div class=\"dialog-header\">\n <h2>Payment Details</h2>\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n\n <div class=\"payment-content\">\n <div class=\"payment-row\">\n <span class=\"label\">Installment Amount:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Convenience Fee:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row\">\n <span class=\"label\">Payment Service Charges:</span>\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n </div>\n\n <div class=\"payment-row total-row\">\n <span class=\"label total-label\">Total Amount:</span>\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n </div>\n </div>\n\n <div class=\"dialog-actions\">\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\n </div>\n </div>\n </ng-template>\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n </div>\n\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n </div>\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.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"] }]
|
21678
21693
|
}], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: i2$2.Router }, { type: i6$1.MessageService }], propDecorators: { showChargesTemplate: [{
|
21679
21694
|
type: ViewChild,
|
21680
21695
|
args: ['showCharges', { static: true }]
|