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.
@@ -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=\"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"] }]
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 g-5\" [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"] }] }); }
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 g-5\" [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"] }]
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("84a8304f-84c5-11f0-b0bd-efe6a9626b92")
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
- // console.log(scheme);
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.monthlyAmount = amount;
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 }]