simpo-component-library 3.6.476 → 3.6.478

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/esm2022/lib/directive/translate-onhover.directive.mjs +3 -2
  2. package/esm2022/lib/ecommerce/sections/returns-calculator/returns-calculator.component.mjs +22 -7
  3. package/esm2022/lib/ecommerce/sections/schemes/schemes.component.mjs +3 -3
  4. package/esm2022/lib/elements/pricing-s1/pricing-s1.component.mjs +3 -3
  5. package/esm2022/lib/elements/text-editor/text-editor.component.mjs +1 -2
  6. package/esm2022/lib/sections/banner-section/banner-section.component.mjs +13 -3
  7. package/esm2022/lib/sections/pricing-section/pricing-section.component.mjs +15 -3
  8. package/esm2022/lib/sections/scheme-detail/scheme-detail.component.mjs +7 -6
  9. package/esm2022/lib/sections/service-section/service-section.component.mjs +13 -3
  10. package/esm2022/lib/sections/testimonial-section/testimonial-section.component.mjs +3 -3
  11. package/esm2022/lib/sections/text-section/text-section.component.mjs +13 -3
  12. package/fesm2022/simpo-component-library.mjs +82 -27
  13. package/fesm2022/simpo-component-library.mjs.map +1 -1
  14. package/lib/ecommerce/sections/authentication-required/authentication-required.component.d.ts +1 -1
  15. package/lib/ecommerce/sections/returns-calculator/returns-calculator.component.d.ts +2 -2
  16. package/lib/ecommerce/sections/schemes/schemes.component.d.ts +1 -1
  17. package/lib/elements/link-editor/link-editor.component.d.ts +1 -1
  18. package/lib/elements/pricing-s1/pricing-s1.component.d.ts +1 -1
  19. package/lib/sections/banner-carousel/banner-carousel.component.d.ts +3 -3
  20. package/lib/sections/banner-section/banner-section.component.d.ts +2 -0
  21. package/lib/sections/carousel-banner/carousel-banner.component.d.ts +1 -1
  22. package/lib/sections/logo-showcase/logo-showcase.component.d.ts +2 -2
  23. package/lib/sections/new-testimonials/new-testimonials.component.d.ts +1 -1
  24. package/lib/sections/pricing-section/pricing-section.component.d.ts +2 -1
  25. package/lib/sections/service-section/service-section.component.d.ts +2 -0
  26. package/lib/sections/text-section/text-section.component.d.ts +2 -0
  27. package/package.json +1 -1
  28. package/simpo-component-library-3.6.478.tgz +0 -0
  29. package/simpo-component-library-3.6.476.tgz +0 -0
@@ -1849,7 +1849,6 @@ class TextEditorComponent {
1849
1849
  });
1850
1850
  }
1851
1851
  updateText(event) {
1852
- console.log(this.editor.nativeElement.innerHTML);
1853
1852
  this.valueChange.emit(this.editor.nativeElement.innerHTML);
1854
1853
  }
1855
1854
  onFormatChange(event) {
@@ -2542,13 +2541,14 @@ class TranslateOnhoverDirective {
2542
2541
  });
2543
2542
  this.el.nativeElement.addEventListener('mouseout', () => {
2544
2543
  this.el.nativeElement.style.position = 'relative';
2545
- this.el.nativeElement.style.transform = 'translateY(0)';
2544
+ this.el.nativeElement.style.removeProperty("transform");
2546
2545
  });
2547
2546
  }
2548
2547
  else {
2549
2548
  this.el.nativeElement.style.setProperty("transition", "none");
2550
2549
  this.el.nativeElement.addEventListener('mouseover', () => {
2551
2550
  this.el.nativeElement.style.position = 'relative';
2551
+ this.el.nativeElement.style.removeProperty("transform");
2552
2552
  });
2553
2553
  }
2554
2554
  }
@@ -4762,6 +4762,16 @@ class TextSectionComponent extends BaseSection {
4762
4762
  getScreenSize() {
4763
4763
  this.screenWidth = window.innerWidth;
4764
4764
  }
4765
+ getGlassyBackground(color) {
4766
+ return `rgba(${this.hexToRgb(color)}, 0.1)`;
4767
+ }
4768
+ hexToRgb(hex) {
4769
+ const bigint = parseInt(hex.slice(1), 16);
4770
+ const r = (bigint >> 16) & 255;
4771
+ const g = (bigint >> 8) & 255;
4772
+ const b = bigint & 255;
4773
+ return `${r}, ${g}, ${b}`;
4774
+ }
4765
4775
  editSection() {
4766
4776
  if (window.innerWidth <= 475)
4767
4777
  return;
@@ -4771,7 +4781,7 @@ class TextSectionComponent extends BaseSection {
4771
4781
  }, 100);
4772
4782
  }
4773
4783
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextSectionComponent, deps: [{ token: i1$1.MatDialog }, { token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
4774
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextSectionComponent, isStandalone: true, selector: "simpo-text-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"main-section\"\r\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag\r\n [cdkDragFreeDragPosition]=\"point\" (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\"\r\n [cdkDragDisabled]=\"!edit\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div class=\"body-section w-100\">\r\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element> -->\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\"\r\n class=\"w-100 overflow-scroll\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-2 d-md-flex mt-15 w-100 flex-wrap\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [color]=\"styles?.background?.accentColor\" [sectionId]=\"data?.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.overflow-scroll{overflow-x:scroll}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type:
4784
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TextSectionComponent, isStandalone: true, selector: "simpo-text-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"main-section\"\r\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag\r\n [cdkDragFreeDragPosition]=\"point\" (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\"\r\n [cdkDragDisabled]=\"!edit\" [style.color]=\"styles?.background?.accentColor\"\r\n [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div class=\"body-section w-100\">\r\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element> -->\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\"\r\n class=\"w-100 overflow-scroll\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-2 d-md-flex mt-15 w-100 flex-wrap\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [color]=\"styles?.background?.accentColor\" [sectionId]=\"data?.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.overflow-scroll{overflow-x:scroll}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type:
4775
4785
  //directive
4776
4786
  AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }] }); }
4777
4787
  }
@@ -4794,7 +4804,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
4794
4804
  ContentFitDirective,
4795
4805
  HoverDirective,
4796
4806
  OverlayDirective,
4797
- ], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"main-section\"\r\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag\r\n [cdkDragFreeDragPosition]=\"point\" (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\"\r\n [cdkDragDisabled]=\"!edit\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div class=\"body-section w-100\">\r\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element> -->\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\"\r\n class=\"w-100 overflow-scroll\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-2 d-md-flex mt-15 w-100 flex-wrap\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [color]=\"styles?.background?.accentColor\" [sectionId]=\"data?.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.overflow-scroll{overflow-x:scroll}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}\n"] }]
4807
+ ], template: "<div [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\" [attr.style]=\"customClass\">\r\n <div [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n <div #mainContainer class=\"rowFlex\" [id]=\"data?.id\" [simpoOverlay]=\"styles?.background\"\r\n [simpoBorder]=\"styles?.border\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"main-section\"\r\n [ngClass]=\"{'justify-content-md-start': styles?.layout?.align === 'left' , 'justify-content-md-end': styles?.layout?.align === 'right'}\"\r\n [id]=\"data?.id\" [simpoLayout]=\"styles?.layout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag\r\n [cdkDragFreeDragPosition]=\"point\" (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\"\r\n [cdkDragDisabled]=\"!edit\" [style.color]=\"styles?.background?.accentColor\"\r\n [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div class=\"body-section w-100\">\r\n <div [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <!-- <simpo-text-element [textData]=\"item.value\" [textLabel]=\"item.label\"></simpo-text-element> -->\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\"\r\n class=\"w-100 overflow-scroll\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-2 d-md-flex mt-15 w-100 flex-wrap\" *ngIf=\"data?.action?.display\" [ngClass]=\"[\r\n styles?.layout?.align === 'left' ? 'justify-content-md-start' : '',\r\n styles?.layout?.align === 'center' ? 'justify-content-md-center' : '',\r\n styles?.layout?.align === 'right' ? 'justify-content-md-end' : ''\r\n ]\">\r\n <ng-container *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [edit]=\"edit\" [color]=\"styles?.background?.accentColor\" [sectionId]=\"data?.id\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".total_container{height:auto;position:relative}.body-section{padding:4% 15px}.button-section{margin-top:15px}.clipPath{clip-path:polygon(0% 100%,50% 0%,100% 100%);height:100px;background-color:#00f}.overflow-scroll{overflow-x:scroll}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.mt-15{margin-top:15px}@media only screen and (max-width: 475px){.d-flex{justify-content:center;margin-bottom:25px}}\n"] }]
4798
4808
  }], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: EventsService }], propDecorators: { data: [{
4799
4809
  type: Input
4800
4810
  }], index: [{
@@ -5185,8 +5195,18 @@ class BannerSectionComponent extends BaseSection {
5185
5195
  else
5186
5196
  return `linear-gradient(${direction} ,${this.styles?.background?.accentColor},${this.styles?.background?.secondaryAccentColor})`;
5187
5197
  }
5198
+ getGlassyBackground(color) {
5199
+ return `rgba(${this.hexToRgb(color)}, 0.1)`;
5200
+ }
5201
+ hexToRgb(hex) {
5202
+ const bigint = parseInt(hex.slice(1), 16);
5203
+ const r = (bigint >> 16) & 255;
5204
+ const g = (bigint >> 8) & 255;
5205
+ const b = bigint & 255;
5206
+ return `${r}, ${g}, ${b}`;
5207
+ }
5188
5208
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BannerSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
5189
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\" [simpoMergeHeader]=\"styles?.merge\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\" (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'wrap-reverse' : styles?.positionLayout?.value == 'bottom'}\">\r\n <!-- overflow-hidden -->\r\n <!-- [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\" -->\r\n <!-- [simpoMergeHeader]=\"styles?.merge\" -->\r\n <!-- [backgroundInfo]=\"styles?.background?.image\" -->\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': (isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')) || !content?.image?.showImage}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?. image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <!-- 'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-12':!isBorderlessImage || !content?.image?.showImage, -->\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'box p-3': content?.display?.showCard , 'col-lg-6' : content?.image?.showImage && !isBorderlessImage }\"\r\n [style.background]=\"content?.display?.showCard ? getColor() : 'transparent'\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n alt=\"something\" />\r\n <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.wrap-reverse{flex-wrap:wrap-reverse!important}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type:
5209
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BannerSectionComponent, isStandalone: true, selector: "simpo-banner-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, usesInheritance: true, ngImport: i0, template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\" [simpoMergeHeader]=\"styles?.merge\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\"\r\n [style.color]=\"styles?.background?.accentColor\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'wrap-reverse' : styles?.positionLayout?.value == 'bottom'}\">\r\n <!-- overflow-hidden -->\r\n <!-- [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\" -->\r\n <!-- [simpoMergeHeader]=\"styles?.merge\" -->\r\n <!-- [backgroundInfo]=\"styles?.background?.image\" -->\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': (isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')) || !content?.image?.showImage}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?. image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <!-- 'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-12':!isBorderlessImage || !content?.image?.showImage, -->\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'box p-3': content?.display?.showCard , 'col-lg-6' : content?.image?.showImage && !isBorderlessImage }\"\r\n [style.background]=\"content?.display?.showCard ? getColor() : 'transparent'\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n alt=\"something\" />\r\n <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.wrap-reverse{flex-wrap:wrap-reverse!important}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type:
5190
5210
  // SimpoHoverBorderDirective,
5191
5211
  //directive
5192
5212
  SimpoBorderlessDirective, selector: "[simpoBorderless]", inputs: ["simpoBorderless"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: simpoConetenAlignmentDirective, selector: "[simpoContentAlignment]", inputs: ["simpoContentAlignment"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: PositionLayoutDirectiveDirective, selector: "[simpoPositionLayoutDirective]", inputs: ["simpoPositionLayoutDirective"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: MergeHeaderDirective, selector: "[simpoMergeHeader]", inputs: ["simpoMergeHeader", "backgroundInfo"] }] }); }
@@ -5220,7 +5240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
5220
5240
  SpacingAroundDirective,
5221
5241
  ImageEditorDirective,
5222
5242
  MergeHeaderDirective
5223
- ], template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\" [simpoMergeHeader]=\"styles?.merge\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\" (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'wrap-reverse' : styles?.positionLayout?.value == 'bottom'}\">\r\n <!-- overflow-hidden -->\r\n <!-- [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\" -->\r\n <!-- [simpoMergeHeader]=\"styles?.merge\" -->\r\n <!-- [backgroundInfo]=\"styles?.background?.image\" -->\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': (isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')) || !content?.image?.showImage}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?. image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <!-- 'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-12':!isBorderlessImage || !content?.image?.showImage, -->\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'box p-3': content?.display?.showCard , 'col-lg-6' : content?.image?.showImage && !isBorderlessImage }\"\r\n [style.background]=\"content?.display?.showCard ? getColor() : 'transparent'\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n alt=\"something\" />\r\n <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.wrap-reverse{flex-wrap:wrap-reverse!important}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"] }]
5243
+ ], template: "<div [id]=\"data?.id\"\r\n [ngClass]=\"{'mergeNavbar': canMergeNavbar && index == 1, 'justify-content-between d-flex': isBorderlessImage , 'd-block': isBorderlessImage}\"\r\n class=\"total-container\" style=\"overflow-x: hidden;\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n [attr.style]=\"customClass\" [simpoMergeHeader]=\"styles?.merge\">\r\n <div [spacingAround]=\"stylesLayout\" [id]=\"data?.id\" [simpoBorder]=\"styles?.border\"\r\n class=\"d-flex justify-content-center\" [backgroundInfo]=\"styles?.background\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\"\r\n [style.color]=\"styles?.background?.accentColor\" [style.borderColor]=\"styles?.background?.accentColor\"\r\n [style.background]=\"getGlassyBackground(styles?.background?.accentColor)\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [simpoBackground]=\"styles?.background\" [id]=\"data?.id\" class=\"total-container row w-100\"\r\n [simpoCorner]=\"styles?.corners\" [ngClass]=\"{'wrap-reverse' : styles?.positionLayout?.value == 'bottom'}\">\r\n <!-- overflow-hidden -->\r\n <!-- [ngClass]=\"{'flex-column': isBorderlessImage && styles?.positionLayout?.value === 'top' , 'flex-column-reverse': isBorderlessImage && styles?.positionLayout?.value === 'bottom'}\" -->\r\n <!-- [simpoMergeHeader]=\"styles?.merge\" -->\r\n <!-- [backgroundInfo]=\"styles?.background?.image\" -->\r\n <ng-container *ngTemplateOutlet=\"ImageSection\"></ng-container>\r\n <div class=\"py-5\"\r\n [ngClass]=\"{'col-lg-6 col-xxl-6': content?.image?.showImage && isBorderlessImage, 'w-100 col-xxl-8': !isBorderlessImage || !content?.image?.showImage , 'col-lg-12 col-md-12 col-12 width-100': (isBorderlessImage && (styles?.positionLayout?.value === 'top' || styles?.positionLayout?.value === 'bottom')) || !content?.image?.showImage}\"\r\n [id]=\"data?.id\" [spacingHorizontal]=\"stylesLayout\" [simpoOverlay]=\"styles?.background\">\r\n <div class=\"row g-5 justify-content-start mlr-0 h-auto\" [id]=\"data?.id\"\r\n [style.flexDirection]=\"styles?.revertImage ? 'column-reverse' : ''\" [simpoAnimation]=\"styles?.animation\"\r\n [simpoLayout]=\"styles?.layout\" [simpoPositionLayoutDirective]=\"styles?.positionLayout\"\r\n [ngClass]=\"{ 'align-items-stretch': styles?.positionLayout?.value === 'left' || styles?.positionLayout?.value === 'right', 'flex-lg-row': true }\">\r\n <div class=\"col-10 col-sm-8 col-lg-6\" *ngIf=\"content?. image?.showImage && !isBorderlessImage\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"content?.image?.position\" [simpoCorner]=\"styles?.corners\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"content?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(content?.image?.id || '')\" class=\"d-block w-100 insideImg\"\r\n [alt]=\"content?.image?.altText\" loading=\"lazy\" />\r\n </div>\r\n <!-- 'col-lg-12': content?.image?.showImage && isBorderlessImage, 'col-lg-12':!isBorderlessImage || !content?.image?.showImage, -->\r\n <div class=\"d-flex flex-column justify-content-start gap-15 content-side\"\r\n [ngClass]=\"{'box p-3': content?.display?.showCard , 'col-lg-6' : content?.image?.showImage && !isBorderlessImage }\"\r\n [style.background]=\"content?.display?.showCard ? getColor() : 'transparent'\"\r\n [simpoContainerAlignment]=\"stylesLayout\" [id]=\"data?.id\" [simpoContentAlignment]=\"styles?.contentAlignment\"\r\n [simpoCorner]=\"styles?.corners\">\r\n <div *ngFor=\"let item of content?.inputText\">\r\n <div [ngClass]=\"item.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"d-flex gap-3 card-container flex-wrap\"\r\n [ngClass]=\"{'gap-3': screenWidth > 475 , 'gap-1' : screenWidth <= 475}\">\r\n <div *ngFor=\"let item of content?.listItem?.data\" class=\"carder\">\r\n <div class=\"card_wrapper\">\r\n <div class=\"container_card visible\">\r\n <div class=\"card-section\">\r\n <div class=\"second-part-card\">\r\n </div>\r\n <div class=\"first-part-card d-flex align-items-center\"\r\n [ngClass]=\"item.inputText[0].label=== 'Heading' ? 'heading-large lh-2 mb-3' : 'body-large'\">\r\n <img loading=\"lazy\" class=\"tick-img\"\r\n src=\"https://png.pngtree.com/png-vector/20230910/ourmid/pngtree-3d-tick-sign-icon-png-image_9225323.png\"\r\n alt=\"something\" />\r\n <!-- <div [innerHTML]=\"item.inputText[0].value | sanitizeHtml\" class=\"ml-5\"></div> -->\r\n <simpo-text-editor [(value)]=\"item.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\"\r\n [buttonId]=\"button.id\" [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\"\r\n [edit]=\"edit\" [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-container *ngIf=\"styles?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"styles?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n [isMerged]=\"styles?.merge ?? false\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>\r\n<ng-template #ImageSection>\r\n <div class=\"col-10 col-sm-8 col-lg-6\"\r\n [ngClass]=\"{'w-100' : content?.image?.showImage && isBorderlessImage && styles?.positionLayout?.value == 'top' || styles?.positionLayout?.value == 'bottom'}\"\r\n style=\"padding: 0px !important;\" *ngIf=\"content?.image?.showImage && isBorderlessImage;\"\r\n [simpoBorderless]=\"getPositionLayout\" [simpoAnimation]=\"styles?.animation\">\r\n <img loading=\"lazy\" [src]=\"content?.image?.url\" class=\"d-block img-fluid h-100 w-100\"\r\n [simpoImageDirective]=\"styles?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"content?.image?.position\"\r\n [alt]=\"content?.image?.altText\" width=\"700\" height=\"500\" loading=\"lazy\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"content?.image\" [sectionId]=\"data?.id\" />\r\n </div>\r\n</ng-template>", styles: [".btn-primary{border:none}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.width-100{width:100%!important}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}.gap-15{gap:15px}.box{border:8px solid rgba(240,240,240,.8);box-shadow:#63636333 0 2px 8px}@media only screen and (max-width: 475px){.col-10{width:100%;max-width:100%;flex-basis:100%;height:32vh;padding-right:13px;padding-left:13px}.wrap-reverse{flex-wrap:wrap-reverse!important}.insideImg{height:100%!important}.card-container{flex-direction:column}}.text-element{inline-size:100%;overflow-wrap:break-word}.container_card .card-section{align-items:center;gap:20px;padding-top:5px;padding-bottom:5px;width:100%;border-radius:10px;opacity:0;transform:translateY(150px);transition:2s all ease}.card_wrapper{display:flex;flex-direction:column;gap:20px}.visible{visibility:visible!important}.visible .card-section{opacity:1;transform:translateY(0)}.first-part-card{min-width:fit-content}.first-part-card .body-large{font-size:1.1rem;font-weight:700}.second-part-card{width:2px;height:2px;border-radius:50%;display:flex;justify-content:center;align-items:center}.third-part-card .heading-large{font-size:1.1rem;font-weight:700}.third-part-card .body-large{font-size:12px;font-weight:400;line-height:15px}.tick-img{width:25px;height:25px;border-radius:50%}.third-part-card{display:flex;flex-direction:column;gap:10px}.image-card{width:50%!important}.svg{fill:#ffb6c1;transform:rotate(180deg)}.ml-5{margin-left:5px}.mlr-0{margin-left:0;margin-right:0}.d-block{display:block!important}\n"] }]
5224
5244
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
5225
5245
  type: Input
5226
5246
  }], index: [{
@@ -6060,6 +6080,16 @@ class ServiceSectionComponent extends BaseSection {
6060
6080
  getScreenSize() {
6061
6081
  this.screenWidth = window.innerWidth;
6062
6082
  }
6083
+ getGlassyBackground(color) {
6084
+ return `rgba(${this.hexToRgb(color)}, 0.1)`;
6085
+ }
6086
+ hexToRgb(hex) {
6087
+ const bigint = parseInt(hex.slice(1), 16);
6088
+ const r = (bigint >> 16) & 255;
6089
+ const g = (bigint >> 8) & 255;
6090
+ const b = bigint & 255;
6091
+ return `${r}, ${g}, ${b}`;
6092
+ }
6063
6093
  editSection() {
6064
6094
  if (window.innerWidth <= 475)
6065
6095
  return;
@@ -6069,7 +6099,7 @@ class ServiceSectionComponent extends BaseSection {
6069
6099
  }, 100);
6070
6100
  }
6071
6101
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ServiceSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
6072
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\"\r\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"row w-100 justify-content-center\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}@media screen and (max-width: 475px){.cards{padding:5px 8px 10px!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type:
6102
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ServiceSectionComponent, isStandalone: true, selector: "simpo-service-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\" [style.color]=\"style?.background?.accentColor\" [style.borderColor]=\"style?.background?.accentColor\" [style.background]=\"getGlassyBackground(style?.background?.accentColor)\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\"\r\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"row w-100 justify-content-center\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-width:1px!important;border-style:solid!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important;font-family:var(--website-font-family)}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}@media screen and (max-width: 475px){.cards{padding:5px 8px 10px!important}}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: BelowImageCardComponent, selector: "simpo-below-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: TopOfImageCardComponent, selector: "simpo-top-of-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: CoveringImageCardComponent, selector: "simpo-covering-image-card", inputs: ["data", "styles", "content", "componentId", "button", "edit"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type:
6073
6103
  //directive
6074
6104
  ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ColumnDirectiveDirective, selector: "[simpoColumnDirective]", inputs: ["simpoColumnDirective"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: SimpoContainerAligment, selector: "[simpoContainerAlignment]", inputs: ["simpoContainerAlignment"] }] }); }
6075
6105
  }
@@ -6104,7 +6134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
6104
6134
  SpacingHorizontalDirective,
6105
6135
  SpacingAroundDirective,
6106
6136
  SimpoContainerAligment
6107
- ], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\"\r\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"row w-100 justify-content-center\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.3)!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}@media screen and (max-width: 475px){.cards{padding:5px 8px 10px!important}}\n"] }]
6137
+ ], template: "<section [id]=\"data?.id\" simpoHover (hovering)=\"showEditTabs($event)\" class=\"total-container\"\r\n [attr.style]=\"customClass\">\r\n <div [spacingAround]=\"stylesLayout\">\r\n <div class=\"draggable\" *ngIf=\"content?.tag?.display && screenWidth > 475\" cdkDrag [cdkDragFreeDragPosition]=\"point\"\r\n (cdkDragEnded)=\"onDragEnded($event)\" cdkDragBoundary=\".total-container\" [cdkDragDisabled]=\"!edit\" [style.color]=\"style?.background?.accentColor\" [style.borderColor]=\"style?.background?.accentColor\" [style.background]=\"getGlassyBackground(style?.background?.accentColor)\">\r\n {{ content?.tag?.label }}\r\n </div>\r\n <div [id]=\"data?.id\" [simpoBackground]=\"style?.background\" [simpoCorner]=\"style?.corners\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid d-flex flex-column\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\"\r\n [simpoLayout]=\"style?.layout\">\r\n <div class=\"w-100\" *ngFor=\"let text of data?.content?.inputText\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\"\r\n [ngClass]=\"text.label.includes('Heading') ? 'heading-large lh-2 mb-4' : 'body-large'\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n <div class=\"row w-100 justify-content-center\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\"\r\n [class.row-scroll]=\"style?.direction === 'ROW'\" #container>\r\n <div class=\"cards\" [simpoColumnDirective]=\"data?.styles?.size\" [id]=\"data?.id\"\r\n *ngFor=\"let service of content?.listItem?.data\">\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.BELOW_IMAGE\">\r\n <simpo-below-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-below-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.TOP_OF_IMAGE\">\r\n <simpo-top-of-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-top-of-image-card>\r\n </ng-container>\r\n <ng-container *ngIf=\"style?.textPosition === TextPosition.COVERING_IMAGE\">\r\n <simpo-covering-image-card [data]=\"service\" [styles]=\"style\" [content]=\"content\" [button]=\"button\"\r\n [componentId]=\"data?.id\" [edit]=\"edit\"></simpo-covering-image-card>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div *ngIf=\"data?.action && data?.action?.display\" class=\"button-display d-flex mt-3 gap-2\"\r\n [simpoContainerAlignment]=\"stylesLayout\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{height:auto;position:relative}.mb-1{margin-bottom:1.5rem!important}.cards{padding-bottom:10px}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.row-scroll{flex-wrap:nowrap!important;width:100%;overflow-x:scroll}.button-display{display:flex;flex-wrap:wrap;gap:10px}.draggable{background:#fff3;border-radius:32px!important;box-shadow:0 4px 30px #0000001a!important;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-width:1px!important;border-style:solid!important;z-index:1;position:absolute;width:max-content;padding:8px 10px;font-weight:400;font-size:12px!important;font-family:var(--website-font-family)}@media screen and (min-width: 760px){.cards{padding-bottom:24px;margin-bottom:10px}}@media screen and (max-width: 475px){.cards{padding:5px 8px 10px!important}}\n"] }]
6108
6138
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
6109
6139
  type: Input
6110
6140
  }], index: [{
@@ -6316,7 +6346,7 @@ class TestimonialSectionComponent extends BaseSection {
6316
6346
  }
6317
6347
  }
6318
6348
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TestimonialSectionComponent, deps: [{ token: EventsService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
6319
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }, { propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [class.px-1]=\"screenWidth < 475\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\" #carouselInner>\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\" data-bs-interval=\"10000\" #carouselItem>\r\n <div style=\"width: max-content; margin: auto; max-width: 90%;\" class=\"carousel-parent\"\r\n [class.card-form]=\"content?.display?.showCard\" [simpoCorner]=\"style?.corners\"\r\n [style.borderColor]=\"content?.display?.showCard ? style?.background?.accentColor : 'none'\"\r\n [style.background]=\"content?.display?.showCard ? getColor(style?.background?.accentColor) : 'transparent'\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <ng-container *ngIf=\"content?.display?.showImage\">\r\n <img loading=\"lazy\" [src]=\"testimonial?.image?.url\" class=\"mb-1\" loading=\"lazy\"\r\n [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n </ng-container>\r\n <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n <div class=\"d-flex\">\r\n <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\" *ngIf=\"getLength() > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n data-bs-slide=\"next\" *ngIf=\"getLength() > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")}.carousel-item{height:100%;transition:transform .6s ease-in-out,opacity .6s ease-in-out}.previous-icon{position:absolute;height:45px}.card-form{border-width:2px;border-style:solid;padding:16px}.carousel-inner{overflow:visible!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.carousel-parent,.carousel-caption{width:100%!important}}li{list-style:none}.heading-medium{font-weight:400!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
6349
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TestimonialSectionComponent, isStandalone: true, selector: "simpo-testimonial-section", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)", "window:resize": "onWindowResize()" } }, viewQueries: [{ propertyName: "_mainContainer", first: true, predicate: ["mainContainer"], descendants: true }, { propertyName: "carouselInner", first: true, predicate: ["carouselInner"], descendants: true }, { propertyName: "carouselItems", predicate: ["carouselItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [class.px-1]=\"screenWidth < 475\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\" #carouselInner>\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\" data-bs-interval=\"10000\" #carouselItem>\r\n <div style=\"width: max-content; margin: auto; max-width: 90%;\" class=\"carousel-parent\"\r\n [class.card-form]=\"content?.display?.showCard\" [simpoCorner]=\"style?.corners\"\r\n [style.borderColor]=\"content?.display?.showCard ? style?.background?.accentColor : 'none'\"\r\n [style.background]=\"content?.display?.showCard ? getColor(style?.background?.accentColor) : 'transparent'\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <ng-container *ngIf=\"content?.display?.showImage\">\r\n <img loading=\"lazy\" [src]=\"testimonial?.image?.url\" class=\"mb-1\" loading=\"lazy\"\r\n [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n </ng-container>\r\n <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n <div class=\"d-flex\">\r\n <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\" *ngIf=\"getLength() > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n data-bs-slide=\"next\" *ngIf=\"getLength() > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")}.carousel-item{height:100%;transition:transform .6s ease-in-out,opacity .6s ease-in-out}.previous-icon{position:absolute;height:45px}.card-form{border-width:2px;border-style:solid;padding:16px}.carousel-inner{overflow:visible!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.carousel-parent,.carousel-caption{width:100%!important}}li{list-style:none}.heading-medium{font-weight:400!important}\n"], dependencies: [{ kind: "ngmodule", type: SimpoElementsModule }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type:
6320
6350
  //directive
6321
6351
  AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: ContainerFitDirective, selector: "[simpoContainerLayout]", inputs: ["simpoContainerLayout"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }] }); }
6322
6352
  }
@@ -6351,7 +6381,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
6351
6381
  TextEditorComponent,
6352
6382
  ImageEditorDirective,
6353
6383
  SpacingHorizontalDirective,
6354
- ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [class.px-1]=\"screenWidth < 475\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\" #carouselInner>\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\" data-bs-interval=\"10000\" #carouselItem>\r\n <div style=\"width: max-content; margin: auto; max-width: 90%;\" class=\"carousel-parent\"\r\n [class.card-form]=\"content?.display?.showCard\" [simpoCorner]=\"style?.corners\"\r\n [style.borderColor]=\"content?.display?.showCard ? style?.background?.accentColor : 'none'\"\r\n [style.background]=\"content?.display?.showCard ? getColor(style?.background?.accentColor) : 'transparent'\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <ng-container *ngIf=\"content?.display?.showImage\">\r\n <img loading=\"lazy\" [src]=\"testimonial?.image?.url\" class=\"mb-1\" loading=\"lazy\"\r\n [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n </ng-container>\r\n <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n <div class=\"d-flex\">\r\n <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\" *ngIf=\"getLength() > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n data-bs-slide=\"next\" *ngIf=\"getLength() > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")}.carousel-item{height:100%;transition:transform .6s ease-in-out,opacity .6s ease-in-out}.previous-icon{position:absolute;height:45px}.card-form{border-width:2px;border-style:solid;padding:16px}.carousel-inner{overflow:visible!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.carousel-parent,.carousel-caption{width:100%!important}}li{list-style:none}.heading-medium{font-weight:400!important}\n"] }]
6384
+ ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\" [simpoBorder]=\"style?.border\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\" [class.px-1]=\"screenWidth < 475\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row content-side w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div *ngFor=\"let text of data?.content?.inputText\">\r\n <div class=\"heading-large\" [simpoContentTitleSpace]=\"headingSpace\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n\r\n <div id=\"testimonialFullWidthCarousel\" class=\"carousel slide mb-1\" data-bs-ride=\"carousel\">\r\n <ol class=\"carousel-indicators\">\r\n <li *ngFor=\"let img of content?.listItem?.data; let i = index\" [class.active]=\"i === 0\"\r\n data-bs-target=\"#testimonialFullWidthCarousel\" [attr.data-bs-slide-to]=\"i\"></li>\r\n </ol>\r\n <div class=\"carousel-inner\" #carouselInner>\r\n <div class=\"carousel-item\" *ngFor=\"let testimonial of content?.listItem?.data; let i = index\"\r\n [class.active]=\"i === 0\" data-bs-interval=\"10000\" #carouselItem>\r\n <div style=\"width: max-content; margin: auto; max-width: 90%;\" class=\"carousel-parent\"\r\n [class.card-form]=\"content?.display?.showCard\" [simpoCorner]=\"style?.corners\"\r\n [style.borderColor]=\"content?.display?.showCard ? style?.background?.accentColor : 'none'\"\r\n [style.background]=\"content?.display?.showCard ? getColor(style?.background?.accentColor) : 'transparent'\">\r\n <div class=\"carousel-caption d-flex flex-column h-100 bottom-0\" style=\"width: 90%;\" [id]=\"data?.id\"\r\n [simpoColor]=\"style?.background?.color\" [simpoContainerLayout]=\"style?.layout\">\r\n <ng-container *ngIf=\"content?.display?.showImage\">\r\n <img loading=\"lazy\" [src]=\"testimonial?.image?.url\" class=\"mb-1\" loading=\"lazy\"\r\n [simpoContainerLayout]=\"getLayout\" [appImageEditor]=\"edit || false\"\r\n [imageData]=\"testimonial.image\" [sectionId]=\"data?.id\">\r\n </ng-container>\r\n <simpo-text-editor [(value)]=\"testimonial.inputText[0].value\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <ng-container *ngIf=\"testimonial?.inputText?.[1] as textItem\">\r\n <div class=\"d-flex\">\r\n <simpo-text-editor [(value)]=\"textItem.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <a class=\"carousel-control-prev\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n data-bs-slide=\"prev\" *ngIf=\"getLength() > 1\">\r\n <span class=\"carousel-control-prev-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Previous</span>\r\n </a>\r\n <a class=\"carousel-control-next\" data-bs-target=\"#testimonialFullWidthCarousel\" role=\"button\"\r\n data-bs-slide=\"next\" *ngIf=\"getLength() > 1\">\r\n <span class=\"carousel-control-next-icon previous-icon\" aria-hidden=\"true\"></span>\r\n <span class=\"sr-only\">Next</span>\r\n </a>\r\n </div>\r\n\r\n\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".total-container{position:relative}.carousel-caption{padding:0!important;left:0%!important;right:0%!important;text-align:unset!important;position:relative!important}.carousel-caption img{width:100px;height:100px;border-radius:50%}.heading-large{margin-left:5%;margin-right:5%}.mb-1{margin-bottom:1.5rem!important}.carousel-indicators .active{width:30px;height:3px;margin:1px}.carousel-indicators{bottom:-30px!important}.carousel-control-prev,.carousel-control-next{width:5%!important}.carousel-control-prev-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e\")}.carousel-control-next-icon{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23666'%3e %3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e\")}.carousel-item{height:100%;transition:transform .6s ease-in-out,opacity .6s ease-in-out}.previous-icon{position:absolute;height:45px}.card-form{border-width:2px;border-style:solid;padding:16px}.carousel-inner{overflow:visible!important}.hover_effect{position:unset;width:100%;top:0;left:0;height:100%}@media screen and (min-width: 760px){.cards{padding-bottom:24px}}@media screen and (max-width: 475px){.carousel-parent,.carousel-caption{width:100%!important}}li{list-style:none}.heading-medium{font-weight:400!important}\n"] }]
6355
6385
  }], ctorParameters: () => [{ type: EventsService }, { type: i0.Renderer2 }], propDecorators: { data: [{
6356
6386
  type: Input
6357
6387
  }], index: [{
@@ -10187,7 +10217,7 @@ class PricingS1Component extends BaseSection {
10187
10217
  }
10188
10218
  }
10189
10219
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingS1Component, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
10190
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingS1Component, isStandalone: true, selector: "simpo-pricing-s1", inputs: { data: "data", edit: "edit" }, usesInheritance: true, ngImport: i0, template: "<section>\r\n <div class=\"pricing-options row w-100\">\r\n <div\r\n [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data\"\r\n [attr.class]=\"getClass() + ' position-relative individual-options mb-2'\"\r\n [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true}\"\r\n [ngStyle]=\"{'border': options?.highlight?.highlighted ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\r\n <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\r\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\r\n *ngIf=\"options?.highlight?.highlighted === true\">\r\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div>\r\n <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"options.image.position\" [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \"\r\n alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc mb-3\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\"\r\n fill=\"#4C63D9\" />\r\n </svg> -->\r\n </div>\r\n <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\r\n <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\r\n <button class=\"custom-btn d-flex gap-1\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\"\r\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\r\n <div>{{options?.button?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\r\n 'mask-image': 'url(' + options?.button?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: [".pricing-options{justify-content:center;gap:15px}.individual-options{border:1px solid #80808057}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:0;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.col-4{width:100%!important}}.col-4{width:30%!important}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }] }); }
10220
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingS1Component, isStandalone: true, selector: "simpo-pricing-s1", inputs: { data: "data", edit: "edit" }, usesInheritance: true, ngImport: i0, template: "<section class=\"d-flex justify-content-center\">\r\n <div class=\"pricing-options row w-100\">\r\n <div\r\n [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data\"\r\n [attr.class]=\"getClass() + ' position-relative individual-options mb-2'\"\r\n [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true}\"\r\n [ngStyle]=\"{'border': options?.highlight?.highlighted ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\r\n <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\r\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\r\n *ngIf=\"options?.highlight?.highlighted === true\">\r\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div>\r\n <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"options.image.position\" [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \"\r\n alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc mb-3\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\"\r\n fill=\"#4C63D9\" />\r\n </svg> -->\r\n </div>\r\n <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\r\n <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\r\n <button class=\"custom-btn d-flex gap-1\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\"\r\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\r\n <div>{{options?.button?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\r\n 'mask-image': 'url(' + options?.button?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: [".pricing-options{justify-content:center;gap:15px}.individual-options{border:1px solid #80808057}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:0;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.popular-tag{max-width:60%}.individual-options{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.col-4{width:100%!important}}.col-4{width:30%!important}\n"], dependencies: [{ kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "directive", type: TranslateOnhoverDirective, selector: "[simpoTranslateOnhover]", inputs: ["simpoTranslateOnhover"] }] }); }
10191
10221
  }
10192
10222
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingS1Component, decorators: [{
10193
10223
  type: Component,
@@ -10203,7 +10233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
10203
10233
  SimpoButtonComponent,
10204
10234
  ButtonEditorDirective,
10205
10235
  TranslateOnhoverDirective
10206
- ], template: "<section>\r\n <div class=\"pricing-options row w-100\">\r\n <div\r\n [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data\"\r\n [attr.class]=\"getClass() + ' position-relative individual-options mb-2'\"\r\n [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true}\"\r\n [ngStyle]=\"{'border': options?.highlight?.highlighted ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\r\n <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\r\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\r\n *ngIf=\"options?.highlight?.highlighted === true\">\r\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div>\r\n <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"options.image.position\" [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \"\r\n alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc mb-3\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\"\r\n fill=\"#4C63D9\" />\r\n </svg> -->\r\n </div>\r\n <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\r\n <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\r\n <button class=\"custom-btn d-flex gap-1\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\"\r\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\r\n <div>{{options?.button?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\r\n 'mask-image': 'url(' + options?.button?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: [".pricing-options{justify-content:center;gap:15px}.individual-options{border:1px solid #80808057}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:0;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.col-4{width:100%!important}}.col-4{width:30%!important}\n"] }]
10236
+ ], template: "<section class=\"d-flex justify-content-center\">\r\n <div class=\"pricing-options row w-100\">\r\n <div\r\n [id]=\"data?.id\" [simpoCorner]=\"style?.corners\"\r\n [simpoTranslateOnhover]=\"content?.display?.showHoverEffect\" *ngFor=\"let options of content?.listItem?.data\"\r\n [attr.class]=\"getClass() + ' position-relative individual-options mb-2'\"\r\n [ngClass]=\"{'highlighted-option': options?.highlight?.highlighted === true}\"\r\n [ngStyle]=\"{'border': options?.highlight?.highlighted ? '3px solid ' + data?.styles?.background?.accentColor : ''}\">\r\n <div class=\"popular-tag\" [simpoCorner]=\"style?.corners\"\r\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\"\r\n *ngIf=\"options?.highlight?.highlighted === true\">\r\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div>\r\n <img loading=\"lazy\" class=\"logo-img\" *ngIf=\"content?.display?.showImage === true\" [id]=\"data?.id\"\r\n [simpoObjectPosition]=\"options.image.position\" [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \"\r\n alt=\"\" loading=\"lazy\" [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc mb-3\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <div class=\"d-flex align-items-center\">\r\n <!-- <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\r\n <rect width=\"24\" height=\"24\" rx=\"12\" fill=\"#EEF0FC\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M17.0965 7.39004L9.9365 14.3L8.0365 12.27C7.6865 11.94 7.1365 11.92 6.7365 12.2C6.3465 12.49 6.2365 13 6.4765 13.41L8.7265 17.07C8.9465 17.41 9.3265 17.62 9.7565 17.62C10.1665 17.62 10.5565 17.41 10.7765 17.07C11.1365 16.6 18.0065 8.41004 18.0065 8.41004C18.9065 7.49004 17.8165 6.68004 17.0965 7.38004V7.39004Z\"\r\n fill=\"#4C63D9\" />\r\n </svg> -->\r\n </div>\r\n <simpo-text-editor [(value)]=\"content.content\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn mt-4 p-0 border-0\" *ngIf=\"content?.display?.showButton === true\">\r\n <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\">{{options?.button?.label}}</button> -->\r\n <button class=\"custom-btn d-flex gap-1\" [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\"\r\n simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\"\r\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\r\n <div>{{options?.button?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon\" [ngStyle]=\"{\r\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\r\n 'mask-image': 'url(' + options?.button?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\"></div>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n</section>", styles: [".pricing-options{justify-content:center;gap:15px}.individual-options{border:1px solid #80808057}.highlighted-option{box-shadow:0 0 10px #0000004d}.logo-img{width:85px;height:85px;margin-top:1rem}.img_icon{width:25px;height:25px}.button{font-size:17px!important;padding:.75rem 0}.custom-btn{padding:6px;font-size:16px!important;font-weight:600}.popular-tag{position:absolute;top:0;right:-2px;padding:1px 20px 3px;border-top-left-radius:0!important;border-bottom-right-radius:0!important}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.popular-tag{max-width:60%}.individual-options{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.col-4{width:100%!important}}.col-4{width:30%!important}\n"] }]
10207
10237
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
10208
10238
  type: Input
10209
10239
  }], edit: [{
@@ -10266,8 +10296,20 @@ class PricingSectionComponent extends BaseSection {
10266
10296
  return 'col-3';
10267
10297
  }
10268
10298
  }
10299
+ getAlignment() {
10300
+ switch (this.style?.layout?.align) {
10301
+ case 'left':
10302
+ return 'justify-content-start';
10303
+ case 'right':
10304
+ return 'justify-content-end';
10305
+ case 'center':
10306
+ return 'justify-content-center';
10307
+ default:
10308
+ return 'justify-content-start';
10309
+ }
10310
+ }
10269
10311
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingSectionComponent, deps: [{ token: EventsService }], target: i0.ɵɵFactoryTarget.Component }); }
10270
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingSectionComponent, isStandalone: true, selector: "simpo-pricing-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n </div>\r\n <div class=\"pricing-options row\" *ngIf=\"style?.pricingStyle =='STYLE1'\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\"\r\n [attr.class]=\"getClass() + ' position-relative'\">\r\n <img loading=\"lazy\" class=\"image w-100\" *ngIf=\"content?.display?.showImage === true\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" loading=\"lazy\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"highlight-label\" *ngIf=\"options?.highlight?.highlighted === true\"\r\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [simpoColor]=\"getTextColor()\"\r\n [simpoCorner]=\"style?.corners\">\r\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n\r\n <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\" (click)=\"redirectTo()\">{{options?.button?.label}}</button> -->\r\n <button [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n class=\"d-flex gap-1 align-items-center justify-content-center\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\"\r\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\r\n <div>{{options?.button?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon \" [ngStyle]=\"{\r\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\r\n 'mask-image': 'url(' + options?.button?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <mat-icon>check</mat-icon><simpo-text-editor [(value)]=\"content.content\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- {{content.content}} -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"style?.pricingStyle =='STYLE2'\">\r\n <simpo-pricing-s1 [data]=\"data\" [edit]=\"edit\"></simpo-pricing-s1>\r\n </div>\r\n <div *ngFor=\"let button of data?.action?.buttons\" class=\"mt-3\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center!important}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;padding-top:7rem;height:auto;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{right:-2px;padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;position:absolute;top:0;border-top-left-radius:0!important;border-bottom-right-radius:0!important}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}.pricing-package{margin-top:10px;width:90%;margin-bottom:10px}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: PricingS1Component, selector: "simpo-pricing-s1", inputs: ["data", "edit"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
10312
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PricingSectionComponent, isStandalone: true, selector: "simpo-pricing-section", inputs: { data: "data", index: "index", edit: "edit", customClass: "customClass", delete: "delete", nextComponentColor: "nextComponentColor" }, usesInheritance: true, ngImport: i0, template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n </div>\r\n <div class=\"pricing-options row\" *ngIf=\"style?.pricingStyle =='STYLE1'\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\"\r\n [attr.class]=\"getClass() + ' position-relative'\">\r\n <img loading=\"lazy\" class=\"image w-100\" *ngIf=\"content?.display?.showImage === true\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" loading=\"lazy\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"highlight-label\" *ngIf=\"options?.highlight?.highlighted === true\"\r\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [simpoColor]=\"getTextColor()\"\r\n [simpoCorner]=\"style?.corners\">\r\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n\r\n <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\" (click)=\"redirectTo()\">{{options?.button?.label}}</button> -->\r\n <button [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n class=\"d-flex gap-1 align-items-center justify-content-center\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\"\r\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\r\n <div>{{options?.button?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon \" [ngStyle]=\"{\r\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\r\n 'mask-image': 'url(' + options?.button?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <mat-icon>check</mat-icon><simpo-text-editor [(value)]=\"content.content\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- {{content.content}} -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"style?.pricingStyle =='STYLE2'\">\r\n <simpo-pricing-s1 [data]=\"data\" [edit]=\"edit\"></simpo-pricing-s1>\r\n </div>\r\n <div [attr.class]=\"getAlignment() + ' mt-3 w-100 d-flex gap-2'\" *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center!important}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;padding-top:7rem;height:auto;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{right:-2px;padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;position:absolute;top:0;border-top-left-radius:0!important;border-bottom-right-radius:0!important}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}.pricing-package{margin-top:10px;width:90%;margin-bottom:10px}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: OverlayDirective, selector: "[simpoOverlay]", inputs: ["simpoOverlay"] }, { kind: "directive", type: BorderDirective, selector: "[simpoBorder]", inputs: ["simpoBorder"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: ObjectPositionDirective, selector: "[simpoObjectPosition]", inputs: ["simpoObjectPosition"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "component", type: SimpoButtonComponent, selector: "app-button-element", inputs: ["buttonContent", "buttonStyle", "buttonId", "color", "sectionId", "edit", "backgroundInfo"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { kind: "directive", type: ContentTitleDirective, selector: "[simpoContentTitleSpace]", inputs: ["simpoContentTitleSpace"] }, { kind: "component", type: SvgDividerComponent, selector: "simpo-svg-divider", inputs: ["dividerType", "color"] }, { kind: "directive", type: ImageEditorDirective, selector: "[appImageEditor]", inputs: ["appImageEditor", "imageData", "sectionId", "showIcon", "iconData"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: PricingS1Component, selector: "simpo-pricing-s1", inputs: ["data", "edit"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }] }); }
10271
10313
  }
10272
10314
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PricingSectionComponent, decorators: [{
10273
10315
  type: Component,
@@ -10293,7 +10335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
10293
10335
  ImageEditorDirective, SpacingHorizontalDirective,
10294
10336
  PricingS1Component,
10295
10337
  ButtonEditorDirective
10296
- ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n </div>\r\n <div class=\"pricing-options row\" *ngIf=\"style?.pricingStyle =='STYLE1'\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\"\r\n [attr.class]=\"getClass() + ' position-relative'\">\r\n <img loading=\"lazy\" class=\"image w-100\" *ngIf=\"content?.display?.showImage === true\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" loading=\"lazy\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"highlight-label\" *ngIf=\"options?.highlight?.highlighted === true\"\r\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [simpoColor]=\"getTextColor()\"\r\n [simpoCorner]=\"style?.corners\">\r\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n\r\n <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\" (click)=\"redirectTo()\">{{options?.button?.label}}</button> -->\r\n <button [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n class=\"d-flex gap-1 align-items-center justify-content-center\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\"\r\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\r\n <div>{{options?.button?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon \" [ngStyle]=\"{\r\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\r\n 'mask-image': 'url(' + options?.button?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <mat-icon>check</mat-icon><simpo-text-editor [(value)]=\"content.content\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- {{content.content}} -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"style?.pricingStyle =='STYLE2'\">\r\n <simpo-pricing-s1 [data]=\"data\" [edit]=\"edit\"></simpo-pricing-s1>\r\n </div>\r\n <div *ngFor=\"let button of data?.action?.buttons\" class=\"mt-3\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center!important}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;padding-top:7rem;height:auto;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{right:-2px;padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;position:absolute;top:0;border-top-left-radius:0!important;border-bottom-right-radius:0!important}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}.pricing-package{margin-top:10px;width:90%;margin-bottom:10px}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"] }]
10338
+ ], template: "<section [id]=\"data?.id\" [simpoBackground]=\"style?.background\" simpoHover (hovering)=\"showEditTabs($event)\"\r\n class=\"total-container\" [attr.style]=\"customClass\">\r\n <div #mainContainer [id]=\"data?.id\" [simpoOverlay]=\"style?.background\" [spacingHorizontal]=\"stylesLayout\">\r\n <div class=\"container-fluid\" [id]=\"data?.id\" [simpoBorder]=\"style?.border\" [simpoLayout]=\"style?.layout\">\r\n <div class=\"row w-100\" [id]=\"data?.id\" [simpoAnimation]=\"style?.animation\">\r\n <div [simpoContentTitleSpace]=\"headingSpace\">\r\n <ng-container *ngFor=\"let text of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"text.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <!-- <div class=\"heading-large content-side\" [simpoContentTitleSpace]=\"headingSpace\" [innerHTML]=\"text.value | sanitizeHtml\"></div> -->\r\n </div>\r\n <div class=\"pricing-options row\" *ngIf=\"style?.pricingStyle =='STYLE1'\">\r\n <div [id]=\"data?.id\" [simpoCorner]=\"style?.corners\" *ngFor=\"let options of content?.listItem?.data\"\r\n [ngStyle]=\"{'border': options?.highlight?.highlighted === true ? '3px solid ' + data?.styles?.background?.accentColor : ''}\"\r\n [attr.class]=\"getClass() + ' position-relative'\">\r\n <img loading=\"lazy\" class=\"image w-100\" *ngIf=\"content?.display?.showImage === true\"\r\n [simpoImageDirective]=\"style?.image\" [id]=\"data?.id\" [simpoObjectPosition]=\"options.image.position\"\r\n [simpoCorner]=\"style?.corners\" [src]=\"options.image.url \" alt=\"\" loading=\"lazy\"\r\n [appImageEditor]=\"edit || false\" [imageData]=\"options?.image\" [sectionId]=\"data?.id\"\r\n [class]=\"data?.id+(options?.image?.id || '')\">\r\n <div class=\"highlight-label\" *ngIf=\"options?.highlight?.highlighted === true\"\r\n [ngStyle]=\"{'background-color': data?.styles?.background?.accentColor}\" [simpoColor]=\"getTextColor()\"\r\n [simpoCorner]=\"style?.corners\">\r\n <simpo-text-editor [(value)]=\"options.highlight.label\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-small\">\r\n <simpo-text-editor [(value)]=\"options.inputText[0].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"heading-large price\">\r\n <simpo-text-editor [(value)]=\"options.inputText[2].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc\">\r\n <simpo-text-editor [(value)]=\"options.inputText[3].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n\r\n <div class=\"btn\" *ngIf=\"content?.display?.showButton === true\">\r\n <!-- <button class=\"button\" simpoButtonDirective [id]=\"data?.id+(button?.id || '')\" [buttonStyle]=\"button?.styles\" [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"style?.background\" (click)=\"redirectTo()\">{{options?.button?.label}}</button> -->\r\n <button [buttonData]=\"options?.button\" [buttonStyle]=\"button?.styles\" simpoButtonDirective\r\n [id]=\"data?.id+(button?.id || '')\" [sectionId]=\"data?.id\"\r\n class=\"d-flex gap-1 align-items-center justify-content-center\"\r\n [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"data?.styles?.background\"\r\n [appButtonEditor]=\"edit ?? false\" [buttonId]=\"getButtonId()\" (click)=\"redirectTo()\"\r\n [class.flex-row-reverse]=\"options?.button?.icon?.iconPosition === 'left'\">\r\n <div>{{options?.button?.label}}</div>\r\n <div class=\"btn-icon\" *ngIf=\"options?.button?.showIcon \" [ngStyle]=\"{\r\n 'background': button?.styles?.type == 'Text' ? button?.styles?.background : button?.styles?.textColor,\r\n 'mask-image': 'url(' + options?.button?.icon?.url + ')',\r\n 'mask-repeat': 'no-repeat',\r\n 'mask-size': 'cover',\r\n 'width': '25px',\r\n 'height': '25px',\r\n }\">\r\n </div>\r\n </button>\r\n </div>\r\n <div class=\"body-desc description\" *ngIf=\"content?.display?.showContent === true\">\r\n <simpo-text-editor [(value)]=\"options.inputText[1].value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"body-desc content-options\" *ngIf=\"content?.display?.showIncludeditems\">\r\n <div class=\"d-flex gap-15\" *ngFor=\"let content of options.additionalData\">\r\n <mat-icon>check</mat-icon><simpo-text-editor [(value)]=\"content.content\"\r\n [editable]=\"edit || false\"></simpo-text-editor>\r\n <!-- {{content.content}} -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"style?.pricingStyle =='STYLE2'\">\r\n <simpo-pricing-s1 [data]=\"data\" [edit]=\"edit\"></simpo-pricing-s1>\r\n </div>\r\n <div [attr.class]=\"getAlignment() + ' mt-3 w-100 d-flex gap-2'\" *ngIf=\"data?.action?.display\">\r\n <div *ngFor=\"let button of data?.action?.buttons\">\r\n <app-button-element [buttonContent]=\"button.content\" [buttonStyle]=\"button.styles\" [buttonId]=\"button.id\"\r\n [sectionId]=\"data?.id\" [color]=\"data?.styles?.background?.accentColor\" [edit]=\"edit\"\r\n [backgroundInfo]=\"data?.styles?.background\"></app-button-element>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-container *ngIf=\"style?.devider?.display\">\r\n <simpo-svg-divider [dividerType]=\"style?.devider?.deviderType\"\r\n [color]=\"nextComponentColor?.color\"></simpo-svg-divider>\r\n </ng-container>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</section>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.total-container{position:relative;height:auto}.container-fluid{height:auto;padding:6rem 3rem}.pricing-options{width:100%;justify-content:center!important}.individual-options{border:1.5px solid;display:flex;flex-direction:column;align-items:center;padding:30px 10px;margin-top:6rem;margin-bottom:3rem;width:25%}.individual-options-3{width:32%}.individual-options-3 .btn{width:95%}.btn{width:97%;border:none;box-shadow:none}.individual-options-2{width:40%}.individual-options-1{width:75%}.individual-options-1 .btn{width:95%}.highlighted-option{margin-top:1rem;margin-bottom:0rem;padding-top:7rem;height:auto;border:3px solid}.highlighted-option .heading-small{padding-top:5px}.heading-small{padding:15px 5px;text-align:left;font-size:24px;width:94%}.price,.body-desc{text-align:left;width:89%}.description{line-height:30px;padding-top:11px}.content-options{padding-top:20px}.gap-15{gap:15px;padding:.75rem 0}.highlight-label{right:-2px;padding:5px 17px;display:flex;align-items:flex-start;flex-direction:column;width:auto;position:absolute;top:0;border-top-left-radius:0!important;border-bottom-right-radius:0!important}.button{margin-top:2rem;margin-bottom:.25rem;font-size:17px!important;padding:.75rem 0}.pricing-package{margin-top:10px;width:90%;margin-bottom:10px}@media only screen and (max-width: 475px){.pricing-options{flex-direction:column}.individual-options,.highlighted-option{width:100%;margin-top:1rem;margin-bottom:1rem;padding:2rem}.button{white-space:nowrap!important;margin-top:2.5rem;margin-bottom:2rem}.btn{width:106%}.highlight-label{margin-left:4px}.price{margin-top:10px;width:97%}.body-desc{width:97%}:is(.individual-options-1,.individual-options-2,.individual-options-3) .btn{width:100%}.image{width:100%!important}.heading-small{width:100%}.content-options{padding-top:10px}}\n"] }]
10297
10339
  }], ctorParameters: () => [{ type: EventsService }], propDecorators: { data: [{
10298
10340
  type: Input
10299
10341
  }], index: [{
@@ -15159,7 +15201,7 @@ class SchemeDetailComponent {
15159
15201
  if (params['termsAndCondition'])
15160
15202
  this.scrollToTermsAndCondition = true;
15161
15203
  });
15162
- // this.getSchemeDetails("84a8304f-84c5-11f0-b0bd-efe6a9626b92")
15204
+ // this.getSchemeDetails("9eb57ba2-9083-11f0-98fe-47a63c58fddd")
15163
15205
  }
15164
15206
  getKeys(obj) {
15165
15207
  return Object.keys(obj ?? {});
@@ -15186,7 +15228,7 @@ class SchemeDetailComponent {
15186
15228
  this.restService.getAllStaffList().subscribe({
15187
15229
  next: (res) => {
15188
15230
  this.staffMembers = res?.data?.data ? res?.data?.data : [];
15189
- console.log(this.staffMembers);
15231
+ // console.log(this.staffMembers)
15190
15232
  },
15191
15233
  error: (err) => {
15192
15234
  console.log(err);
@@ -15226,7 +15268,7 @@ class SchemeDetailComponent {
15226
15268
  if (res && res.data) {
15227
15269
  this.getStaffList();
15228
15270
  this.schemeDetails = res.data;
15229
- console.log(this.schemeDetails);
15271
+ // console.log(this.schemeDetails)
15230
15272
  this.minAmount = this.schemeDetails?.minInstallmentValue;
15231
15273
  this.maxAmount = this.schemeDetails?.maxInstallmentValue;
15232
15274
  this.monthlyAmount = this.minAmount;
@@ -15234,6 +15276,7 @@ class SchemeDetailComponent {
15234
15276
  this.maturityCount = this.schemeDetails?.maturityCount ? this.schemeDetails.maturityCount : this.maturityCount;
15235
15277
  this.stores = this.schemeDetails?.storeList ? this.schemeDetails.storeList : [];
15236
15278
  this.getMetalPrice();
15279
+ this.onAmountChange();
15237
15280
  this.faqList = this.schemeDetails?.faqs ? this.schemeDetails?.faqs : [];
15238
15281
  this.faqList.forEach(faq => faq.showAnswer = false);
15239
15282
  if (this.scrollToTermsAndCondition)
@@ -15345,11 +15388,11 @@ class SchemeDetailComponent {
15345
15388
  }
15346
15389
  }
15347
15390
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailComponent, deps: [{ token: i2$2.ActivatedRoute }, { token: RestService }, { token: StorageServiceService }, { token: i1$1.MatDialog }, { token: i2$2.Router }, { token: EventsService }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
15348
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailComponent, isStandalone: true, selector: "simpo-scheme-detail", inputs: { data: "data", index: "index", edit: "edit" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MatDialog, MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n\r\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"plan_desc_section\">\r\n <ng-container *ngTemplateOutlet=\"planDescTemplate\"></ng-container>\r\n </div>\r\n <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\r\n </div>\r\n <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\r\n </div>\r\n <div class=\"redeem_ans_section\" *ngIf=\"schemeDetails?.redeemDesc.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"redeemInfoSection\"></ng-container>\r\n </div>\r\n <div class=\"scheme_work_section\" *ngIf=\"schemeDetails?.schemeWorkingDesc != {} && schemeDetails\">\r\n <ng-container *ngTemplateOutlet=\"schemeWorkSection\"></ng-container>\r\n </div>\r\n <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\r\n </div>\r\n <div class=\"terms_condition_section p-5\"\r\n *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\r\n <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\r\n </div>\r\n</section>\r\n<ng-template #redeemInfoSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How to redeem?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"redeem_info_section\" *ngIf=\"schemeDetails?.redeemDesc\">\r\n {{schemeDetails?.redeemDesc || 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #schemeWorkSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How Does this plan work?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"ans_section\" *ngFor=\"let faq of getKeys(schemeDetails?.schemeWorkingDesc);let i =index\">\r\n <div class=\"d-flex align-items-start gap-3 f-16\">\r\n <span>{{faq}}</span>\r\n <span>{{ schemeDetails?.schemeWorkingDesc?.[faq]?.replaceAll('\\n',' ') || 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #planDescTemplate>\r\n <div class=\"hero-section d-flex align-items-center\">\r\n <div class=\"container\">\r\n <div class=\"row align-items-center g-5\">\r\n <div\r\n [ngClass]=\"{'col-md-6': schemeDetails?.imgUrls[0], 'col-12 d-flex align-items-center justify-content-center': !schemeDetails?.imgUrls[0]}\">\r\n <div class=\"hero-content\">\r\n <h1 class=\"hero-title mb-4 d-flex justify-content-center align-items-center\">\r\n <span class=\"title-highlight\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :'N/A'}}</span>\r\n </h1>\r\n <p class=\"hero-description mb-4\">\r\n {{schemeDetails?.desc ? schemeDetails?.desc :'N/A'}}\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\" *ngIf=\"schemeDetails?.imgUrls[0]\">\r\n <div class=\"hero-image\">\r\n <img [src]=\"schemeDetails?.imgUrls ? schemeDetails?.imgUrls[0] :'N/A'\" alt=\"Pearl Jewelry\"\r\n class=\"jewellery-img w-100\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #aboutUsTemplate>\r\n <div class=\"d-flex flex-column gap-3\">\r\n <div class=\"text_header d-flex align-items-center justify-content-center\">\r\n <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"desc_text\">\r\n {{schemeDetails?.about}}\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #schemeCalculator>\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\r\n <span>Calculate Your Returns</span>\r\n <div class=\"calc_desc\">\r\n See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\r\n your potential returns.\r\n </div>\r\n </div>\r\n <div class=\"calculator_section\">\r\n <div class=\"gold-purity\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '18_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '24_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '22_k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\">\r\n <div class=\"slider-container position-relative\">\r\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"schemeDetails?.valueStep\" class=\"w-100 pale-slider\"\r\n [style.--mdc-slider-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-focus-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-hover-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-active-track-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-ripple-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-value-indicator-color]=\"data?.styles?.background?.accentColor\">\r\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n </mat-slider>\r\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\"> -->\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\r\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\r\n \u20B9 {{option?.value}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <div class=\"row align-items-center justify-content-between mb-3 g-2\">\r\n <!-- Contribution Card -->\r\n <div class=\"col-12 col-sm-6\"\r\n [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Plus Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">+</div>\r\n </div>\r\n\r\n <!-- Benefit Card -->\r\n <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{benefitAmount | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Scheme Benefit\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Equals Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">=</div>\r\n </div>\r\n\r\n <!-- Total Card -->\r\n <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5 text-white\">\r\n <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\r\n \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\r\n </span>\r\n <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </span>\r\n </div>\r\n <div class=\"text-white-50 small\">\r\n Total Redemption Value\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n {{purchasedGram}} gms\r\n </div>\r\n <div class=\"text-muted small\">\r\n Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"terms-and-condition\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\r\n Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\r\n <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n<ng-template #faqTemplate>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">Frequently Asked Questions</h1>\r\n <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\r\n <div class=\"faq-question\">\r\n <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\r\n <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\r\n <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #termsAndConditions>\r\n <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\r\n <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\r\n <h1 class=\"terms-title\">Terms and Conditions</h1>\r\n\r\n <div class=\"terms-content\">\r\n <div class=\"term-item d-flex align-items-center\"\r\n *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\r\n <div class=\"terms_count\">\r\n <h3 class=\"term-heading\">{{ key }}.</h3>\r\n </div>\r\n <div>\r\n <p class=\"term-text mb-0\">\r\n {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"important-note\">\r\n <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\r\n Participants will be notified of any changes via registered email or SMS. Continued\r\n participation after notification constitutes acceptance of revised terms.</p>\r\n </div> -->\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:17px;padding:0% 20%;line-height:1.5rem;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_options{padding:0% 1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.enroll-btn{font-size:16px;border:1px solid}.faq-container{border-radius:16px;padding:40px 0;width:65vw}.faq-title{font-size:2.5rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px;width:80%}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{width:65vw}.terms-title{font-size:2.2rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;padding:20px;border-radius:16px;width:80%}.term-item{padding-bottom:8px;border-bottom:1px solid #e2e8f0;gap:10px}.term-heading{margin:0!important}.term-item:last-of-type{border-bottom:none;padding-bottom:unset}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.payment-row .label{color:#000!important;font-size:16px}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.payment-row:last-child{margin-bottom:0}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}@media (min-width :320px) and (max-width : 480px){.calc_desc,.desc_text{padding:0%}.random_options{margin-top:1rem}.hero-section{max-height:unset!important}.hero-section .container{padding:0!important}.p-5{padding:2% 0%!important}.sub-header{margin:.5rem 0px!important}.calculator_section{width:100%}.gold-purity{flex-wrap:wrap}.option{font-size:13px;white-space:nowrap}}@media (max-width: 768px){.terms-section{width:100%}.terms-container{padding:30px 0;width:100%}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px;width:100%}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}.faq-container,.faq-section,.faq-list{width:100%}}@media (min-width:475px){.terms-section{padding:0%!important}.card-container{width:31%;height:13vh;align-items:center}.calc_amount{font-size:1.5rem}}.bonus-message{flex-direction:column!important}.bonus-message :is(.staff-selector,.store_selection){width:100%!important}.redeem_info_section{text-align:center}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}.terms-and-condition :is(.store-selector,.form-select){min-width:unset!important}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}.f-16{font-size:16px}a:hover{color:#0a58ca!important}.ans_section{border:none}.hero-section{max-height:75vh;padding:3% 0%}.hero-title{font-size:4rem;font-weight:900;line-height:1.1;color:#2c3e50}.title-highlight{background:linear-gradient(135deg,#d4a574,#e8c5a0,#f4d2a7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.hero-description{font-size:1.1rem;color:#666;line-height:1.6;text-align:center}.price-highlight{color:#d4a574;font-weight:700}.jewellery-img{border-radius:20px;box-shadow:0 20px 40px #0000001a;object-fit:cover;height:500px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: i10$2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] }); }
15391
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailComponent, isStandalone: true, selector: "simpo-scheme-detail", inputs: { data: "data", index: "index", edit: "edit" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MatDialog, MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n\r\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"plan_desc_section\">\r\n <ng-container *ngTemplateOutlet=\"planDescTemplate\"></ng-container>\r\n </div>\r\n <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\r\n </div>\r\n <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\r\n </div>\r\n <div class=\"redeem_ans_section\" *ngIf=\"schemeDetails?.redeemDesc.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"redeemInfoSection\"></ng-container>\r\n </div>\r\n <div class=\"scheme_work_section\" *ngIf=\"schemeDetails?.schemeWorkingDesc != {} && schemeDetails\">\r\n <ng-container *ngTemplateOutlet=\"schemeWorkSection\"></ng-container>\r\n </div>\r\n <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\r\n </div>\r\n <div class=\"terms_condition_section p-5\"\r\n *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\r\n <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\r\n </div>\r\n</section>\r\n<ng-template #redeemInfoSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How to redeem?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"redeem_info_section\" *ngIf=\"schemeDetails?.redeemDesc\">\r\n {{schemeDetails?.redeemDesc || 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #schemeWorkSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How Does this plan work?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"ans_section\" *ngFor=\"let faq of getKeys(schemeDetails?.schemeWorkingDesc);let i =index\">\r\n <div class=\"d-flex align-items-start gap-3 f-16\">\r\n <span>{{faq}}</span>\r\n <span>{{ schemeDetails?.schemeWorkingDesc?.[faq]?.replaceAll('\\n',' ') || 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #planDescTemplate>\r\n <div class=\"hero-section d-flex align-items-center\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex align-items-center g-5 w-100\">\r\n <div\r\n [ngClass]=\"{'col-md-6': schemeDetails?.imgUrls[0], 'col-12 d-flex align-items-center justify-content-center': !schemeDetails?.imgUrls[0]}\">\r\n <div class=\"hero-content\">\r\n <h1 class=\"hero-title mb-4 d-flex align-items-center\"\r\n [ngClass]=\"{'justify-content-center':!schemeDetails?.imgUrls[0], 'justify-content-start':schemeDetails?.imgUrls[0]}\">\r\n <span class=\"title-highlight\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :'N/A'}}</span>\r\n </h1>\r\n <p class=\"hero-description mb-4\"\r\n [ngClass]=\"{'text-start':schemeDetails?.imgUrls[0],'text-center':!schemeDetails?.imgUrls[0]}\">\r\n {{schemeDetails?.desc ? schemeDetails?.desc :'N/A'}}\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\" *ngIf=\"schemeDetails?.imgUrls[0]\">\r\n <div class=\"hero-image\">\r\n <img [src]=\"schemeDetails?.imgUrls ? schemeDetails?.imgUrls[0] :'N/A'\" alt=\"Pearl Jewelry\"\r\n class=\"jewellery-img w-100\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #aboutUsTemplate>\r\n <div class=\"d-flex flex-column gap-3\">\r\n <div class=\"text_header d-flex align-items-center justify-content-center\">\r\n <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"desc_text\">\r\n {{schemeDetails?.about}}\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #schemeCalculator>\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\r\n <span>Calculate Your Returns</span>\r\n <div class=\"calc_desc\">\r\n See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\r\n your potential returns.\r\n </div>\r\n </div>\r\n <div class=\"calculator_section\">\r\n <div class=\"gold-purity\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '18_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '24_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '22_k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\">\r\n <div class=\"slider-container position-relative\">\r\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"schemeDetails?.valueStep\" class=\"w-100 pale-slider\"\r\n [style.--mdc-slider-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-focus-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-hover-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-active-track-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-ripple-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-value-indicator-color]=\"data?.styles?.background?.accentColor\">\r\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n </mat-slider>\r\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\"> -->\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\r\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\r\n \u20B9 {{option?.value}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <div class=\"row align-items-center justify-content-between mb-3 g-2\">\r\n <!-- Contribution Card -->\r\n <div class=\"col-12 col-sm-6\"\r\n [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Plus Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">+</div>\r\n </div>\r\n\r\n <!-- Benefit Card -->\r\n <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{benefitAmount | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Scheme Benefit\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Equals Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">=</div>\r\n </div>\r\n\r\n <!-- Total Card -->\r\n <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5 text-white\">\r\n <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\r\n \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\r\n </span>\r\n <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </span>\r\n </div>\r\n <div class=\"text-white-50 small\">\r\n Total Redemption Value\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n {{purchasedGram}} gms\r\n </div>\r\n <div class=\"text-muted small\">\r\n Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"terms-and-condition\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\r\n Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\r\n <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n<ng-template #faqTemplate>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">Frequently Asked Questions</h1>\r\n <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\r\n <div class=\"faq-question\">\r\n <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\r\n <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\r\n <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #termsAndConditions>\r\n <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\r\n <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\r\n <h1 class=\"terms-title\">Terms and Conditions</h1>\r\n\r\n <div class=\"terms-content\">\r\n <div class=\"term-item d-flex align-items-center\"\r\n *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\r\n <div class=\"terms_count\">\r\n <h3 class=\"term-heading\">{{ key }}.</h3>\r\n </div>\r\n <div>\r\n <p class=\"term-text mb-0\">\r\n {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"important-note\">\r\n <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\r\n Participants will be notified of any changes via registered email or SMS. Continued\r\n participation after notification constitutes acceptance of revised terms.</p>\r\n </div> -->\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:17px;padding:0% 20%;line-height:1.5rem;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_options{padding:0% 1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.enroll-btn{font-size:16px;border:1px solid}.faq-container{border-radius:16px;padding:40px 0;width:65vw}.faq-title{font-size:1.8rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px;width:80%}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{width:65vw}.terms-title{font-size:1.8rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;padding:20px;border-radius:16px;width:80%}.term-item{padding-bottom:8px;border-bottom:1px solid #e2e8f0;gap:10px}.term-heading{margin:0!important}.term-item:last-of-type{border-bottom:none;padding-bottom:unset}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.payment-row .label{color:#000!important;font-size:16px}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.payment-row:last-child{margin-bottom:0}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}@media (min-width :320px) and (max-width : 480px){.calc_desc,.desc_text{padding:0%}.random_options{margin-top:1rem}.hero-section{max-height:unset!important}.hero-section .container{padding:0!important}.p-5{padding:2% 0%!important}.sub-header{margin:.5rem 0px!important}.calculator_section{width:100%}.gold-purity{flex-wrap:wrap}.option{font-size:13px;white-space:nowrap}}@media (max-width: 768px){.terms-section{width:100%}.terms-container{padding:30px 0;width:100%}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px;width:100%}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}.faq-container,.faq-section,.faq-list{width:100%}}@media (min-width:475px){.terms-section{padding:0%!important}.card-container{width:31%;height:13vh;align-items:center}.calc_amount{font-size:1.5rem}}.bonus-message{flex-direction:column!important}.bonus-message :is(.staff-selector,.store_selection){width:100%!important}.redeem_info_section{text-align:center}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}.terms-and-condition :is(.store-selector,.form-select){min-width:unset!important}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}.f-16{font-size:16px}a:hover{color:#0a58ca!important}.ans_section{border:none}.plan_desc_section{padding:3% 0%}.hero-title{font-size:4rem;font-weight:900;line-height:1.1;color:#2c3e50}.title-highlight{background:linear-gradient(135deg,#d4a574,#e8c5a0,#f4d2a7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;text-align:center}.hero-description{font-size:1.1rem;color:#666;line-height:1.6}.price-highlight{color:#d4a574;font-weight:700}.jewellery-img{border-radius:20px;box-shadow:0 20px 40px #0000001a;object-fit:cover;height:500px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: i10$2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] }); }
15349
15392
  }
15350
15393
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailComponent, decorators: [{
15351
15394
  type: Component,
15352
- args: [{ selector: 'simpo-scheme-detail', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatDialogModule, SpacingHorizontalDirective, FormsModule, TextEditorComponent, MatIcon, ButtonEditorDirective, MatProgressSpinner, ButtonDirectiveDirective, ToastModule, MatSlider, MatSliderModule], providers: [MatDialog, MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n\r\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"plan_desc_section\">\r\n <ng-container *ngTemplateOutlet=\"planDescTemplate\"></ng-container>\r\n </div>\r\n <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\r\n </div>\r\n <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\r\n </div>\r\n <div class=\"redeem_ans_section\" *ngIf=\"schemeDetails?.redeemDesc.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"redeemInfoSection\"></ng-container>\r\n </div>\r\n <div class=\"scheme_work_section\" *ngIf=\"schemeDetails?.schemeWorkingDesc != {} && schemeDetails\">\r\n <ng-container *ngTemplateOutlet=\"schemeWorkSection\"></ng-container>\r\n </div>\r\n <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\r\n </div>\r\n <div class=\"terms_condition_section p-5\"\r\n *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\r\n <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\r\n </div>\r\n</section>\r\n<ng-template #redeemInfoSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How to redeem?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"redeem_info_section\" *ngIf=\"schemeDetails?.redeemDesc\">\r\n {{schemeDetails?.redeemDesc || 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #schemeWorkSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How Does this plan work?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"ans_section\" *ngFor=\"let faq of getKeys(schemeDetails?.schemeWorkingDesc);let i =index\">\r\n <div class=\"d-flex align-items-start gap-3 f-16\">\r\n <span>{{faq}}</span>\r\n <span>{{ schemeDetails?.schemeWorkingDesc?.[faq]?.replaceAll('\\n',' ') || 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #planDescTemplate>\r\n <div class=\"hero-section d-flex align-items-center\">\r\n <div class=\"container\">\r\n <div class=\"row align-items-center g-5\">\r\n <div\r\n [ngClass]=\"{'col-md-6': schemeDetails?.imgUrls[0], 'col-12 d-flex align-items-center justify-content-center': !schemeDetails?.imgUrls[0]}\">\r\n <div class=\"hero-content\">\r\n <h1 class=\"hero-title mb-4 d-flex justify-content-center align-items-center\">\r\n <span class=\"title-highlight\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :'N/A'}}</span>\r\n </h1>\r\n <p class=\"hero-description mb-4\">\r\n {{schemeDetails?.desc ? schemeDetails?.desc :'N/A'}}\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\" *ngIf=\"schemeDetails?.imgUrls[0]\">\r\n <div class=\"hero-image\">\r\n <img [src]=\"schemeDetails?.imgUrls ? schemeDetails?.imgUrls[0] :'N/A'\" alt=\"Pearl Jewelry\"\r\n class=\"jewellery-img w-100\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #aboutUsTemplate>\r\n <div class=\"d-flex flex-column gap-3\">\r\n <div class=\"text_header d-flex align-items-center justify-content-center\">\r\n <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"desc_text\">\r\n {{schemeDetails?.about}}\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #schemeCalculator>\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\r\n <span>Calculate Your Returns</span>\r\n <div class=\"calc_desc\">\r\n See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\r\n your potential returns.\r\n </div>\r\n </div>\r\n <div class=\"calculator_section\">\r\n <div class=\"gold-purity\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '18_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '24_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '22_k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\">\r\n <div class=\"slider-container position-relative\">\r\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"schemeDetails?.valueStep\" class=\"w-100 pale-slider\"\r\n [style.--mdc-slider-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-focus-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-hover-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-active-track-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-ripple-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-value-indicator-color]=\"data?.styles?.background?.accentColor\">\r\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n </mat-slider>\r\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\"> -->\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\r\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\r\n \u20B9 {{option?.value}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <div class=\"row align-items-center justify-content-between mb-3 g-2\">\r\n <!-- Contribution Card -->\r\n <div class=\"col-12 col-sm-6\"\r\n [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Plus Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">+</div>\r\n </div>\r\n\r\n <!-- Benefit Card -->\r\n <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{benefitAmount | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Scheme Benefit\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Equals Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">=</div>\r\n </div>\r\n\r\n <!-- Total Card -->\r\n <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5 text-white\">\r\n <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\r\n \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\r\n </span>\r\n <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </span>\r\n </div>\r\n <div class=\"text-white-50 small\">\r\n Total Redemption Value\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n {{purchasedGram}} gms\r\n </div>\r\n <div class=\"text-muted small\">\r\n Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"terms-and-condition\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\r\n Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\r\n <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n<ng-template #faqTemplate>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">Frequently Asked Questions</h1>\r\n <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\r\n <div class=\"faq-question\">\r\n <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\r\n <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\r\n <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #termsAndConditions>\r\n <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\r\n <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\r\n <h1 class=\"terms-title\">Terms and Conditions</h1>\r\n\r\n <div class=\"terms-content\">\r\n <div class=\"term-item d-flex align-items-center\"\r\n *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\r\n <div class=\"terms_count\">\r\n <h3 class=\"term-heading\">{{ key }}.</h3>\r\n </div>\r\n <div>\r\n <p class=\"term-text mb-0\">\r\n {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"important-note\">\r\n <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\r\n Participants will be notified of any changes via registered email or SMS. Continued\r\n participation after notification constitutes acceptance of revised terms.</p>\r\n </div> -->\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:17px;padding:0% 20%;line-height:1.5rem;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_options{padding:0% 1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.enroll-btn{font-size:16px;border:1px solid}.faq-container{border-radius:16px;padding:40px 0;width:65vw}.faq-title{font-size:2.5rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px;width:80%}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{width:65vw}.terms-title{font-size:2.2rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;padding:20px;border-radius:16px;width:80%}.term-item{padding-bottom:8px;border-bottom:1px solid #e2e8f0;gap:10px}.term-heading{margin:0!important}.term-item:last-of-type{border-bottom:none;padding-bottom:unset}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.payment-row .label{color:#000!important;font-size:16px}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.payment-row:last-child{margin-bottom:0}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}@media (min-width :320px) and (max-width : 480px){.calc_desc,.desc_text{padding:0%}.random_options{margin-top:1rem}.hero-section{max-height:unset!important}.hero-section .container{padding:0!important}.p-5{padding:2% 0%!important}.sub-header{margin:.5rem 0px!important}.calculator_section{width:100%}.gold-purity{flex-wrap:wrap}.option{font-size:13px;white-space:nowrap}}@media (max-width: 768px){.terms-section{width:100%}.terms-container{padding:30px 0;width:100%}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px;width:100%}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}.faq-container,.faq-section,.faq-list{width:100%}}@media (min-width:475px){.terms-section{padding:0%!important}.card-container{width:31%;height:13vh;align-items:center}.calc_amount{font-size:1.5rem}}.bonus-message{flex-direction:column!important}.bonus-message :is(.staff-selector,.store_selection){width:100%!important}.redeem_info_section{text-align:center}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}.terms-and-condition :is(.store-selector,.form-select){min-width:unset!important}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}.f-16{font-size:16px}a:hover{color:#0a58ca!important}.ans_section{border:none}.hero-section{max-height:75vh;padding:3% 0%}.hero-title{font-size:4rem;font-weight:900;line-height:1.1;color:#2c3e50}.title-highlight{background:linear-gradient(135deg,#d4a574,#e8c5a0,#f4d2a7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.hero-description{font-size:1.1rem;color:#666;line-height:1.6;text-align:center}.price-highlight{color:#d4a574;font-weight:700}.jewellery-img{border-radius:20px;box-shadow:0 20px 40px #0000001a;object-fit:cover;height:500px}\n"] }]
15395
+ args: [{ selector: 'simpo-scheme-detail', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatDialogModule, SpacingHorizontalDirective, FormsModule, TextEditorComponent, MatIcon, ButtonEditorDirective, MatProgressSpinner, ButtonDirectiveDirective, ToastModule, MatSlider, MatSliderModule], providers: [MatDialog, MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n\r\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\r\n <div class=\"plan_desc_section\">\r\n <ng-container *ngTemplateOutlet=\"planDescTemplate\"></ng-container>\r\n </div>\r\n <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\r\n </div>\r\n <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\r\n </div>\r\n <div class=\"redeem_ans_section\" *ngIf=\"schemeDetails?.redeemDesc.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"redeemInfoSection\"></ng-container>\r\n </div>\r\n <div class=\"scheme_work_section\" *ngIf=\"schemeDetails?.schemeWorkingDesc != {} && schemeDetails\">\r\n <ng-container *ngTemplateOutlet=\"schemeWorkSection\"></ng-container>\r\n </div>\r\n <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\r\n <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\r\n </div>\r\n <div class=\"terms_condition_section p-5\"\r\n *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\r\n <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\r\n </div>\r\n</section>\r\n<ng-template #redeemInfoSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How to redeem?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"redeem_info_section\" *ngIf=\"schemeDetails?.redeemDesc\">\r\n {{schemeDetails?.redeemDesc || 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #schemeWorkSection>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">How Does this plan work?</h1>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"ans_section\" *ngFor=\"let faq of getKeys(schemeDetails?.schemeWorkingDesc);let i =index\">\r\n <div class=\"d-flex align-items-start gap-3 f-16\">\r\n <span>{{faq}}</span>\r\n <span>{{ schemeDetails?.schemeWorkingDesc?.[faq]?.replaceAll('\\n',' ') || 'N/A' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #planDescTemplate>\r\n <div class=\"hero-section d-flex align-items-center\">\r\n <div class=\"d-flex w-100\">\r\n <div class=\"d-flex align-items-center g-5 w-100\">\r\n <div\r\n [ngClass]=\"{'col-md-6': schemeDetails?.imgUrls[0], 'col-12 d-flex align-items-center justify-content-center': !schemeDetails?.imgUrls[0]}\">\r\n <div class=\"hero-content\">\r\n <h1 class=\"hero-title mb-4 d-flex align-items-center\"\r\n [ngClass]=\"{'justify-content-center':!schemeDetails?.imgUrls[0], 'justify-content-start':schemeDetails?.imgUrls[0]}\">\r\n <span class=\"title-highlight\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :'N/A'}}</span>\r\n </h1>\r\n <p class=\"hero-description mb-4\"\r\n [ngClass]=\"{'text-start':schemeDetails?.imgUrls[0],'text-center':!schemeDetails?.imgUrls[0]}\">\r\n {{schemeDetails?.desc ? schemeDetails?.desc :'N/A'}}\r\n </p>\r\n </div>\r\n </div>\r\n <div class=\"col-lg-6\" *ngIf=\"schemeDetails?.imgUrls[0]\">\r\n <div class=\"hero-image\">\r\n <img [src]=\"schemeDetails?.imgUrls ? schemeDetails?.imgUrls[0] :'N/A'\" alt=\"Pearl Jewelry\"\r\n class=\"jewellery-img w-100\">\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #aboutUsTemplate>\r\n <div class=\"d-flex flex-column gap-3\">\r\n <div class=\"text_header d-flex align-items-center justify-content-center\">\r\n <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </div>\r\n <div class=\"desc_text\">\r\n {{schemeDetails?.about}}\r\n </div>\r\n </div>\r\n</ng-template>\r\n<ng-template #schemeCalculator>\r\n <div class=\"d-flex flex-column align-items-center\">\r\n <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\r\n <span>Calculate Your Returns</span>\r\n <div class=\"calc_desc\">\r\n See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\r\n your potential returns.\r\n </div>\r\n </div>\r\n <div class=\"calculator_section\">\r\n <div class=\"gold-purity\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '18_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '24_k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\r\n *ngIf=\"gold?.karats === '22_k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\">\r\n <div class=\"slider-container position-relative\">\r\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"schemeDetails?.valueStep\" class=\"w-100 pale-slider\"\r\n [style.--mdc-slider-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-focus-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-hover-handle-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-active-track-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-ripple-color]=\"data?.styles?.background?.accentColor\"\r\n [style.--mat-slider-value-indicator-color]=\"data?.styles?.background?.accentColor\">\r\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n </mat-slider>\r\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\"> -->\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\r\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\r\n \u20B9 {{option?.value}}\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"mt-3\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <div class=\"row align-items-center justify-content-between mb-3 g-2\">\r\n <!-- Contribution Card -->\r\n <div class=\"col-12 col-sm-6\"\r\n [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Plus Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">+</div>\r\n </div>\r\n\r\n <!-- Benefit Card -->\r\n <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n \u20B9{{benefitAmount | number}}\r\n </div>\r\n <div class=\"text-muted small\">\r\n Scheme Benefit\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Equals Icon - Hidden on mobile -->\r\n <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"fs-3 text-muted\">=</div>\r\n </div>\r\n\r\n <!-- Total Card -->\r\n <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\r\n *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5 text-white\">\r\n <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\r\n \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\r\n </span>\r\n <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\r\n \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n </span>\r\n </div>\r\n <div class=\"text-white-50 small\">\r\n Total Redemption Value\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"card text-center h-100\">\r\n <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n <div class=\"fw-bold calc_amount fs-md-5\">\r\n {{purchasedGram}} gms\r\n </div>\r\n <div class=\"text-muted small\">\r\n Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"terms-and-condition\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\r\n Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\r\n <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n\r\n</ng-template>\r\n<ng-template #faqTemplate>\r\n <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n <div class=\"faq-container\">\r\n <h1 class=\"faq-title\">Frequently Asked Questions</h1>\r\n <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\r\n <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n <div class=\"faq-list\">\r\n <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\r\n <div class=\"faq-question\">\r\n <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\r\n <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\r\n <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\r\n </div>\r\n <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\r\n <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #termsAndConditions>\r\n <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\r\n <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\r\n <h1 class=\"terms-title\">Terms and Conditions</h1>\r\n\r\n <div class=\"terms-content\">\r\n <div class=\"term-item d-flex align-items-center\"\r\n *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\r\n <div class=\"terms_count\">\r\n <h3 class=\"term-heading\">{{ key }}.</h3>\r\n </div>\r\n <div>\r\n <p class=\"term-text mb-0\">\r\n {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\r\n </p>\r\n </div>\r\n </div>\r\n\r\n <!-- <div class=\"important-note\">\r\n <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\r\n Participants will be notified of any changes via registered email or SMS. Continued\r\n participation after notification constitutes acceptance of revised terms.</p>\r\n </div> -->\r\n </div>\r\n </div>\r\n </section>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:17px;padding:0% 20%;line-height:1.5rem;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_options{padding:0% 1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.enroll-btn{font-size:16px;border:1px solid}.faq-container{border-radius:16px;padding:40px 0;width:65vw}.faq-title{font-size:1.8rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px;width:80%}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{width:65vw}.terms-title{font-size:1.8rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;padding:20px;border-radius:16px;width:80%}.term-item{padding-bottom:8px;border-bottom:1px solid #e2e8f0;gap:10px}.term-heading{margin:0!important}.term-item:last-of-type{border-bottom:none;padding-bottom:unset}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.payment-row .label{color:#000!important;font-size:16px}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.payment-row:last-child{margin-bottom:0}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}@media (min-width :320px) and (max-width : 480px){.calc_desc,.desc_text{padding:0%}.random_options{margin-top:1rem}.hero-section{max-height:unset!important}.hero-section .container{padding:0!important}.p-5{padding:2% 0%!important}.sub-header{margin:.5rem 0px!important}.calculator_section{width:100%}.gold-purity{flex-wrap:wrap}.option{font-size:13px;white-space:nowrap}}@media (max-width: 768px){.terms-section{width:100%}.terms-container{padding:30px 0;width:100%}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px;width:100%}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}.faq-container,.faq-section,.faq-list{width:100%}}@media (min-width:475px){.terms-section{padding:0%!important}.card-container{width:31%;height:13vh;align-items:center}.calc_amount{font-size:1.5rem}}.bonus-message{flex-direction:column!important}.bonus-message :is(.staff-selector,.store_selection){width:100%!important}.redeem_info_section{text-align:center}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}.terms-and-condition :is(.store-selector,.form-select){min-width:unset!important}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}.f-16{font-size:16px}a:hover{color:#0a58ca!important}.ans_section{border:none}.plan_desc_section{padding:3% 0%}.hero-title{font-size:4rem;font-weight:900;line-height:1.1;color:#2c3e50}.title-highlight{background:linear-gradient(135deg,#d4a574,#e8c5a0,#f4d2a7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;text-align:center}.hero-description{font-size:1.1rem;color:#666;line-height:1.6}.price-highlight{color:#d4a574;font-weight:700}.jewellery-img{border-radius:20px;box-shadow:0 20px 40px #0000001a;object-fit:cover;height:500px}\n"] }]
15353
15396
  }], ctorParameters: () => [{ type: i2$2.ActivatedRoute }, { type: RestService }, { type: StorageServiceService }, { type: i1$1.MatDialog }, { type: i2$2.Router }, { type: EventsService }, { type: i6$1.MessageService }], propDecorators: { data: [{
15354
15397
  type: Input
15355
15398
  }], index: [{
@@ -15421,7 +15464,7 @@ class SchemesComponent extends BaseSection {
15421
15464
  this.router.navigate(['/scheme-detail'], { queryParams: { schemeId: scheme?.id } });
15422
15465
  }
15423
15466
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemesComponent, deps: [{ token: RestService }, { token: i2$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
15424
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemesComponent, isStandalone: true, selector: "simpo-schemes", inputs: { data: "data", edit: "edit", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"d-flex flex-column\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [id]=\"data?.id\" [simpoSpacing]=\"spacingLayout\">\r\n <ng-container *ngFor=\"let input of this.content?.inputText ?? []\">\r\n <simpo-text-editor [(value)]=\"input.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <div class=\"row mt-2\" [simpoAnimation]=\"styles?.animation\" [class]=\"getParentClass()\" [id]=\"data?.id\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <ng-container *ngFor=\"let scheme of schemes; let i = index\">\r\n <div class=\"d-flex flex-column\" [class]=\"getClass(i)\" (click)=\"showSchemeDetails(scheme)\">\r\n <img [src]=\"scheme?.imgUrls[0] ? scheme?.imgUrls[0] : 'https://prodpassbookapp.blob.core.windows.net/ssp-prod/Store_Banner/jpg.webp?sv=2024-11-04&ss=bfqt&srt=sco&sp=rwdlacupiytfx&se=2030-02-14T01:34:48Z&st=2025-06-17T17:34:48Z&spr=https,http&sig=HohODPqfCy%2B%2BScNrluPdgrYmZYwXlXmsyk4jQ%2F82AtI%3D'\"\r\n [id]=\"data?.id\" alt=\"Scheme Image\" [simpoCorner]=\"styles?.corners\"\r\n [simpoImageDirective]=\"styles?.image\">\r\n <ng-container *ngIf=\"content?.display?.showText\">\r\n <div class=\"scheme-text mt-2 fw-bold fs-18\" [style.color]=\"styles?.background?.accentColor\">\r\n {{scheme?.schemeName ?? \"\"}}</div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;height:100%}.total-container{position:relative}.flex-nowrap{flex-wrap:nowrap!important}.fs-18{font-size:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingDirective, selector: "[simpoSpacing]", inputs: ["simpoSpacing"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
15467
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemesComponent, isStandalone: true, selector: "simpo-schemes", inputs: { data: "data", edit: "edit", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"d-flex flex-column\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [id]=\"data?.id\" [simpoSpacing]=\"spacingLayout\">\r\n <ng-container *ngFor=\"let input of this.content?.inputText ?? []\">\r\n <simpo-text-editor [(value)]=\"input.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <div class=\"row mt-2\" [simpoAnimation]=\"styles?.animation\" [class]=\"getParentClass()\" [id]=\"data?.id\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <ng-container *ngFor=\"let scheme of schemes; let i = index\">\r\n <div class=\"d-flex flex-column\" [class]=\"getClass(i)\" (click)=\"showSchemeDetails(scheme)\">\r\n <img [src]=\"scheme?.imgUrls[0] && scheme?.imgUrls[0] != null && scheme?.imgUrls[0] != '' ? scheme?.imgUrls[0] : 'https://prodpassbookapp.blob.core.windows.net/ssp-prod/Store_Banner/jpg.webp?sv=2024-11-04&ss=bfqt&srt=sco&sp=rwdlacupiytfx&se=2030-02-14T01:34:48Z&st=2025-06-17T17:34:48Z&spr=https,http&sig=HohODPqfCy%2B%2BScNrluPdgrYmZYwXlXmsyk4jQ%2F82AtI%3D'\"\r\n [id]=\"data?.id\" alt=\"Scheme Image\" [simpoCorner]=\"styles?.corners\"\r\n [simpoImageDirective]=\"styles?.image\">\r\n <ng-container *ngIf=\"content?.display?.showText\">\r\n <div class=\"scheme-text mt-2 fw-bold fs-18\" [style.color]=\"styles?.background?.accentColor\">\r\n {{scheme?.schemeName ?? \"\"}}</div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;height:100%}.total-container{position:relative}.flex-nowrap{flex-wrap:nowrap!important}.fs-18{font-size:18px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: SpacingDirective, selector: "[simpoSpacing]", inputs: ["simpoSpacing"] }, { kind: "directive", type: SpacingAroundDirective, selector: "[spacingAround]", inputs: ["spacingAround", "backgroundInfo"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: CornerDirective, selector: "[simpoCorner]", inputs: ["simpoCorner"] }, { kind: "directive", type: ImageDirectiveDirective, selector: "[simpoImageDirective]", inputs: ["simpoImageDirective"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }] }); }
15425
15468
  }
15426
15469
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemesComponent, decorators: [{
15427
15470
  type: Component,
@@ -15441,7 +15484,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
15441
15484
  ImageDirectiveDirective,
15442
15485
  ContentFitDirective,
15443
15486
  ColorDirective
15444
- ], template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"d-flex flex-column\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [id]=\"data?.id\" [simpoSpacing]=\"spacingLayout\">\r\n <ng-container *ngFor=\"let input of this.content?.inputText ?? []\">\r\n <simpo-text-editor [(value)]=\"input.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <div class=\"row mt-2\" [simpoAnimation]=\"styles?.animation\" [class]=\"getParentClass()\" [id]=\"data?.id\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <ng-container *ngFor=\"let scheme of schemes; let i = index\">\r\n <div class=\"d-flex flex-column\" [class]=\"getClass(i)\" (click)=\"showSchemeDetails(scheme)\">\r\n <img [src]=\"scheme?.imgUrls[0] ? scheme?.imgUrls[0] : 'https://prodpassbookapp.blob.core.windows.net/ssp-prod/Store_Banner/jpg.webp?sv=2024-11-04&ss=bfqt&srt=sco&sp=rwdlacupiytfx&se=2030-02-14T01:34:48Z&st=2025-06-17T17:34:48Z&spr=https,http&sig=HohODPqfCy%2B%2BScNrluPdgrYmZYwXlXmsyk4jQ%2F82AtI%3D'\"\r\n [id]=\"data?.id\" alt=\"Scheme Image\" [simpoCorner]=\"styles?.corners\"\r\n [simpoImageDirective]=\"styles?.image\">\r\n <ng-container *ngIf=\"content?.display?.showText\">\r\n <div class=\"scheme-text mt-2 fw-bold fs-18\" [style.color]=\"styles?.background?.accentColor\">\r\n {{scheme?.schemeName ?? \"\"}}</div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;height:100%}.total-container{position:relative}.flex-nowrap{flex-wrap:nowrap!important}.fs-18{font-size:18px}\n"] }]
15487
+ ], template: "<div class=\"total-container\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n <div [id]=\"data?.id\" [spacingAround]=\"stylesLayout\">\r\n <div class=\"d-flex flex-column\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [id]=\"data?.id\" [simpoSpacing]=\"spacingLayout\">\r\n <ng-container *ngFor=\"let input of this.content?.inputText ?? []\">\r\n <simpo-text-editor [(value)]=\"input.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n <div class=\"row mt-2\" [simpoAnimation]=\"styles?.animation\" [class]=\"getParentClass()\" [id]=\"data?.id\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <ng-container *ngFor=\"let scheme of schemes; let i = index\">\r\n <div class=\"d-flex flex-column\" [class]=\"getClass(i)\" (click)=\"showSchemeDetails(scheme)\">\r\n <img [src]=\"scheme?.imgUrls[0] && scheme?.imgUrls[0] != null && scheme?.imgUrls[0] != '' ? scheme?.imgUrls[0] : 'https://prodpassbookapp.blob.core.windows.net/ssp-prod/Store_Banner/jpg.webp?sv=2024-11-04&ss=bfqt&srt=sco&sp=rwdlacupiytfx&se=2030-02-14T01:34:48Z&st=2025-06-17T17:34:48Z&spr=https,http&sig=HohODPqfCy%2B%2BScNrluPdgrYmZYwXlXmsyk4jQ%2F82AtI%3D'\"\r\n [id]=\"data?.id\" alt=\"Scheme Image\" [simpoCorner]=\"styles?.corners\"\r\n [simpoImageDirective]=\"styles?.image\">\r\n <ng-container *ngIf=\"content?.display?.showText\">\r\n <div class=\"scheme-text mt-2 fw-bold fs-18\" [style.color]=\"styles?.background?.accentColor\">\r\n {{scheme?.schemeName ?? \"\"}}</div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;height:100%}.total-container{position:relative}.flex-nowrap{flex-wrap:nowrap!important}.fs-18{font-size:18px}\n"] }]
15445
15488
  }], ctorParameters: () => [{ type: RestService }, { type: i2$2.Router }], propDecorators: { data: [{
15446
15489
  type: Input
15447
15490
  }], edit: [{
@@ -21448,12 +21491,13 @@ class ReturnsCalculatorComponent extends BaseSection {
21448
21491
  this.maxAmount = scheme?.maxInstallmentValue ? scheme.maxInstallmentValue : this.maxAmount;
21449
21492
  this.maturityCount = scheme?.maturityCount ? scheme.maturityCount : this.maturityCount;
21450
21493
  this.monthlyAmount = this.minAmount;
21451
- this.installmentOptions = scheme?.suggestedValues;
21494
+ // this.installmentOptions = scheme?.suggestedValues;
21452
21495
  this.stores = scheme?.storeList ? scheme.storeList : [];
21453
21496
  this.selectedStaff = "";
21454
21497
  this.selectedStore = {};
21455
- // console.log(scheme);
21498
+ console.log(scheme);
21456
21499
  this.enrolledScheme = scheme;
21500
+ this.enrolledScheme?.suggestedValues?.forEach((scheme) => this.installmentOptions.push({ status: false, value: scheme }));
21457
21501
  this.benefitAmount = 0;
21458
21502
  this.getMetalPrice();
21459
21503
  this.onAmountChange();
@@ -21486,7 +21530,16 @@ class ReturnsCalculatorComponent extends BaseSection {
21486
21530
  });
21487
21531
  }
21488
21532
  setMonthlyAmount(amount) {
21489
- this.monthlyAmount = amount;
21533
+ this.installmentOptions.forEach((option) => {
21534
+ if (option.value == amount?.value) {
21535
+ option.status = true;
21536
+ this.monthlyAmount = amount?.value;
21537
+ }
21538
+ else {
21539
+ option.status = false;
21540
+ }
21541
+ });
21542
+ this.monthlyAmount = amount.value;
21490
21543
  this.onAmountChange();
21491
21544
  }
21492
21545
  get individualContribution() {
@@ -21656,7 +21709,7 @@ class ReturnsCalculatorComponent extends BaseSection {
21656
21709
  this.router.navigate(['/scheme-detail'], { queryParams: { schemeId: this.enrolledScheme?.id, termsAndCondition: true } });
21657
21710
  }
21658
21711
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, deps: [{ token: EventsService }, { token: RestService }, { token: i1$1.MatDialog }, { token: StorageServiceService }, { token: i2$2.Router }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
21659
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReturnsCalculatorComponent, isStandalone: true, selector: "simpo-returns-calculator", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n <div class=\"calculator-header text-center mb-4 w-100\">\r\n <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n </div>\r\n <div class=\"sub-header mb-3 p-3\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n </div>\r\n <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n <ng-container *ngFor=\"let scheme of allSchemes\">\r\n <div class=\"form-check scheme-option p-3 border rounded border-primary ind-border\"\r\n (click)=\"onSchemeChange(scheme)\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n <div class=\"form-check-label ms-2\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n \uD83D\uDC64\r\n <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n 'N/A'}}</div>\r\n </div>\r\n <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"gold-purity\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n <div class=\"slider-container position-relative\">\r\n <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n (ngModelChange)=\"onAmountChange()\">\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n (click)=\"setMonthlyAmount(option)\">\r\n {{option}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <!-- <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n </div> -->\r\n\r\n <div class=\"row mb-3\">\r\n <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n number}}</div>\r\n <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)+benefitAmount) | number}}</div>\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\r\n <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\r\n <div class=\"result-label small color-white\">Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\r\n (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n (click)=\"enrollScheme(enrolledScheme)\"\r\n [style.borderColor]=\"styles?.background?.accentColor\">\r\n <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}@media (max-width:475px){.gold-purity{flex-wrap:wrap;gap:.5rem!important;padding:.5rem}.enrolled-gram{font-size:1rem;white-space:nowrap}.bonus-message{flex-direction:column}.staff-selector,.store_selection{width:100%!important}.scheme-results{padding:20px 0}}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}a:hover{color:#0a58ca!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
21712
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ReturnsCalculatorComponent, isStandalone: true, selector: "simpo-returns-calculator", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n <div class=\"calculator-header text-center mb-4 w-100\">\r\n <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n </div>\r\n <div class=\"sub-header mb-3 p-3\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n </div>\r\n <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n <ng-container *ngFor=\"let scheme of allSchemes\">\r\n <div class=\"form-check scheme-option p-3 border rounded border-primary ind-border\"\r\n (click)=\"onSchemeChange(scheme)\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n <div class=\"form-check-label ms-2\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n \uD83D\uDC64\r\n <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n 'N/A'}}</div>\r\n </div>\r\n <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"gold-purity\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n <div class=\"slider-container position-relative\">\r\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"enrolledScheme?.valueStep\"\r\n class=\"w-100 pale-slider\"\r\n [style.--mdc-slider-handle-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-focus-handle-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-hover-handle-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-active-track-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"styles?.background?.accentColor\"\r\n [style.--mat-slider-ripple-color]=\"styles?.background?.accentColor\"\r\n [style.--mat-slider-value-indicator-color]=\"styles?.background?.accentColor\">\r\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n </mat-slider>\r\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n (ngModelChange)=\"onAmountChange()\"> -->\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n (click)=\"setMonthlyAmount(option)\">\r\n \u20B9 {{option?.value ? option?.value : 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <!-- <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n </div> -->\r\n\r\n <div class=\"row mb-3\">\r\n <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n number}}</div>\r\n <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)+benefitAmount) | number}}</div>\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\r\n <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\r\n <div class=\"result-label small color-white\">Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\r\n (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n (click)=\"enrollScheme(enrolledScheme)\"\r\n [style.borderColor]=\"styles?.background?.accentColor\">\r\n <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}@media (max-width:475px){.gold-purity{flex-wrap:wrap;gap:.5rem!important;padding:.5rem}.enrolled-gram{font-size:1rem;white-space:nowrap}.bonus-message{flex-direction:column}.staff-selector,.store_selection{width:100%!important}.scheme-results{padding:20px 0}}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}a:hover{color:#0a58ca!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: AnimationDirective, selector: "[simpoAnimation]", inputs: ["simpoAnimation"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ContentFitDirective, selector: "[simpoLayout]", inputs: ["simpoLayout"] }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "sectionId", "label"], outputs: ["valueChange"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: i10$2.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] }); }
21660
21713
  }
21661
21714
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ReturnsCalculatorComponent, decorators: [{
21662
21715
  type: Component,
@@ -21676,8 +21729,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
21676
21729
  TextEditorComponent,
21677
21730
  ButtonEditorDirective,
21678
21731
  MatProgressSpinner,
21679
- ToastModule
21680
- ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n <div class=\"calculator-header text-center mb-4 w-100\">\r\n <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n </div>\r\n <div class=\"sub-header mb-3 p-3\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n </div>\r\n <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n <ng-container *ngFor=\"let scheme of allSchemes\">\r\n <div class=\"form-check scheme-option p-3 border rounded border-primary ind-border\"\r\n (click)=\"onSchemeChange(scheme)\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n <div class=\"form-check-label ms-2\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n \uD83D\uDC64\r\n <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n 'N/A'}}</div>\r\n </div>\r\n <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"gold-purity\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n <div class=\"slider-container position-relative\">\r\n <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n (ngModelChange)=\"onAmountChange()\">\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n (click)=\"setMonthlyAmount(option)\">\r\n {{option}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <!-- <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n </div> -->\r\n\r\n <div class=\"row mb-3\">\r\n <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n number}}</div>\r\n <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)+benefitAmount) | number}}</div>\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\r\n <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\r\n <div class=\"result-label small color-white\">Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\r\n (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n (click)=\"enrollScheme(enrolledScheme)\"\r\n [style.borderColor]=\"styles?.background?.accentColor\">\r\n <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}@media (max-width:475px){.gold-purity{flex-wrap:wrap;gap:.5rem!important;padding:.5rem}.enrolled-gram{font-size:1rem;white-space:nowrap}.bonus-message{flex-direction:column}.staff-selector,.store_selection{width:100%!important}.scheme-results{padding:20px 0}}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}a:hover{color:#0a58ca!important}\n"] }]
21732
+ ToastModule,
21733
+ MatSlider,
21734
+ MatSliderModule
21735
+ ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\r\n <div class=\"main-section\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\" [spacingHorizontal]=\"stylesLayout\"\r\n [simpoLayout]=\"stylesLayout\">\r\n <div class=\"headers w-100\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <ng-container *ngFor=\"let item of data?.content?.inputText\">\r\n <simpo-text-editor [(value)]=\"item.value\" [editable]=\"edit || false\"></simpo-text-editor>\r\n </ng-container>\r\n </div>\r\n <div class=\"main-container\" [simpoAnimation]=\"styles?.animation\" [id]=\"data?.id\">\r\n <div class=\"calculator bx-shd w-75 mx-auto my-3\">\r\n <div class=\"calculator-header text-center mb-4 w-100\">\r\n <h3 class=\"mb-0 calculator-title\">Interactive Returns Calculator</h3>\r\n </div>\r\n <div class=\"sub-header mb-3 p-3\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Preferred Scheme</h6>\r\n </div>\r\n <div class=\"calculator-body-top d-flex mb-4 px-3\">\r\n <ng-container *ngFor=\"let scheme of allSchemes\">\r\n <div class=\"form-check scheme-option p-3 border rounded border-primary ind-border\"\r\n (click)=\"onSchemeChange(scheme)\">\r\n <input class=\"form-check-input cursor-pointer\" type=\"radio\" name=\"scheme\" id=\"individual\"\r\n (change)=\"onSchemeChange(scheme)\" [checked]=\"scheme.selected\">\r\n <div class=\"form-check-label ms-2\">\r\n <div class=\"d-flex align-items-center mb-2\">\r\n \uD83D\uDC64\r\n <div class=\"scheme-header fw-bold\">{{scheme?.schemeName ? scheme.schemeName :\r\n 'N/A'}}</div>\r\n </div>\r\n <div class=\"scheme-description text-muted small\">Pay 10 months, get 11th month FREE\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"gold-purity\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? [0,0,0]\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_18k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_24k'\">\r\n <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\"\r\n alt=\"\" *ngIf=\"gold?.karats === '_22k'\">\r\n <div>\r\n <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"sub-header mb-3 px-3 monthly-scheme\" *ngIf=\"minAmount && maxAmount\">\r\n <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n <p class=\"enrolled-gram\"\r\n *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n {{purchasedGram}} gms</p>\r\n </div>\r\n\r\n <div class=\"calculate-slider mb-4 px-3\" *ngIf=\"minAmount && maxAmount\">\r\n <div class=\"slider-container position-relative\">\r\n <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"enrolledScheme?.valueStep\"\r\n class=\"w-100 pale-slider\"\r\n [style.--mdc-slider-handle-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-focus-handle-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-hover-handle-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-active-track-color]=\"styles?.background?.accentColor\"\r\n [style.--mdc-slider-with-tick-marks-active-container-color]=\"styles?.background?.accentColor\"\r\n [style.--mat-slider-ripple-color]=\"styles?.background?.accentColor\"\r\n [style.--mat-slider-value-indicator-color]=\"styles?.background?.accentColor\">\r\n <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n </mat-slider>\r\n <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n [step]=\"enrolledScheme?.valueStep\" [(ngModel)]=\"monthlyAmount\"\r\n (ngModelChange)=\"onAmountChange()\"> -->\r\n <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n <span class=\"text-muted\">\u20B9{{minAmount | number}}</span>\r\n <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n <span class=\"text-muted\">\u20B9{{maxAmount | number}}</span>\r\n </div>\r\n <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n </div>\r\n <div class=\"random_opitons d-flex justify-content-center gap-3 align-items-center flex-wrap\"\r\n *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n <div class=\"option cursor-pointer\" *ngFor=\"let option of installmentOptions\"\r\n [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n (click)=\"setMonthlyAmount(option)\">\r\n \u20B9 {{option?.value ? option?.value : 'N/A'}}\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"calculator-bottom px-3 mb-5\">\r\n <div class=\"scheme-results\">\r\n <!-- <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 individual-results-title\">Individual Scheme Results</h6>\r\n </div> -->\r\n\r\n <div class=\"row mb-3\">\r\n <div [class]=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION' ? 'col-6' : 'col-4'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * maturityCount) |\r\n number}}</div>\r\n <div class=\"result-label text-muted small\">Your {{maturityCount}}-Month Contribution\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{benefitAmount | number}}</div>\r\n <div class=\"result-label text-muted small\">Scheme Benefit</div>\r\n </div>\r\n </div>\r\n <div class=\"col-4\" *ngIf=\"enrolledScheme?.schemeType !== 'GOLD_PROTECTION'\">\r\n <div class=\"result-card result-card-highlight text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType != 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)+benefitAmount) | number}}</div>\r\n <div class=\"result-amount fw-bold fs-5\"\r\n *ngIf=\"enrolledScheme?.benefitType === 'DISCOUNT'\">\u20B9{{((monthlyAmount *\r\n maturityCount)) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Total Redemption Value</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\" *ngIf=\"enrolledScheme?.schemeType === 'GOLD_PROTECTION'\">\r\n <div class=\"result-card text-center p-3 border rounded result-card-highlight\">\r\n <div class=\"result-amount fw-bold fs-5\">{{purchasedGram}} gms</div>\r\n <div class=\"result-label small color-white\">Gold Allocation Today\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n *ngIf=\"enrolledScheme && (stores.length >= 2 || staffMembers.length >= 2) \">\r\n <div class=\"store_selection w-50 align-items-center gap-1\" *ngIf=\"stores.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n Store : </span></div>\r\n <div class=\"store-selector\">\r\n <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n (ngModelChange)=\"getMetalPrice()\">\r\n <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n {{store.name}} - {{store.storeRefId}}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class=\"staff-selector w-50 align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n Staff Member : </span></div>\r\n <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n <option value=\"\" disabled>Choose a staff member...</option>\r\n <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n </option>\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <div class=\"terms-and-condition\" *ngIf=\"enrolledScheme\">\r\n <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a\r\n (click)=\"goToTermsAndCondition()\">Terms & Conditions</a>\r\n </div>\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\"\r\n (click)=\"enrollScheme(enrolledScheme)\"\r\n [style.borderColor]=\"styles?.background?.accentColor\">\r\n <span *ngIf=\"!enrollButtonLoader\">Enroll in Scheme</span>\r\n <ng-container *ngIf=\"enrollButtonLoader\">\r\n <div class=\"d-flex align-items-center justify-content-center\">\r\n <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n Loading...\r\n </div>\r\n </ng-container>\r\n </button>\r\n </div>\r\n <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n <div class=\"d-flex align-items-center mb-3\">\r\n \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n </div>\r\n\r\n <div class=\"row mb-3\">\r\n <div class=\"col-6\">\r\n <div class=\"result-card text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n </div>\r\n </div>\r\n <div class=\"col-6\">\r\n <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n Enroll in Scheme\r\n </button>\r\n </div> -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <ng-template #showCharges>\r\n <div class=\"payment-dialog\">\r\n <div class=\"dialog-header\">\r\n <h2>Payment Details</h2>\r\n <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <div class=\"payment-content\">\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Installment Amount:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Convenience Fee:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row\">\r\n <span class=\"label\">Payment Service Charges:</span>\r\n <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n </div>\r\n\r\n <div class=\"payment-row total-row\">\r\n <span class=\"label total-label\">Total Amount:</span>\r\n <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"dialog-actions\">\r\n <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n </div>\r\n </div>\r\n </ng-template>\r\n <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\r\n </div>\r\n\r\n <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\r\n <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\r\n </div>\r\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}.bx-shd{box-shadow:#ffffff1a 0 1px 1px inset,#32325d40 0 50px 100px -20px,#0000004d 0 30px 60px -30px}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.calculator{border-radius:12px;box-shadow:0 4px 6px #0000001a}.calculator-header{background:linear-gradient(145deg,#f2e8cb,#d1c29e);color:#fff;padding:15px;border-radius:8px 8px 0 0}.calculator-title{color:#000;font-weight:600}.sub-header-text{color:#666;font-weight:500}.w-48{width:48%!important}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.random_opitons{padding:1%}.option{padding:1% 2%;border:1px solid lightgrey;border-radius:50px}.payment-row:last-child{margin-bottom:0}.label{color:#666;font-size:14px;font-weight:400}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}.mat-dialog-container{padding:0!important;border-radius:12px!important}.scheme-option{cursor:pointer;transition:all .3s ease;min-width:22vw}.form-check-input:checked{background-color:#d63384;border-color:#d63384}.form-check-input:focus{box-shadow:0 0 0 .25rem #d6338440}.scheme-header{font-size:16px;margin-bottom:5px;color:#333}.scheme-description{font-size:13px;line-height:1.4}.custom-range{height:8px;border-radius:5px;outline:none}.custom-range::-webkit-slider-thumb{appearance:none;width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0003}.custom-range::-moz-range-thumb{width:24px;height:24px;background:#d63384;border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px #0003}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.monthly-amount{color:#d4a574}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{background:#d4a574;color:#fff}.result-card-group{background:#d63384;color:#fff}.ind-border{border:2px solid rgb(201,176,130)!important}.grp-border{border:2px solid rgb(214,51,132)!important}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.spinner{width:30px;height:30px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.bonus-text{color:#d4a574;font-weight:500}.scheme-results{background:#fff;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.group-results-title{color:#d63384;font-weight:600}.enroll-btn{font-size:16px;border:1px solid}.calculator-body-top{overflow-y:scroll;gap:2rem}@media (max-width: 768px){.calculator{width:95%!important}.scheme-results .row{flex-direction:column}.scheme-results :is(.col-4,.col-6){width:100%!important}.calculator-body-top{flex-direction:column!important}.w-48{width:100%!important;margin-bottom:15px}.row .col-4,.row .col-6,.scheme-option{margin-bottom:15px}}@media (max-width:475px){.gold-purity{flex-wrap:wrap;gap:.5rem!important;padding:.5rem}.enrolled-gram{font-size:1rem;white-space:nowrap}.bonus-message{flex-direction:column}.staff-selector,.store_selection{width:100%!important}.scheme-results{padding:20px 0}}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}a:hover{color:#0a58ca!important}\n"] }]
21681
21736
  }], ctorParameters: () => [{ type: EventsService }, { type: RestService }, { type: i1$1.MatDialog }, { type: StorageServiceService }, { type: i2$2.Router }, { type: i6$1.MessageService }], propDecorators: { showChargesTemplate: [{
21682
21737
  type: ViewChild,
21683
21738
  args: ['showCharges', { static: true }]